Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • December 15, 2015 at 3:29 pm #553071
    Rosenqvist10

    Hey!

    I would like to individually style the background colours of the ‘image title and caption’ sections within a three-columned masonry element.

    Is there a way to add a CSS identifier to the backgrounds of each of the three captions or alternatively to have the masonry style caption and overlay work on a single image which I can then split into three columns?

    Thanks in advance for your help!

    Kind Regards,

    Chris

    December 16, 2015 at 2:04 am #553390
    Elliott

    Hi Rosenqvist10!

    It’s hard to understand. Send us a link to your page and take a screenshot highlighting the exact changes your trying to do.

    Best regards,
    Elliott

    December 16, 2015 at 10:25 am #553537
    Rosenqvist10

    Hey,

    Okay here’s a picture that might help.

    I want to make three elements different colours. Do you know how I could identify them individually (on a single page and not site wide) else create the same effect with three individual elements? I tried to find the caption overlay effect in other elements such as single image etc but couldn’t find a single element option that included this effect.

    Thanks for the help!

    Kind Regards,

    Chris

    December 17, 2015 at 4:33 am #554162
    Elliott

    Hi!

    Well for that you would need to use CSS. It’s the Masonry element correct? Send us a link to your page where your using that and we’ll see if we can give you some CSS to use.

    Cheers!
    Elliott

    December 17, 2015 at 4:41 am #554164
    Ismael

    Hi!

    Edit the masonry element, add a unique id in the Section ID field (ex: custom-masonry). Use the nth-child selector in the Quick CSS field:

    #custom-masonry .av-masonry-container .av-masonry-entry:nth-child(2) .av-inner-masonry-content.site-background {
    background: red;
}

#custom-masonry .av-masonry-container .av-masonry-entry:nth-child(3) .av-inner-masonry-content.site-background {
    background: blue;
}

#custom-masonry .av-masonry-container .av-masonry-entry:nth-child(4) .av-inner-masonry-content.site-background {
    background: green;
}

    Regards,
    Ismael

    December 18, 2015 at 9:47 am #554876
    Rosenqvist10

    Hi guys,

    Thank you for the attempt, didn’t work though. I’ve basically copied the html mark-up and wrote it in as a code element with class identifiers. The only problem is that if I look at the code again, the opening of the code box to look at it modifies the code itself. But it appears to be working when I write everything correct the first time and never look at it again. Is there a way to turn off automatically removing <br /> etc? It can be a bit annoying how it automatically “helps” me with everything.

    Apart from that, thanks for you help!

    Kind Regards,

    Chris

    December 20, 2015 at 2:41 am #555468
    Elliott

    Hey!

    So the only problem now is that there are br tags being inserted? Are you sure you have it inside a codeblock element? Send us a WordPress login and we’ll take a look.

    Cheers!
    Elliott

    December 21, 2015 at 9:42 am #555820
    Rosenqvist10

    Hey Elliot,

    No it’s fine. I was just commenting on the fact that custom html in code and text elements break when opened with the front-end editor. Perhaps this is the front-end editor attempting to help and fix the code, have had similar problems with Joomla before removing p and br tags.

    The problem relating to this thread has been temporarily fixed, I will perhaps look for a more secure fix when the site is online but currently working locally.

    Thanks again for the help.

    Kind regards,

    Chris

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Single Masonry Item’ is closed to new replies.