Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #45528
    Chris
    Guest

    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.

    Screenshot-2021-11-29-003946

    #45547
    Brandon C
    Keymaster

    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.

    #45565
    Chris
    Guest

    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.

    Screenshot-2021-11-29-100319

    #45569
    Brandon C
    Keymaster

    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.

    • This reply was modified 8 months, 2 weeks ago by Brandon C.
    #45578
    Chris
    Guest

    <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>

    #45580
    Chris
    Guest

    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.

    #45598
    Brandon C
    Keymaster

    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.

    #45626
    Chris
    Guest

    Thanks Brandon. This is the page under development. It’s an ugly mess 😛

    Home

    #45668
    Brandon C
    Keymaster

    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.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘How Do I Change The Background Color for Each Column in a 3 Column Layout?’ is closed to new replies.