Hey, I’m looking for some advice regarding post customization.
I have a website and I want to instert different colorful div sections to some of my wordpress posts.
The idea is similar to brian dean’s blog where he uses some really amazing div section in his posts. (Check out the brian dean’s post: https://backlinko.com/mobile-seo-guide)…
In this post I saw different-different div section that makes that content more attractive… I also want to do s the same
Please help me…
Hi there shaileshshakya818,
if you provide a link to your site and indicate the sections and
the background colour which is to be applied to each, then
members may be able to assist you further with your project. 
coothead
Hey, thanks for your reply… @coothead
My website is: http://mechaplanet.org
I want to add some sort of CSS/HTML to make colourful div sections to all individual posts of my blog.
see the example from Backlinko
Please take a look at above screenshot. A green colour div section is available within the post. I want the same.
please anyone can guess…
Please add the following CSS to the bottom of your custom stylesheet (which should also be the last stylesheet in the cascade) and see if this is the general idea. I’ve listed 5 colors that will repeat in the same order down the list of articles. You will probably want to modify the padding inside the boxes so the edges of the three column section are more appealing but that’s a different issue that you may be able to handle by yourself.
#primary article:nth-child(5n+1) {
background-color:#fcc;
}
#primary article:nth-child(5n+2) {
background-color:#cfc;
}
#primary article:nth-child(5n+3) {
background-color:#ccf;
}
#primary article:nth-child(5n+4) {
background-color:#ffc;
}
#primary article:nth-child(5n+5) {
background-color:#cff;
}
hey, thanks for your reply…
I have tried your code. It is good…
But the effect is anywhere… I mean I don’t want the div for entire post. I want to add wherever I want to add it.
You can understand it with an example of button. For example, I have added some code for button and whenever I call the button class from WordPress post edit area.
By the way thanks for your efforts…
No, it’s only colors the articles, it does not touch the "aside"s.
This is an outline of your current HTML showing the “open” tags.
<!DOCTYPE html>
<html class="no-js" prefix="og: http://ogp.me/ns#" lang="en-US">
<head>
<body class="home blog has-sidebar-right half-posts">
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<div id="content" class="site-content">
<div class="top-section"> </div>
<div class="container main-content-area">
<div class="row">
<div class="main-content-inner col-sm-12 col-md-8 ">
<div id="primary" class="content-area">
<main id="main" class="site-main page-1" role="main">
<div class="article-container">
<article id="post-3834" class="post-3834 post type-post status-publish format-standard has-post-thumbnail hentry category-wordpress tag-wordpress">
<article id="post-3822" class="post-3822 post type-post status-publish format-standard has-post-thumbnail hentry category-google-adsense tag-adsense tag-gdpr">
<article id="post-3793" class="post-3793 post type-post status-publish format-standard has-post-thumbnail hentry category-google-adsense tag-adsense tag-adsense-auto-ads tag-google-adsense">
<article id="post-3777" class="post-3777 post type-post status-publish format-standard has-post-thumbnail hentry category-wordpress tag-gdpr-compliance tag-wordpress">
<article id="post-3734" class="post-3734 post type-post status-publish format-standard has-post-thumbnail hentry category-search-engine-optimization tag-google-algorithms tag-google-updates tag-seo">
<article id="post-3704" class="post-3704 post type-post status-publish format-standard has-post-thumbnail hentry category-technology tag-free-money tag-game-apps-to-win-real-money tag-money-making-apps">
<article id="post-3675" class="post-3675 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized category-wordpress tag-live-chat tag-live-chat-software tag-live-chat-support tag-wp-live-chat-plugins">
<article id="post-3629" class="post-3629 post type-post status-publish format-standard has-post-thumbnail hentry category-search-engine-optimization tag-domain-authority tag-seo">
<article id="post-3580" class="post-3580 post type-post status-publish format-standard has-post-thumbnail hentry category-wordpress tag-free-wordpress-themes tag-themes tag-wp-themes">
<article id="post-3553" class="post-3553 post type-post status-publish format-standard has-post-thumbnail hentry category-technology tag-android-apps tag-video-downloader tag-youtube-video-downloader-apps">
With the outline you can see where the articles and asides reside.
If you want to apply a background-color to one or more specific articles, all you have to do is target (address) the particular article(s). Because these articles do not have background-colors assigned, adding a background color to any of them is a matter of addressing the specific article. Because an ID can only appear once on a page, and the articles are already assigned IDs, find the ID of the article that you want to color and add the background to the ID. For example, the first article could be addressed from your custom CSS by ID like this:
#post-3834 {
background-color:#fcf;
}
OR by className like this: /* conveniently the className is the same as the ID in this case */
.post-3834 {
background-color:#fcf;
}
You should learn how to read and write enough HTML and CSS to understand how your site functions and how to make minor stylish changes.
If these examples do not mean anything to you… if you do not know how to use these examples to modify the look of your site, please be very specific about whatever changes you wish to see. I am not psychic.
Hey, I appreciate your efforts. Thanks for guiding me… I will try to adopt your suggestions.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.