Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1049699

    Hi,

    I’m using the Blog Post content element in a colour section (CSS: homepage-post-block) to display a 3×2 grid of Post images, dates and titles and am trying to change the background colours of each block (av_one_third) so that they are different colours using nth child selector.

    I am using the following CSS:

    .homepage-post-block .av_one_third:nth-child(1) {background: #C9D1AD;}
    .homepage-post-block .av_one_third:nth-child(2) {background: #99B0B0;}
    .homepage-post-block .av_one_third:nth-child(3) {background: #99CFCC;}
    .homepage-post-block .av_one_third:nth-child(4) {background: #000;}
    .homepage-post-block .av_one_third:nth-child(5) {background: #C2D966;}
    .homepage-post-block .av_one_third:nth-child(6) {background: #C9D1AD;}

    And the 4th av_one_third div (first on a new line as its a 3x grid on the website) is always the same colour as the first av_one_third.

    I’ve been all over the code and as far as I can tell, the 4th av_one_third is still within the original homepage-post-block div so should be the 4th child but it just won’t accept the 4th child colour.

    I’ve uploaded an example with inline CSS to:

    http://tweeddale.digitalessence.net/enfold.html

    Thanks,

    #1049870

    Hey DigitalEssence,

    Is the problem on the page you linked to? If not then could you link to it so that we can have a closer look please?

    Best regards,
    Rikard

    #1049941

    Hi,

    yes that link is an example where there are 4 .av_one_third blocks and the 4th is the same colour as the first despite me adding:

    <style>
    .homepage-post-block .av_one_third img {width: 300px; }
    .homepage-post-block .av_one_third {width: 300px; float: left; margin:10px;}
    .homepage-post-block .av_one_third:nth-child(1) {background: #C9D1AD;}
    .homepage-post-block .av_one_third:nth-child(2) {background: #99B0B0;}
    .homepage-post-block .av_one_third:nth-child(3) {background: #99CFCC;}
    .homepage-post-block .av_one_third:nth-child(4) {background: #000;}
    .homepage-post-block .av_one_third:nth-child(5) {background: #C2D966;}
    .homepage-post-block .av_one_third:nth-child(6) {background: #C9D1AD;}
    </style>

    The original full page is at: http://tweeddale.digitalessence.net/

    Thanks.

    #1050225

    Hi,

    Ok, I think that is correct actually since 1/3 elements only have 3 children. So it would start over again once it’s a new row. Maybe you could try using the .first class instead?

    Best regards,
    Rikard

    #1050592

    Hi Rikard,

    I was sure that all of these 1/3 elements were all children of the parent div but obviously not.

    I’ve managed to implement it by using the slide-loop-{$post_loop_count} on line 443 of \enfold\config-templatebuilder\avia-shortcodes\postslider\postslider.php as this is the post count number.

    this was I can target each specific 1/3 as required:

    eg:

    .homepage-post-block .slide-loop-1 {outline:1px solid blue;}
    .homepage-post-block .slide-loop-4 {outline:1px solid red;}

    Thanks for your help and hopefully if anyone else is looking to do this, this code will help them.

    #1050638

    Hi,
    Thanks for sharing your solution, unless there is anything else we can help with on this issue, shall we close this then?

    Best regards,
    Mike

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.