Archived topic
Generateblocks--Margin not transparent
12 replies · Started by Alexis on October 13, 2020
Hi! So I'm working on a website for a client, but when I create a layout the margins around the containers that appear transparent in the editor aren't transparent in the website itself.
https://www.dropbox.com/s/ueihm5ov7xopihk/generateblocks1.PNG?dl=0
https://www.dropbox.com/s/1sk6vyzcx3xk4py/generateblocks2.PNG?dl=0
Here's what it looks like in the editor compared to the site. It's on a local environment otherwise I'd share a link.
Hi there,
Tough for me to tell without seeing the site live.
Any chance you can duplicate it on a staging server for us to see?
Thanks!
Let me see-- I may be able to... I'll just have to run it on my server until you've taken a look. It's going to be a limited time link.
a1e34c9fe8a1.ngrok.io
Hi there,
sorry the link has expired.
Is the issue the background color or the space between the Container blocks ?
Could you share a screenshot of the editor with the Container block selected so i can see the layout?
Here's that picture--
https://www.dropbox.com/s/wqi0ucz1npxv25l/generateblocks3.PNG?dl=0
And here's another try at that link-- it should work if you can access it today while I'm on the server working.
2d720efc43ca.ngrok.io
What is happening is that the margin, instead of showing black as the background of the site is set to, is showing grey. I'm not sure why it's happening. In the editor, you see it as I want it. In the picture I linked above you can see how it shows up on the website itself. With that grey background.
I finally managed to get it up on a staging environment. Here's the link.
https://alexisrichard.com/riverfrontlimo/staging/6775/
OK - so what you're seeing is the Customizer > Color > Content background which is set to that off white color. You can either change that color to 'black' - but it will apply to all Theme content backgrounds or if you only want it applied to that Container then you will need to add a Full Width Container Blcok with the black background and then insert your current container inside that.
So unfortunately that IS set to black already. Here's a picture.
https://www.dropbox.com/s/u7mhx6cd5z1z1cr/generateblocks4.PNG?dl=0
As you can see, the background color for content is set to black already. I'm still having that grey show up however.
Hi,
As you can see, the background color for content is set to black already. I’m still having that grey show up however.
That's because you have this CSS code added to your additional CSS.
body.full-width-content .inside-article {
box-shadow: none;
background-color: #fafafa;
}It's overriding your customizer settings. Remove the background-color property here for the customizer background color to apply.
I'm not sure where that's coming from... I haven't touched the CSS beyond what's in the customizer and generate blocks plugin options. I'll poke around, but it was doing this before I touched much of anything.
I installed the generatepress theme, put in my credentials and chose one of the site templates. I think it was "vacation" but I could be wrong. First block I started messing with had this issue with the background.
I'll try to track down which file that CSS is from and remove it manually though. Thanks for pointing it out.
After I took a look at the additional CSS like you recommended, it turns out that the site template put in a ton of CSS there. I had absolutely no idea. Thank you so much for pointing it out! I never would have found it because I didn't know it was there. I wasn't aware a site template would put additional CSS in that may mess with my own styling of the template later on. That's good to know.
I’m not sure where that’s coming from… I haven’t touched the CSS beyond what’s in the customizer and generate blocks plugin options. I’ll poke around, but it was doing this before I touched much of anything.
When you import a site template from the Site Library, it usually adds things like this.
When inspecting a WordPress site, you'll usually see a <style id="wp-custom-css"> tag inside the <head> tag. This is where the CSS codes from Dasboard > Appearance > Customize > Additional CSS are placed on the DOM structure.
If you inspect your site on chrome (CTRL+SHIFT+I) and look for this, you'll find the css code I've mentioned on the previous reply within this style tag.
After I took a look at the additional CSS like you recommended, it turns out that the site template put in a ton of CSS there. I had absolutely no idea. Thank you so much for pointing it out! I never would have found it because I didn’t know it was there. I wasn’t aware a site template would put additional CSS in that may mess with my own styling of the template later on. That’s good to know.
Yeah this is important to know because whatever is added in the Additional CSS will override whatever you set on the customizer settings. :)
