-
vicdes
Hello,
Attempting to add a design to the page where I have one section in one background color and content in the middle.
Now sure if I have done this right.
I am now getting the background color of the website appearing on the bottom horizontally. Can not figure out how to fix this
My apologies in advance if this was supposed to be posted elsewhere.
More info added below.
Thank You
-
David
Hi there,
for those kinds of design I would begin like so:
1. in the page editor settings sidebar set the Content Container to Full Width:
https://docs.generatepress.com/article/content-container/
This a) makes the page 100% wide and b) removes the Theme spacing.
2. Add a Container Block to the page, this will automatically be full width, so there is no need to set its alignment to full width
2.1 set its Background color
2.2 set its Spacing > Padding Top & Bottom to 80px or a value that suits your needs.3. in the Container Blocks toolbar click the Add Inner Container
https://docs.generateblocks.com/article/add-inner-container/This Container will automatically be centred and have a max width to match the Customizer > Layout > Container Width.
3.1 set its Spacing > Padding Left & Right to 40px on desktop, 30px Tablet, 20px on Mobile.
You can now add whatever content you require inside the inner container.
Then simply duplicate the top container for each section on the page.
-
vicdes
Hello David thank you so much for replying.
I did what you suggested but the inner container is not showing at a width of 1200px nor is it in the centre of the page. There is still a white gap between page content and footer on bottom.
Have added the page link and other info below.
Thank You
-
David
I think you may have pressed the wrong button to add the Inner Container.
Have a look now.If you open the List View you will see:
Container Block #1 ---- Container Block #2 ---- ---- Paragraph block
Container Block #1 now has
Colors > background color set
Spacing > Padding Top and Bottom padding set to 80pxContainer Block #2 now has
Colors – i removed the background color
Sizing > Max Width set to Global Width
Spacing > Margin Left & Right set toauto
These last two styles would automatically be added by the Add Inner Container button. -
vicdes
Hello David thanks for your help. So if I make the inner container bottom padding 0 the gap of white space (which is background colour) will appear on bottom near footer. And if this is change to 1 for example it disappears.
Is this correct?
Thanks Again
-
David
The extra white gap was coming from the Bottom Margin that the paragraph block has attached to it.
That margin will escape the bottom of A container block that has NO bottom padding or NO bottom border. Which creates the extra space below the container -
vicdes
Thank you so much for your help.
I really appreciate it.
-
David
You’re welcome – happy to be of help
-
vicdes
David can I ask you a question around this please?
Is there a way to add a custom css that changes the background color of the container per page or is this locked in?
My thinking was it would be cool to be able to assign different colors to different containers.
So might have 10 pages with one colored container another 10 with a different one and so on with an ability to change this from one point such as the custom css feature.
Thanks Again
-
David
If you wanted to change a color on a page by page basis then you could do something like this:
1. in Customizer > Colors, create a color that will be used for the default container colour.
For my example I will call itcontainer-bg
with a hex color of#ff0000
2. edit the Container and set its Background color to your new color.
Behind the scenes when you created the color in the customizer GP writes the CSS for that variable , which for reference looks like this:
:root { --container-bg: #ff0000; }
Note that
--container-bg
is our color namecontainer-bg
with a double hyphen prefix--
which is the syntax for CSS Variables ( Custom Properties ).The Container Block will be now have a
background-colour: var(--container-bg)
instead of the color value.Which means we can change the value of the variable and update the background.
3. Go to Appearance > Elements -> Add new -> Hook
3.1 In the hook editor add:<style> body { --container-bg: #ff0000; } </style>
change the #ff0000 hex color in the style to what you need for your other pages.
3.2 In the Hook list choose:
wp_head
3.3. Set the Display Rules > Location to the pages you want to change the color.
3.4 publish the elementNow on any of those pages your element will swap the color
-
vicdes
Hi David thanks again for the quick reply.
To confirm this workaround you advised me of is for the Container background color not the page?
Its the container background color I was interested in having this easily managed.
Thanks Again
-
David
It is for the Container Background Color
But it could be used for any color of a block or a color in the customiser -
vicdes
Thanks for the reply.
What I realized is I can add a custom color via the customer option and assign that color to the container.
If the color container needs to be changed then I can just edit this via teh customizer via front end and all pages can change colors.
This is such an awesome theme
Do you know how many custom colors we can add pls?
Thanks Again
-
David
Do you know how many custom colors we can add pls?
I don’t think there is any hard limit. But just for the sake of maintaining your site, don’t start adding 100s 🙂
- You must be logged in to reply to this topic.