Tagged: , , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • July 19, 2016 at 3:17 pm #662535
    DigitalEssence

    Hi,

    I’d like to replace the blog post missing image pencil icon with another icon.

    I’m looking at this code to remove the icon and replace with an image but ideally I’d like to use icons and then be able to colour them based on first and last to look like: Screenshot of blog post icons

    The code to replace with an image is:

    span.fallback-post-type-icon:before {
    display: none;
}
span.fallback-post-type-icon {
    background: url(https://shaftesbury-remembers.goldhillmuseum.org.uk/wp-content/uploads/2016/07/poppy_3.png)!important;
    background-size: contain!important;
    background-repeat: no-repeat!important;
    background-position: 50% 50%!important;
}

    Is this possible?

    Thanks,

    Hedley

    July 19, 2016 at 4:45 pm #662624
    Andy

    Hey DigitalEssence,

    Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)

    Best regards,
    Andy

    July 19, 2016 at 4:55 pm #662631
    DigitalEssence

    Hi,

    The url is: http://cormack.digitalessence.net/

    Scroll down to latest news and you will see I’m using a blog grid with 3 posts. None of them have featured images so are picking up the pencil icon. I’m then using that css to replace it with an image but would prefer to use a different Fontello icon.

    July 23, 2016 at 4:24 am #664115
    Ismael

    Hi,

    Use the nth-child selector to apply different styles to the blog post items. Example:

    .slide-entry-wrap .slide-entry:nth-child(1) .fallback-post-type-icon {
    background: red;
}

.slide-entry-wrap .slide-entry:nth-child(2) .fallback-post-type-icon {
    background: blue;
}

.slide-entry-wrap .slide-entry:nth-child(3) .fallback-post-type-icon {
    background: green;
}

    Best regards,
    Ismael

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