- This topic has 12 replies, 4 voices, and was last updated 4 months, 2 weeks ago by
Elvin.
-
AuthorPosts
-
October 13, 2020 at 3:17 pm #1487561
Alexis
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=0Here’s what it looks like in the editor compared to the site. It’s on a local environment otherwise I’d share a link.
October 13, 2020 at 4:36 pm #1487611Leo
StaffCustomer SupportHi 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!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 13, 2020 at 6:11 pm #1487670Alexis
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
October 14, 2020 at 12:56 am #1488019David
StaffCustomer SupportHi 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?Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 14, 2020 at 11:44 am #1489095Alexis
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.
October 14, 2020 at 5:17 pm #1489447Alexis
I finally managed to get it up on a staging environment. Here’s the link.
https://alexisrichard.com/riverfrontlimo/staging/6775/October 15, 2020 at 1:18 am #1489837David
StaffCustomer SupportOK – 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 15, 2020 at 2:54 pm #1491113Alexis
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.
October 15, 2020 at 3:04 pm #1491123Elvin
StaffCustomer SupportHi,
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.
A wise man once said:
"Have you cleared your cache?"October 15, 2020 at 3:10 pm #1491130Alexis
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.
October 15, 2020 at 3:15 pm #1491135Alexis
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.
October 15, 2020 at 3:20 pm #1491139Elvin
StaffCustomer SupportI’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.
A wise man once said:
"Have you cleared your cache?"October 15, 2020 at 3:21 pm #1491142Elvin
StaffCustomer SupportAfter 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. 🙂
A wise man once said:
"Have you cleared your cache?" -
AuthorPosts
- You must be logged in to reply to this topic.