Docs

[CyndeeAdkinsDesign]

Hi! Instead of an image background I want to use a different colored background for each post on the post grid layout. I gave the Normal Block a custom CSS and I wrote the CSS for changing it.
Example of code.
.vc_gitem-zone.custom_tdgclients_grid:nth-child(1){background-color:#a7948b;}
.vc_gitem-zone.custom_tdgclients_grid:nth-child(2){background-color:rgb(232, 73, 73);}
.vc_gitem-zone.custom_tdgclients_grid:nth-child(3){background-color:rgb(83, 71, 65);}
.vc_gitem-zone.custom_tdgclients_grid:nth-child(4){background-color:#e8d2af;}
.vc_gitem-zone.custom_tdgclients_grid:nth-child(5){background-color:rgb(131, 119, 113);}
.vc_gitem-zone.custom_tdgclients_grid:nth-child(6){background-color:rgb(216, 184, 133);}
.vc_gitem-zone.custom_tdgclients_grid:nth-child(7){background-color:rgb(201, 93, 93);}
.vc_gitem-zone.custom_tdgclients_grid:nth-child(8){background-color:#e8d2af;}

But it seems to only want to still show the first nth-child background color. What am I missing??

[Friech]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Cheers!

[CyndeeAdkinsDesign]

Sure!
Sorry for that!

http://tdgclients.com/

[Thai]

Hi There,

Please try with this CSS instead:

#x-content-band-4 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(1) .custom_tdgclients_grid {
    background-color: #a7948b;
}
#x-content-band-4 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(2) .custom_tdgclients_grid {
    background-color: rgb(232, 73, 73);
}
#x-content-band-4 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(3) .custom_tdgclients_grid {
    background-color: rgb(83, 71, 65);
}
#x-content-band-4 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(4) .custom_tdgclients_grid {
    background-color: #e8d2af;
}

#x-content-band-5 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(1) .custom_tdgclients_grid {
    background-color: rgb(131, 119, 113);
}
#x-content-band-5 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(2) .custom_tdgclients_grid {
    background-color: rgb(216, 184, 133);
}
#x-content-band-5 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(3) .custom_tdgclients_grid {
    background-color: rgb(201, 93, 93);
}
#x-content-band-5 .vc_grid .vc_pageable-slide-wrapper .vc_grid-item:nth-child(4) .custom_tdgclients_grid {
    background-color: #e8d2af;
}

Hope it helps 🙂

[CyndeeAdkinsDesign]

FANTASTIC!!! Thanks so VERY MUCH!!!!

[Nico]

Happy to hear that.

Feel free to asks us again.

Thanks.

[CyndeeAdkinsDesign]

Hello again!
For some reason this seems to have stopped working? Can you take a quick look?
I have tried to do a website restore (not the database) to a few days ago when it was working, and it’s still broken. I disabled all plugins, switched themes too…and it was the same way. Switched it back to the current theme, and reactivated all the plugins one by one to see if anything made a difference and it didn’t.

http://tdgclients.com/

[CyndeeAdkinsDesign]

This all started when I tried to add a custom field into the grid builder to pull the calendar Event date instead of the post date…

[Rad]

Hi there,

It’s because of the line breaks that you added. Line breaks will be converted to <p></p>, and because the CSS is based on element count, then the <p></p> will be counted as well. Hence, CSS selection is not gonna work as previous. Please remove line breaks from your content. The example is this,

[shortcode]

[shortcode]

it will become like this

[shortcode]
<p></p>
<p></p>
[shortcode]

You should add it like this,

[shortcode][shortcode]

Hope this helps.

[CyndeeAdkinsDesign]

This makes sense. But I am not adding the <p></p> purposefully. I haven’t added any line breaks either. The only thing like that, that was added, were the separators on the grid design. But they were there before and worked fine. I just removed these to see if this was the issue but it didn’t change anything. The Grid was added via the visual composer so not hard coded. Could the visual composer be having issues and adding them itself?? Or the grid builder be adding them, since it is when I edit it that it adds them? I backed up the database and tried it again. It happened again when I made a simple change to the grid builder design. How do I get those <p></p> out? I tried to edit in the old text style and didn’t see any to remove.

[Paul R]

Hi,

It’s being added automatically.

You can add this in your child theme’s functions.php file to disable it.

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

Hope that helps.

[CyndeeAdkinsDesign]

Hello.
I added this to the functions.php file. Thank you for the suggestion. It seems to not have made a difference though.
I removed both grid sections, and re-added them, then updated the page as well. They seem to both still be there.

[CyndeeAdkinsDesign]

Hi.
Update!
I found a post that suggested that the plugin “TinyMCE Advanced” likes to re-throw those back in. This totally makes sense, since it was recently added and definitely could be the trouble maker. I deactivated and re-created the grids, and now we’re back on track! Thanks for your time!!! Couldn’t have figured it out without you guys!

[Nabeel A]

Glad we could help.

Cheers!

[Author]

Posts