[Bianca]

I may have found a cause but not yet a solution. If I compare the output in your html with the html output in the demo, I see that the markup of the SVG filter is slightly different. In yours I miss this bit
<style type="text/css" media="screen"></style>
I'm not sure if you edited this yourself or something else is happening, like maybe the server is not supporting svg.

My knowledge in that area is not that big.

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

I see that the link I inserted gets blocked. It was supposed to lead you to the html source in the browser. In the meantime this has changed I see. Now line 461.

This code:

			<filter id="breakthrough-overlay">
				<feColorMatrix
				type="matrix"
				values="0,445098 0 0 0 0
					0 0,743137 0 0 0
					0 0 0,958824 0 0
					0 0 0 .9 0 "></feColorMatrix>
			</filter>

If you change the color in the customizer. The value should change. If it doesn't then it seems that changes are not being saved.

An extra check you can do is to see if your php version is up to date (7.3 + recommended).

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

This reply has been marked as private.

[Bianca]

Hi Paul,
There seems to be an update released to Genesis Blocks that addresses an error like you described.

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

I now cut up the answer in two parts and that seems to work. Can it be that inserting multiple code snippets is leading to this, intentional or unintentional?

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

.outer-column .ab-block-layout-column-inner h2{
	padding: 30px 100px 0 100px;
	text-align:center
}

.outer-column .ab-block-layout-column-inner p{
	padding: 0 100px 30px 100px;
	text-align:center
}

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

(As my previous replies dissapeared, one more attempt)
Hi There,
For some reason when the columns block is set to "align-full" the negative margin is not applied. When you add !important to the margin-overlay class in the front-end.css file (or customizer if you prefer) it works. It's not elegant but gets the job done. So:

.margin-overlay {
	margin-top: -100px!important;
}

For the space between the columns:

• remove the background-color form the advanced columns block.
• add a background-colour to the individual column block.

Selecting the individual block can be difficult sometimes. I always use the top navigation bar (hamburger-ish dropdown somewhere on the top left)to select the correct individual block.

• Apply the background color.
• On the right sidebar of the editor there is a possibility to apply a class to the individual block. Add a custom class, for example "outer-column".
• Head over to the customizer and add the following CSS

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

That's not suppose to happen 🙁
Which version of the child theme are you using?
Are the color settings saved and outputted in the html? Especially check if the value at line 729 changes when you change the color, as this is the code bit that is responsible for the overlay.

Have you tried to disable all the plugins? I noticed in the browser inspector that there is an error frown: Uncaught (in promise) null
Unfortunately my knowledge of that particular error is zero to none, so I can't tell if it's related.

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

Hi There,
For some reason when the columns block is set to "align-full" the negative margin is not applied. When you add !important to the margin-overlay class in the front-end.css file (or customizer if you prefer) it works. It's not elegant but gets the job done. So:

.margin-overlay {
	margin-top: -100px!important;
}

For the space between the columns:

• remove the background-color form the advanced columns block.
• add a background-colour to the individual column block.

Selecting the individual block can be difficult sometimes. I always use the top navigation bar (hamburger-ish dropdown somewhere on the top left)to select the correct individual block.

• Apply the background color.
• On the right sidebar of the editor there is a possibility to apply a class to the individual block. Add a custom class, for example "outer-column".
• Head over to the customizer and add the following CSS

.outer-column .ab-block-layout-column-inner h2{
	padding: 30px 100px 0 100px;
	text-align:center
}

.outer-column .ab-block-layout-column-inner p{
	padding: 0 100px 30px 100px;
	text-align:center
}

Hope this helps.

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

Hi There,
It's definitely possible to add a slider to the homepage. The best approach for this depends on what you want to slide, images, posts, testimonials etc...and if you feel comfortable with coding a bit.

There is this one of Soliloquy and there is also Smart Slider. If you want to use the Genesis Responsive Slider outside of the standard widget area's, then this involves some extra coding.

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

Hi There,
Where did you try to change the color? Did you follow this or tried to change it somewhere else?

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

Hi There,
You can put the HTML bit of the code (the code between the body tags) in a HTML widget to display it in the sidebar. The CSS (the code between the style tags) can be placed in the Theme customizer's "Extra CSS". That should work.

EDIT: Looking closer, the code will not validate. Try this instead:
Widget HTML

<div class="my-table">
	
<table>
  <tr>
  <td class="td-first"><span>Brands TRUST Music</span></td>
  </tr>
</table>
 <table>
  <tr>
    <td class="td-second"><img title="DJ mix playlists" src="https://djcarl.com/animations/corporate-1.gif" width="110" height="90"></td>
    <td class="td-third"><img title="Emcee hosting" src="https://djcarl.com/animations/corporate-2.gif" width="110" height="90"></td>
  </tr>
  <tr>
    <td class="td-fourth"><img title="Music marketing consulting" src="https://djcarl.com/animations/corporate-3.gif" width="110" height="90"></td>
    <td class="td-fifth"><img title="Event and project management" src="https://djcarl.com/animations/corporate-4.gif"></td>
  </tr>
  </table>
  <table>
   <tr>
  <td class="td-sixth"><span>Expert DJ Carl©</span></td>
  </tr>
  </table>
</div>

Customizer CSS

.my-table{
  background-color: #B0C4DE;
  width: 240px;
  border: 1px solid #4169E1;
  padding: 40px;
  margin: 40px;
}

.my-table td {
	text-align:center;
}

.td-first,
.td-sixth {
	background-color:#B0C4DE;
}

.td-second,
.td-third,
.td-fourth,
.td-fifth {
	background-color:#fff;
	border:1px solid #B0C4DE;
}

.td-first span {
color: #000000; 
font-family: verdana,arial; font-size: 20px;
}

There are several places online to learn CSS. codeacademy.com that has some great free courses. Also take a look at Mozilla https://developer.mozilla.org/en-US/docs/Learn/CSS

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

Hi There,

You can actually remove the whole site header (the logo and navbar) by choosing the "Landing" page template in the editor. You can find this option while editing the page in the right column at the Page Attributes section.

If you want to use CSS for this you can add this CSS to your customizer:

.site-header {
display:none;
}

This CSS removes the site header on all the pages

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Bianca]

Hi There,
The CSS for the admin editor can be adjusted in the child theme path
navigation-pro/lib/gutenberg/style-editor.css

---

I am a Marketing Communications specialist at Communics.

Visit my personal website | Follow me on Twitter | Connect on LinkedIn

[Author]

Posts