Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • August 28, 2018 at 7:51 pm #1002811
    kristenangel

    Hi there,

    I am attempting to use :nth-child() css on the Masonry element, but can’t seem to figure out what class to apply the style to.

    IE I have a masonry element showing six blog posts. Two blog posts have featured images with the default transparency black overlay, the rest have the default gray background. I would like to format these tiles to have different color backgrounds, so slot 1 would have a yellow background, slot 2 would be cyan, 3 would be green, etc. Here’s the code I tried: 

    .av-masonry-item-no-image .av-inner-masonry-content:nth-child(1) {
	background-color: #FFD035;
}
.av-masonry-item-no-image .av-inner-masonry-content:nth-child(2n+0) {
	background-color: #28AC50
}
.av-masonry-item-no-image .av-inner-masonry-content:nth-child(3n+0) {
	background-color: #28AC50
}
figcaption.av-inner-masonry-content.site-background:nth-child(4n+0) {
	background-color: #F26722
}
figcaption.av-inner-masonry-content.site-background:nth-child(5n+0) {
	background-color: #0177C1;
}
figcaption.av-inner-masonry-content.site-background:nth-child(6n+0) {
	background-color: #C1D32C
}

    I’ve tried several other class formats with :nth-child but no luck, including:
    #top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content:nth-child()
    #top .av-fixed-size .av-masonry-entry.av-masonry-item-no-image .av-inner-masonry-content:nth-child()
    figcaption.av-inner-masonry-content.site-background:nth-child()

    Can you help by sending the correct class structure to change the individual background colors?

    Thanks,
    Kristen

    August 30, 2018 at 12:31 pm #1003520
    Victoria

    Hey kristenangel,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    August 30, 2018 at 3:35 pm #1003682
    kristenangel

    Sure – link below.

    Currently I have the six squares on the homepage in yellow, and two are appearing in a light blue (these two images have background featured images – the css is writing the blue over the picture). The following code is making it appear this way: 

    .main_color .container .av-inner-masonry-content:nth-child(1) {
	background-color: #FFD035
}

.main_color .container .av-inner-masonry-content:nth-child(2n+0) {
	background-color: #95D4F4 !important
}
.main_color .container .av-inner-masonry-content:nth-child(3n+0) {
	background-color: #28AC50!important
}
.main_color .container .av-inner-masonry-content:nth-child(4n+0) {
	background-color: #F26722!important
}
.main_color .container .av-inner-masonry-content:nth-child(5n+0) {
	background-color: #0177C1!important;
	color: #fff;
}

    …which is NOT correct. I am looking to make each box a different color, whether it is an overlay on an image or jsut a background color, it should be the size different colors as listed above.

    • This reply was modified 6 years, 3 months ago by kristenangel.
    August 31, 2018 at 10:00 am #1003987
    Victoria

    Hi kristenangel,

    Can you please remove the code and we will try to come up with a solution, don’t want to be fighting the code you added with the !important;

    Best regards,
    Victoria

    September 4, 2018 at 4:38 am #1005257
    kristenangel

    Hi Victoria,
    Thanks for helping. I was on vacation over the weekend; back now! I’ve removed the code for you to begin testing.

    September 4, 2018 at 10:35 am #1005376
    Victoria

    Hi kristenangel,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#av-masonry-1-item-167 .av-inner-masonry-content {
	background-color: #FFD035;
}
#av-masonry-1-item-163 .av-inner-masonry-content {
	background-color: #95D4F4;
}
#av-masonry-1-item-172 .av-inner-masonry-content {
	background-color: #28AC50;
}
#av-masonry-1-item-177 .av-inner-masonry-content {
	background-color: #F26722;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    September 5, 2018 at 9:01 pm #1006316
    kristenangel

    Thanks Victoria—unfortunately this doesn’t work. When a new post gets added, the masonry item # changes. I need the tiles to always be the colors listed on that order, so the first tile will be yellow, second tile always cyan, etc. Is there a way to apply nth-child to this css to modify the background colors?

    September 6, 2018 at 12:45 pm #1006558
    Victoria

    Hi kristenangel,

    Ok, please remove the code I gave you and we’ll start over.

    Best regards,
    Victoria

    September 6, 2018 at 3:28 pm #1006649
    kristenangel

    ok – thanks, code is now removed.

    September 6, 2018 at 4:37 pm #1006716
    Victoria

    Hi kristenangel,

    I’ll ask my colleagues to have a look, I cannot seem to come up with the code.

    Best regards,
    Victoria

    September 6, 2018 at 5:32 pm #1006754
    Yigit

    Hi,

    Please try using following code

    .home .av-fixed-size .av-masonry-entry:nth-child(2) .av-inner-masonry-content {
    background-color: #FFD035;
}
.home .av-fixed-size .av-masonry-entry:nth-child(3) .av-inner-masonry-content {
    background-color: #28AC50;
}
.home .av-fixed-size .av-masonry-entry:nth-child(4) .av-inner-masonry-content {
    background-color: #28AC50;
}
.home .av-fixed-size .av-masonry-entry:nth-child(5) .av-inner-masonry-content {
    background-color: #F26722;
}
.home .av-fixed-size .av-masonry-entry:nth-child(6) .av-inner-masonry-content {
    background-color: #0177C1;
}
.home .av-fixed-size .av-masonry-entry:nth-child(7) .av-inner-masonry-content {
    background-color: #C1D32C;
}

    Best regards,
    Yigit

    September 6, 2018 at 7:31 pm #1006790
    kristenangel

    Thank You, Yigit! It worked. ;)

    September 7, 2018 at 5:53 am #1006897
    Rikard

    Hi,

    Great, glad you got it working :-)

    Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.