-
xiyang0630
Hello,
How to edit my blog post page structure like yours. Please take a look at the screenshot.
Screenshot: https://postimg.cc/YL686bwL
The background color should still be there.
Thank you
-
Hi there,
Your site is using one container structure, try switching it to separate container at cusotmizer > layout > container.
And you can set the background color for sidebars at customzier > colors.
-
xiyang0630
Hello Ying,
Sorry for the delayed response. I was waiting for the review from Google Adsense, so I didn’t edit the blog post page structure for a few days.
I was trying to achieve something like this: Set the background color as black and the content container as grey. Meanwhile, I want to create several customized containers in the sidebar. I used to have a query loop template called “recent posts” there. And I will create an email sign up form below the recent posts there. These two containers’ color will be grey same as the content container. And each container will have a gap there like this support forum page structure.
I tried to use your method but the sidebar is a piece of black rectangle. And I don’t know how to put content or any blocks or elements into it.
Is the best way to do it: still set one container structure, and use elements to create and design the layout for sidebar?
Please take a look at the screenshot: https://postimg.cc/jDRkP8Gv
Thank you in advance!
-
Hi there,
1. in the Customizer > Layout > Container
1.1 set the Container Structure to Separate Containers
1.2 set the Separating Space to a value eg 20px. This is the space between content containers and widget.2. in Customize Colors set the Content Background and the Sidebar Widget Background
That should give you what you require
-
xiyang0630
Hello,
It seems that if I set the content background color, the content background color on the homepage will be changed too. How can I separate them? I want to separately customize the content background on the blog post page and homepage.
Please take a look at the screenshot: https://postimg.cc/gallery/3dqfqsC
By the way, where to edit the container background color? I mean the full-width container on the blog post page.
-
Hi there,
To apply the content background color only on the blog post page, you’ll need to use CSS. For example:
body.single-post .site-content .content-area { background-color: grey; }
By the way, where to edit the container background color? I mean the full-width container on the blog post page.
I see that you used CSS to define the background color. You can find this CSS under Customize > Additional CSS:
body.single-post, body.single-post .site-content { background-color: #201f1d; }
-
xiyang0630
Hello,
How can I only change the left container’s background color?
Screenshot: https://postimg.cc/LJgS38J6
Thank you in advance.
-
Try this:
.separate-containers.single-post .inside-article { background-color: red; }
-
xiyang0630
It worked!
Jesus. Marry me, Ying! The customer support is way too good!
-
I’m married lol…
Glad you are happy with our support 🙂
-
xiyang0630
lol… congratulations! Sad news for me😭, Just kidding.😛
Anyway, Your support is awesome as always. You are all very good. You, Alvind, David and the others.
Have a great day.
-
Thank you 🙂
I’m very happy to see these nice words!
-
rrcsoares
Hi Davi,
I have the following problem with the Spacious template:
In the Layout > Container section, even though I set the “Separating space” field to 15px, it always remains larger than I would like. What would be the CSS to fix this?
See this image: https://drive.google.com/file/d/1NGPEgRWfw7oXCNwtUOSaxFrJQdlj4tSv/view?usp=sharing
I need this space to be 15px
Thank you very much
Roberto Soares
-
Hi Roberto,
can you raise a new topic where you can share a link to your site so I can take a look at where the extra space is coming from.
- You must be logged in to reply to this topic.