How to change icon that appears next to post titles? The circle design?

Home Forums Automattic Little Story How to change icon that appears next to post titles? The circle design?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #164819 Resolve

    Amy

    My site is aforestlife.com. I am interested in changing the header to something other than the default one that comes with the theme. Therefore, I would like to remove some of the symbols that appear throughout the theme that match this default header. In particular, can you give me the CSS code to change the icon that appears next to blog post titles to a different image? I’m also interested in being able to remove the house and tree images that appear on the footer of the page.

    The blog I need help with is aforestlife.com
    #164821

    C. Kitahara

    Hi there!

    > In particular, can you give me the CSS code to change the icon that appears next to blog post titles to a different image?

    Sure. Please copy and paste the code below in the Costumizer > Additional CSS panel after other code already in there:

    
    /*--- Change blog post title icon / forums ck ---*/
    .entry-header .entry-meta {
        background: url(IMAGEURL) no-repeat;
        background-position: center;
    }
    

    > I’m also interested in being able to remove the house and tree images that appear on the footer of the page.

    It seems you were able to remove that image on your own. Let me know if you still need help with this, please.

    Also just a heads-up that since your site has a Premium plan, you’re entitled to live-chat and email support, accessible here:

    https://wordpress.com/help/contact

    You’re welcome to still post in these forums, but those other support avenues may be faster, and you’ll always get a staff reply.

    • This reply was modified 1 year, 10 months ago by  C. Kitahara.
    #164829

    Amy

    Thank you very much for the help! That code worked. :) The footer image is still there (best example of it can be seen on mobile because the desktop version will keep adding posts as you scroll). But I don’t find it that intrusive, so it was just a little thing. Might be cool to replace it with something that fits my customizations to the theme better, but I think it’s fine.

    #164837

    David

    Hi Amy,

    You can use this CSS to change the footer image:

    
    /*set footer background image on hi-res devices | forum DC */
    @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio:3/2), only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
        .site-info::before {
            background-image: url(/wp-content/themes/premium/little-story/images/sprite-2x.png);
            background-size: 224px auto;
        }
    }
    
    /*set footer background image | forum DC */
    .site-info::before {
        background: url(/wp-content/themes/premium/little-story/images/sprite.png) no-repeat;
        background-position: top center;
    }

    You’d just change the parts in parenthesis after background: to your own image URL from your site’s media library. I’d recommend that you put the same image in both sections to start with and see how that looks.

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

You must be logged in to reply to this topic.