Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • July 31, 2020 at 5:16 pm #1234396
    KateStuartDesign

    Hi. I have been trying to style the masonry captions title and every bit of code I have found has not worked sadly. I have put the web page in the Private Content. When you hover over an image the title caption pops up at the bottom. I would like the background to be black, the text to be white and smaller, the padding to be a specific px , and I would like to remove that little green diamond in the middle. If you point me to the correct code I can then experiment with sizes etc. Thank you so much. I have been tearing my hair out!

    August 3, 2020 at 8:25 am #1234743
    Rikard

    Hey Kate,

    Please try the following in Quick CSS under Enfold->General Styling:

    .av-inner-masonry-content-pos-content .avia-arrow {
  display: none;
}

.av-masonry-container .portfolio .av-inner-masonry-content {
  background: #000 !important;
}

.av-masonry-entry-title .entry-title {
  color: #fff;
}

    Best regards,
    Rikard

    August 3, 2020 at 10:33 am #1234769
    KateStuartDesign

    Thank you that has solved half the issues. This has changed the background colour and removed the arrow but the the font is still not working. Its not changed size and its the wrong colour. Please can you let me know what more I need to do. Thanks

    August 3, 2020 at 10:39 am #1234771
    KateStuartDesign

    Ps: please may I also have the code to address the padding in this area.

    August 5, 2020 at 3:33 am #1235262
    Rikard

    Hi,

    Please try this instead:

    .av-inner-masonry-content-pos-content .avia-arrow {
  display: none;
}

.av-masonry-container .portfolio .av-inner-masonry-content {
  background: #000 !important;
}

.av-masonry-entry-title.entry-title {
  color: #fff !important;
}

figcaption.av-inner-masonry-content {
  padding: 40px;
}

    Best regards,
    Rikard

    August 6, 2020 at 10:26 am #1235642
    KateStuartDesign

    Thanks Rikard. I added that code and added a field to change the font size but neither the padding or the font size update. The rest have changed (font colour and background colour). This is the code I used:

    /*masonry titles:*/
    .av-inner-masonry-content-pos-content .avia-arrow {display: none; }
    .av-masonry-container .portfolio .av-inner-masonry-content { background: #000000 !important; }
    .av-masonry-entry-title.entry-title { font-size: 10px !important; color: #fff !important; }
    .figcaption.av-inner-masonry-content { padding: 30px !important; }

    This is in the style.css file. Please can you help….

    August 6, 2020 at 12:05 pm #1235664
    Guenni007

    these selectors are correct – but even if you set the rules to !important – there might be another rule concerning to these elements with a higher specifity.
    You can see here a specifity calculator that gives you a feeling which selector wins the run! ;) Link
    ID’s got a higher weight on specifity than classes than pseudo-classes – so maybe you try:

    #top .av-masonry-entry-title.entry-title { 
font-size: 10px !important; 
color: #fff !important; 
}
#top .figcaption.av-inner-masonry-content { 
padding: 30px !important; 
}

    better advice only possible if i can see the real site

    August 7, 2020 at 10:06 am #1235962
    KateStuartDesign

    I am afraid I cant share the site publican yet so this will need to be addressed by a moderator who can see the private info. And thank you for your advice but sadly it did not work. Thanks

    August 11, 2020 at 5:55 am #1236574
    Ismael

    Hi,

    Thank you for the update.

    The Enfold > Performance > File Compression settings are currently enabled, so you may need to disable it temporarily in order to see the changes.

    To adjust the font style of the masonry title, try to use this css code.

    #top #wrap_all .av-masonry-entry-title.entry-title {
    font-size: 10px;
    color: #fff !important;
}

    Please make sure to remove all cache from browser or plugins before testing the page.

    Best regards,
    Ismael

    August 11, 2020 at 9:29 am #1236627
    KateStuartDesign

    Super – thanks – that worked.

    August 12, 2020 at 12:25 am #1236771
    Jordan Shannon

    Hi,

    Did you need additional help with this topic or shall we close?

    Best regards,
    Jordan Shannon

    August 12, 2020 at 10:36 am #1236923
    KateStuartDesign

    Hi. Thanks for your help. the padding is still not working however I am now going to see if its a cacheing issue – I think lets close this thread. Thanks.

    August 13, 2020 at 5:48 am #1237256
    Rikard

    Hi,

    Thanks for the update. We’ll keep this thread open in case 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.