- Posts
I am using the Crio template and have added a post list block to my homepage. It’s setup with 3 columns wide. I would like to change the background color for each of the posts. I have tried to go into the Customize Post List editor to change the background color, but that seems to impact the space between the actual posts. I’ve also tried to customize the template by going to Design->Blog->Blog Page->Background Colors and trying to change the Post Header and Post Content colors, but neither seem to work. I’d like the post color background to be gold/yellow instead of the grey that currently appears.
Hi Chris,
Thanks for reaching out and thanks for using BoldGrid Post and Page Builder for WordPress!
Just taking a look at your screenshot I see that the sample post are being pulled in with a Post and Page Builder block and we can edit each post as it’s own column. Notice the blue tab above your first column? If you click the toggle icon and select “Change Background” it will give you the option to change the background for that individual column.
You can repeat the process by hovering over each column to bring up the blue column tab and changing the background color there.
Thanks Brandon. I tried that, but when I select the blue icon, it’s for the row/column. When I select the background, it changes the areas behind each of the posts instead of the color where the text is located.
Oh yes I see, it seems you have some sort of inner element controlling the color there. Could you switch to the text editor tab and copy the entire contents of your page and paste it into this thread.
We’ll examine the block for you and direct you to the correct control so that you can proceed in changing the color.
We look forward to hearing from you.
<div class=”boldgrid-section bg-background-color color3-background-color color-3-text-contrast”>
<div class=”container”>
<div class=”row” style=”padding-top: 0px; padding-bottom: 0px;”>
<div class=”col-md-12 col-xs-12 col-sm-12″></div>
</div>
</div>
</div>
<div class=”boldgrid-section bg-background-color color3-background-color color-3-text-contrast”>
<div class=”container”></div>
</div>
<div class=”boldgrid-section color2-background-color color-2-text-contrast bg-background-color” style=”background-size: cover; background-position: 50% 81%;”>
<div class=”container”>
<div class=”row” style=”padding-top: 75px; padding-bottom: 75px;”>
<div class=”col-md-12 col-xs-12 col-sm-12″>
<div class=””>
<p class=”” style=”text-align: center; font-weight: 600; font-size: 49px;” data-font-weight=”600″>Kaizen Academy Fencing</p>
<p class=”” style=”text-align: center;”>Olympic fencing in Redmond, WA</p></div>
</div>
</div>
</div>
</div>
<div class=”tmpl-about-13 boldgrid-section dynamic-gridblock bg-background-color color3-background-color color-3-text-contrast”>
<div class=”container”>
<div class=”row” style=”padding-top: 50px; padding-bottom: 35px;”>
<div class=”col-md-8 col-sm-8 col-xs-12″>
<div class=”color3-border-color”>
<h2 class=”color1-color bg-text-fx bg-text-fx-closeheavy” style=”font-size: 49px;”>Welcome</h2>
<p class=””>Kaizen Academy, LLC (“Kaizen”) is a United States Fencing Association club that specializes in Olympic Fencing. Kaizen teaches all ages (5-85) of students about the proper use of fencing equipment and play of fencing swords in an energetic and safe environment. Kaizen teaches both able body and wheelchair (parafencing).</p>
<p class=””><span style=”color: #000000;”>Kaizen means “change for better”, and refers to any improvement, be it one-time or continuous, large or small. Success is measured in many ways with multiple paths – we can start you on your journey of a lifetime today.</span></p><div class=”row” style=”padding-top: 25px;”>
<div class=”col-md-4 col-sm-4 col-xs-4″>
<div>
<p class=””>
</p></div>
</div>
<div class=”col-md-4 col-sm-4 col-xs-4″>
<div>
<p class=””></p></div>
</div>
<div class=”col-md-4 col-sm-4 col-xs-4″>
<div>
<p class=””></p></div>
</div>
</div>
</div>
</div>
<div class=”col-md-4 col-sm-4 col-xs-12″>
<p class=””>
</p></div>
</div>
<div class=”row” style=”padding-top: 1px; padding-bottom: 1px;”>
<div class=”col-md-12 col-xs-12 col-sm-12″>
<div class=”row bg-editor-hr-wrap current-edit-as-row”>
<div class=”col-md-12 col-xs-12 col-sm-12″>
<div class=””>
<p class=””> </p><div class=”bg-hr color1-color bg-hr-16″></div>
<p class=””> </p></div>
</div>
</div>
</div>
</div>
<div class=”row” style=”padding-top: 5px; padding-bottom: 40px;”>
<div class=”col-md-12 col-xs-12 col-sm-12″>
<div class=”boldgrid-shortcode” data-imhwpb-draggable=”true” style=”margin-left: 0px; margin-right: auto;”>[boldgrid_component type="wp_boldgrid_component_postlist" opts="%7B%22widget-boldgrid_component_postlist%5B%5D%5Bselected_post%5D%22%3A%22all%22%2C%22widget-boldgrid_component_postlist%5B%5D%5Bcolumns%5D%22%3A%223%22%2C%22widget-boldgrid_component_postlist%5B%5D%5Blimit%5D%22%3A%223%22%2C%22widget-boldgrid_component_postlist%5B%5D%5Bsorting%5D%22%3A%22newest%22%2C%22widget-boldgrid_component_postlist%5B%5D%5Bshow_title%5D%22%3A1%2C%22widget-boldgrid_component_postlist%5B%5D%5Bexcerpt%5D%22%3A1%2C%22widget-boldgrid_component_postlist%5B%5D%5Bdate%5D%22%3A1%2C%22widget-boldgrid_component_postlist%5B%5D%5Bauthor%5D%22%3A0%2C%22widget-boldgrid_component_postlist%5B%5D%5Bthumbnail%5D%22%3A0%7D"]
</div>
</div>
</div>
</div>
</div>
<div class=”tmpl-contact-8 boldgrid-section dynamic-gridblock color1-background-color color-1-text-contrast bg-background-color”>
<div class=”container”>
<div class=”row” style=”padding-top: 15px; padding-bottom: 15px;”>
<div class=”col-md-3 col-sm-4 col-xs-12″>
<div class=”bg-box”>
<h4 class=””>Location</h4>
<p class=””>Kaizen Academy LLC</p><div dir=”auto”>9620 153rd Ave NE, #A5</div>
<div dir=”auto”>Redmond, WA 98052</div>
</div>
</div>
<div class=”col-md-3 col-sm-4 col-xs-12″ style=”padding-right: 0.1em;”>
<div class=”bg-box”>
<h4 class=””>Contact</h4>
<p class=””>Need additional assistance?
Please contact us:</p>
<p class=”” style=”margin-top: 15px; padding-right: 0em;”>info@KaizenFencing.com</p>
<p class=””>425.318.8808</p></div>
</div>
<div class=”col-md-3 col-sm-4 col-xs-12″>
<div class=”bg-box”>
<h4 class=””>Hours</h4>
<p class=””>We are open Monday to Friday, from 4:00 pm to 9:00 pm.</p>
<p class=””>Sat by appointment</p>
Sun closed</div>
</div>
<div class=”col-md-3 col-sm-12 col-xs-12″>
<div class=”bg-box”>
<h4 class=””>Social</h4>
<p class=”mod-reset”><i class=”fa fa-instagram” style=”border-radius: 50px; padding: 0.6em; font-size: 18px; border-width: 1px; border-style: solid;” aria-hidden=”true”><span style=”display: none;”> </span></i></p>
<p class=”mod-reset”><i class=”fa fa-facebook” style=”border-radius: 50px; padding: 0.6em; font-size: 18px; border-width: 1px; border-style: solid;” aria-hidden=”true”><span style=”display: none;”> </span></i></p></div>
</div>
</div>
</div>
</div>
<div class=”boldgrid-section color4-background-color color-4-text-contrast bg-background-color”>
<div class=”container”>
<div class=”row”>
<div class=”col-md-12 col-xs-12 col-sm-12″>
<div class=”row bg-editor-hr-wrap”>
<div class=”col-md-12 col-xs-12 col-sm-12″>
<div><hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Also, I’m happy to not have this in some nested block if that’s the fix. Just not sure how to do that. Trying to make this as easy as possible to my even less technical site maintainer will be able to make this work when I’m not around.
Thanks Chris,
We’ll see if we can reconfigure each block to its pull its background from the main column alone. Could you send us the URL to the page you’re working on? I apologize, I didn’t realize that it wasn’t already linked somewhere in the thread.
Thanks Brandon. This is the page under development. It’s an ugly mess 😛
Thanks Chris,
Okay I see what’s going on, The issue is the widget that pulls in your post content inherits it’s background from your global color palette options in Customize<<Color Palette. You can try going into those options and finding the color that corresponds with your columns background and changing it to the color you would like to display. Just be mindful that manipulating your color palettes could change the colors of other elements on your site as well.
If you want each column to display a different color with this type of block it would be a little more difficult. It would actually require you to add some CSS class selectors to your columns using the Text editor tab and then manipulating the background colors manually using the CSS/JS Customizer.
I was able to recreate a 3 column layout that you may be able to use as a base to create the design you need. Just copy the code here and use the Text editor tab to paste it wherever you would like it to display on your webpage. After you paste it into the page switch back to the Visual editor to edit the block visually.
I hope this helps. Don’t hesitate to reach back out to us if you have any further questions.
</p>
</p>
</p>
</p>- The topic ‘How Do I Change The Background Color for Each Column in a 3 Column Layout?’ is closed to new replies.
