Tagged: Blocks, Post and Page Builder
- AuthorPosts
- November 22, 2022 at 2:56 pm #70008NancyGuest
I’ve placed the blog post list in my web page, but want to change the background color of the individual posts and there doesn’t seem to be a control to do that, changing the background color changes the entire block rather than individual posts. How can I change this? Thank you.
November 23, 2022 at 4:22 am #70082Brandon CKeymasterHi Nancy,
Thanks for reaching out with your BoldGrid Post and Page Builder questions!
At this time there’s no easy way to change the background color of individual Post List items in the Post List Component block but we are working on a new feature that will give you this ability in an upcoming release.
For now if you can switch to the “Text” editor in your Post and Page Builder editor and copy the code you see there and paste it here into the forum we can add some classes and styling that should allow you modify the post list background from the WordPress Customizer.
We look forward to assisting you further with this!
November 28, 2022 at 3:37 am #70155NancyGuestThank you very much. The page is still under development but here is the html. I appreciate your assistance.
<div style=”border-width: 5px 0px 0px; background-image: url(‘https://staging.rfocentral.com/wp-content/uploads/2022/11/Picture1.jpg’); background-size: cover; background-position: 50% 50%;” class=”boldgrid-section color1-border-color” data-imhwpb-asset-id=”1184693″ data-image-url=”https://staging.rfocentral.com/wp-content/uploads/2022/11/Picture1.jpg”>
<div class=”container”>
<div class=”row background-parallax” style=”padding-top: 110px; padding-bottom: 210px; border-width: 0px;”>
<p class=””> </p>
<h1 class=”h1 color1-color” style=”margin-top: 0px; border-width: 0px; font-size: 77px;”>Risk free, hassle free completions.</h1>
<div class=”col-lg-6 col-md-5 col-sm-12 col-xs-12″>
<h2 class=”” style=”border-width: 0px; width: auto; font-size: 43px;”>Every project. Every time.</h2>
</div>
</div>
</div>
</div>
<div class=”tmpl-contact-7 boldgrid-section dynamic-gridblock color1-background-color color-1-text-contrast bg-background-color” style=”border-width: 0px;”>
<div class=”container”>
<div class=”row” style=”padding-top: 60px;”>
<div class=”col-md-12 col-sm-12 col-xs-12 col-lg-12″>
<h2 class=”” style=”text-align: center;”>Key Benefits Headline</h2>
</div>
</div>
<div class=”row” style=”padding-top: 15px; padding-bottom: 50px;”>
<div class=”col-md-4 col-sm-4 col-xs-12 text-center col-lg-4″>
<div class=”bg-box”>
<h3 class=””>100% Paperless, 100% Auditable</h3>
<p class=”” style=”text-align: left;”>Perform completely paperless turnovers and completions that are easily audited. Progress is updated in real-time, documentation is easily accessible to all stakeholders where and when they need it, and handoff between phases is automatic and seamless.</p></div>
</div>
<div class=”col-md-4 col-sm-4 col-xs-12 text-center col-lg-4″>
<div class=”bg-box”>
<h3 class=””>Multi-disciplinary Visibility</h3>
<p class=”” style=”text-align: left;”>Track and manage the progress of all disciplines on the project in one master database, including civil, piping, mechanical, electrical, instrumentation and control systems. Your team has 100% visibility and accessibility to data, progress and reports at all times.</p></div>
</div>
<div class=”col-md-4 col-sm-4 col-xs-12 text-center col-lg-4″>
<div class=”bg-box”>
<h3 class=””>Third Benefit Heading</h3>
<p class=””>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu dignissim tortor, sit amet bibendum lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
</div>
</div>
</div>
</div>
<div class=”tmpl-team-5 boldgrid-section dynamic-gridblock color5-background-color color-5-text-contrast bg-background-color” style=”border-width: 0px; margin-left: auto; margin-right: auto;”>
<div class=”container”>
<div class=”row” style=”padding-top: 71px;”>
<div class=”col-lg-12 col-md-12 col-xs-12 col-sm-12″>
<h2 class=”color1-color” style=”text-align: center; border-width: 0px;”>Industries who benefit</h2>
</div>
</div>
<div class=”row” style=”padding-top: 18px; padding-bottom: 0px; border-width: 0px; margin-right: -15px;”>
<div class=”col-md-3 col-sm-6 col-xs-12 col-lg-3″>
<div style=”padding: 10px; text-align: center; border-width: 0px;” class=”bg-box”>
<p class=””><i class=”fa bg-inserted-icon color2-color fa-save” style=”font-size: 75px; border-width: 0px;” aria-hidden=”true”> <span style=”display: none;”> </span> </i></p>
<p class=”” style=”text-align: center;”> </p><h4 class=”color4-color” style=”text-align: center; border-width: 0px;”>Industry 1</h4>
<p class=”” style=”text-align: center; margin: 20px 0; font-size: .9em;”> </p></div>
</div>
<div class=”col-md-3 col-sm-6 col-xs-12 col-lg-3″>
<div style=”padding: 10px; text-align: center;” class=”bg-box”>
<p class=””><i class=”fa bg-inserted-icon color2-color fa-photo” style=”font-size: 75px; border-width: 0px;” aria-hidden=”true”> <span style=”display: none;”> </span> </i></p>
<p class=”” style=”text-align: center;”> </p><h4 class=”color4-color” style=”text-align: center; border-width: 0px;”>Industry 2</h4>
</div>
</div>
<div class=”col-md-3 col-sm-6 col-xs-12 col-lg-3″>
<div style=”padding: 10px; text-align: center;” class=”bg-box”>
<p class=””><i class=”fa bg-inserted-icon color2-color fa-volume-control-phone” style=”font-size: 75px; border-width: 0px;” aria-hidden=”true”> <span style=”display: none;”> </span> </i></p>
<p class=”” style=”text-align: center;”> </p><h4 class=”color4-color” style=”text-align: center; border-width: 0px;”>Industry 3</h4>
</div>
</div>
<div class=”col-md-3 col-sm-6 col-xs-12 col-lg-3″>
<div style=”padding: 10px; text-align: center;” class=”bg-box”>
<p class=””><i class=”fa bg-inserted-icon color2-color fa-chain” style=”font-size: 75px; border-width: 0px;” aria-hidden=”true”> <span style=”display: none;”> </span> </i></p>
<p class=”” style=”text-align: center;”> </p><h4 class=”color4-color” style=”text-align: center; border-width: 0px;”>Industry 4</h4>
</div>
</div>
</div>
</div>
</div>
<div class=”boldgrid-section color2-background-color color-2-text-contrast bg-background-color” style=”border-width: 0px; background-image: url(‘https://staging.rfocentral.com/wp-content/uploads/2022/11/refinery-at-night-shaded.jpg’); background-size: cover; background-position: 50% 50%;” data-image-url=”https://staging.rfocentral.com/wp-content/uploads/2022/11/refinery-at-night-shaded.jpg”>
<div class=”container”>
<div class=”row” style=”padding-top: 75px; padding-bottom: 24px;”>
<div class=”col-lg-12 col-md-12 col-xs-12 col-sm-12″>
<h2 class=”” style=”margin-top: 0px; text-align: center; border-width: 0px; color: #ffffff;”>Eliminate your commissioning headaches</h2>
</div>
</div>
<div class=”row” style=”padding-bottom: 50px; border-width: 0px;”>
<div class=”col-md-12 col-sm-12 col-xs-12 col-lg-12″ style=”border-width: 0px;”>
<div class=”row” style=”border-width: 0px; padding: 0em; background-color: rgba(255, 255, 255, 0);”>
<div class=”col-md-4 col-sm-12 col-xs-12 col-lg-4″>
<div class=”bg-box color5-background-color color-5-text-contrast bg-background-color” style=”padding: 1.5em; margin: 1em 0px; border-width: 0px;”>
<h4 class=”color1-color” style=”text-align: center; border-width: 0px;”>Progress Tracking</h4>
<div class=”flex_column av_one_half flex_column_div av-zero-column-padding first avia-builder-el-64 el_before_av_one_half avia-builder-el-first “><section class=”av_textblock_section “>
<div class=”avia_textblock ” itemprop=”text”>Confidently track and manage progress on your projects regardless of discipline or project phase.
</div>
</section></div>
<p class=”color1-color” style=”text-align: right; border-width: 0px; font-style: normal;” data-font-style=”normal”>Learn more</p></div>
</div>
<div class=”col-md-4 col-sm-12 col-xs-12 col-lg-4″>
<div class=”bg-box color5-background-color color-5-text-contrast bg-background-color” style=”padding: 1.5em; margin: 1em 0px; border-width: 0px;”>
<h4 class=”color1-color” style=”text-align: center; border-width: 0px;”>Verification & Sign-off</h4>
<div class=”flex_column av_one_half flex_column_div av-zero-column-padding first avia-builder-el-69 el_before_av_one_half avia-builder-el-first “><section class=”av_textblock_section “>
<div class=”avia_textblock ” itemprop=”text”>Define custom sign-off and approval processes for every checklist and workflow in every project phase.
</div>
</section></div>
<p class=”color1-color” style=”text-align: right; border-width: 0px; font-style: normal;” data-font-style=”normal”>Learn more</p></div>
</div>
<div class=”col-md-4 col-sm-12 col-xs-12 col-lg-4″>
<div class=”bg-box color5-background-color color-5-text-contrast bg-background-color” style=”padding: 1.5em; margin: 1em 0px; border-width: 0px;”>
<h4 class=”color1-color” style=”text-align: center; border-width: 0px;”>Work Planning</h4>
<div class=”flex_column av_one_half flex_column_div av-zero-column-padding first avia-builder-el-74 el_before_av_one_half avia-builder-el-first “><section class=”av_textblock_section “>
<div class=”avia_textblock ” itemprop=”text”>
<p class=”” style=”text-align: left;”>Effortlessly sync data with scheduling software Primavera or CMMS for full work planning functionality.</p></div>
</section></div>
<p class=”color1-color” style=”text-align: right; border-width: 0px; font-style: normal;” data-font-style=”normal”>Learn more</p></div>
</div>
</div>
<div class=”row” style=”border-width: 0px; padding: 0em; background-color: rgba(255, 255, 255, 0);”>
<div class=”col-md-4 col-sm-12 col-xs-12 col-lg-4″>
<div class=”bg-box color5-background-color color-5-text-contrast bg-background-color” style=”padding: 1.5em; margin: 1em 0px; border-width: 0px;”>
<h4 class=”color1-color” style=”text-align: center; border-width: 0px;”>Management of Change</h4>
<div class=”flex_column av_one_half flex_column_div av-zero-column-padding first avia-builder-el-79 el_before_av_one_half avia-builder-el-first “><section class=”av_textblock_section “>
<div class=”avia_textblock ” itemprop=”text”>Ensure management of change processes are implemented and properly documented every time.
</div>
</section></div>
<p class=”color1-color” style=”text-align: right; border-width: 0px; font-style: normal;” data-font-style=”normal”>Learn more</p></div>
</div>
<div class=”col-md-4 col-sm-12 col-xs-12 col-lg-4″>
<div class=”bg-box color5-background-color color-5-text-contrast bg-background-color” style=”padding: 1.5em; margin: 1em 0px; border-width: 0px;”>
<h4 class=”color1-color” style=”text-align: center; border-width: 0px;”>Real-time Reporting</h4>
<p class=”” style=”border-width: 0px; text-align: left;”>Provide up-to-the-minute reporting to your team or stakeholders at any time during the project lifecycle.</p>
<p class=”color1-color” style=”text-align: right; border-width: 0px; font-style: normal;” data-font-style=”normal”>Learn more</p></div>
</div>
<div class=”col-md-4 col-sm-12 col-xs-12 col-lg-4″>
<div class=”bg-box color5-background-color color-5-text-contrast bg-background-color” style=”padding: 1.5em; margin: 1em 0px; border-width: 0px;”>
<h4 class=”color1-color” style=”text-align: center; border-width: 0px;”>Regulatory & Auduts</h4>
<div class=”flex_column av_one_half flex_column_div av-zero-column-padding first avia-builder-el-89 el_before_av_one_half avia-builder-el-first “><section class=”av_textblock_section “>
<div class=”avia_textblock ” itemprop=”text”>Fulfill regulatory reporting requirements with ease, and rest easy knowing audits will go smoothly.
</div>
</section></div>
<p class=”color1-color” style=”text-align: right; border-width: 0px; font-style: normal;” data-font-style=”normal”>Learn more</p></div>
</div>
</div>
</div>
</div>
<div class=”row” style=”padding-bottom: 0px;”>
<div class=”col-lg-12 col-md-12 col-xs-12 col-sm-12″>
<p class=”” style=”border-width: 0px; margin-left: auto; margin-right: auto; text-align: center;”>Learn more </p></div>
</div>
</div>
</div>
<div class=”boldgrid-section color2-background-color color-2-text-contrast bg-background-color hidden-xs hidden-sm” style=”border-width: 0px; border-style: none;”>
<div class=”container”>
<div class=”row” style=”padding-top: 0px; padding-bottom: 0px;”>
<div class=”col-lg-6 col-md-12 col-xs-12 col-sm-12″>
<p class=”mod-reset” style=”border-width: 0px; border-style: none;”></p></div>
<div class=”col-lg-6 col-md-12 col-sm-12 col-xs-12″></div>
</div>
</div>
</div>
<div class=”boldgrid-section” style=”border-width: 0px; border-style: none;”>
<div class=”container”>
<div class=”row” style=”padding-bottom: 0px;”>
<div class=”col-md-5 col-sm-4 col-xs-12 col-lg-6″>
<p class=”mod-reset” style=”border-width: 0px; border-style: none;”></p></div>
<div class=”col-md-6 col-sm-7 col-xs-12 col-lg-6 align-column-center”>
<h2 class=”” style=”margin-top: 0px; margin-bottom: 20px; text-align: center;”>Digital Completions
in the palm of your hand</h2>
<p class=””>At NTP Consulting, we believe the spirit under which your company was formed is a vital part of its future growth. We won’t tell you to change your corporate culture or anything else that makes your business an amazingly unique enterprise.</p>
<p class=””>Because we have so many brilliant consultants in a wide variety of industries, we’ve been able to pick the very best advice for re-inventing your business into a dynamic, thriving enterprise where people are lining up to get in and share the experience.</p>
<p class=”” style=”text-align: center; border-width: 0px; padding-top: 3em;”>See the app in action</p></div>
</div>
</div>
</div>
<div class=”boldgrid-section color3-background-color color-3-text-contrast bg-background-color” style=”border-width: 0px;”>
<div class=”container”>
<div class=”row” style=”padding-top: 0px; padding-bottom: 0px;”>
<div class=”col-lg-6 col-md-12 col-xs-12 col-sm-12″ style=”border-width: 0px;”>
<p class=”mod-reset hidden-xs hidden-sm” style=”border-width: 0px;”></p></div>
<div class=”col-lg-6 col-md-12 col-sm-12 col-xs-12″></div>
</div>
</div>
</div>
<div class=”boldgrid-section color3-background-color color-3-text-contrast bg-background-color” style=”border-width: 0px;”>
<div class=”container”>
<div class=”row” style=”padding-top: 0px; padding-bottom: 61px; border-width: 0px;”>
<div class=”col-md-7 col-sm-4 col-xs-12 col-lg-12″ style=”border-width: 0px;”>
<h2 class=”color1-color” style=”margin-top: 0px; margin-bottom: 20px; text-align: center; border-width: 0px;”> Recent News</h2>
<div class=”boldgrid-shortcode” data-imhwpb-draggable=”true” style=”border-width: 0px; background-color: rgba(255, 255, 255, 0.01);”>[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%5Bthumbnail%5D%22%3A1%2C%22widget-boldgrid_component_postlist%5B%5D%5Bauthor%5D%22%3A0%7D"]
</div>
</div>
</div>
<div class=”row”>
<div class=”col-lg-12 col-md-12 col-sm-12 col-xs-12″></div>
</div>
</div>
</div>
<div class=”boldgrid-section color2-background-color color-2-text-contrast bg-background-color” style=”border-width: 0px;”>
<div class=”container”>
<div class=”row” style=”padding-top: 75px; padding-bottom: 75px; border-width: 0px;”>
<div class=”col-lg-6 col-md-12 col-sm-12 col-xs-12″>
<h4 class=””>Here’s What Our Users are Saying</h4>
<p class=””> </p><div class=”row bg-background-color color-2-text-contrast color2-background-color current-edit-as-row” style=”padding: 1em; color: #1d1d1d; border-width: 0px;”>
<div class=”col-md-2 col-sm-3 col-xs-3 col-lg-2″>
<div><i class=”fa fa-quote-left bg-background-color color-5-text-contrast color5-background-color color1-color” style=”padding: 0.6em; font-size: 25px; border-width: 0px;” aria-hidden=”true”><span style=”display: none;”> </span></i></div>
</div>
<div class=”col-md-10 col-sm-9 col-xs-9 col-lg-10″>
<div>
<p class=””><span style=”font-size: 18pt;”>“RFO Central is very intuitive and user friendly. </span><span style=”font-size: 18pt;”>It is one of the best completions programs I have ever used.”</span></p>
<p class=”h4 color2-color” style=”text-align: right;”><span style=”color: #ffffff;”><span style=”font-size: 14pt;”>Reed Maxson
</span><span style=”font-size: 14pt;”>Commissioning Manager
</span><span style=”font-size: 14pt;”>NAR Refining</span></span></p></div>
</div>
</div>
</div>
<div class=”col-lg-6 col-md-12 col-xs-12 col-sm-12″ style=”border-width: 0px;”>
<div class=”boldgrid-shortcode” data-imhwpb-draggable=”true” style=”border-width: 0px;”>[boldgrid_component type="wp_weforms_widget" opts="%7B%22widget-weforms_widget%5B%5D%5Btitle%5D%22%3A%22Request%20a%20Demo%22%2C%22widget-weforms_widget%5B%5D%5Bform_id%5D%22%3A%22250%22%7D"]
</div>
</div>
</div>
</div>
</div>November 28, 2022 at 3:38 am #70896Brandon CKeymasterThanks Nancy!
We’ll review your code and get right back to you!
November 28, 2022 at 4:24 pm #71024Brandon CKeymasterThanks for your patience Nancy!
We’re still working with our developers to get the controls added that would allow you to easily implement your background colors but we did manage to come up with some custom CSS that should allow you to select the Post List Component articles and add a background color.
Try adding this snippet to the CSS/JS editor of your WordPress customizer:
.palette-primary .boldgrid-shortcode .bgc-single-article {
background: #000000;
}This will change the background color of your Post List articles to black. Let us know if you need help finding a specific color.
I hope this helps Nancy. Please let us know if there’s anything else that we can answer for you.
November 28, 2022 at 4:48 pm #71025NancyGuestThat worked beautifully! Thank you!
November 28, 2022 at 4:49 pm #71030Brandon CKeymasterThat’s awesome to hear Nancy! So happy we could help out!
- AuthorPosts
- The topic ‘How do I change the background color of individual Post in Post list Component Block?’ is closed to new replies.