Change Post Format Icons next to post

Home Forums Automattic Elemin Change Post Format Icons next to post

Tagged: , , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #107777 Resolve

    M

    Hey there,

    I want to change the Post Format Icons next to the post.

    ( http://s2.wp.com/wp-content/themes/premium/elemin/images/post-format-icons.png )

    Any idea on how to do it?

    The blog I need help with is cherchemidi.co
    #137900

    Michelle

    Howdy!

    You can change the icons using CSS. :) The easiest way would be to follow these steps:

    1. In your favorite image editor, create a new icon for each post format. You can either create the images as a single sprite (like the original one you linked in your post), or you can create them separately. For best results, the individual icons should be 27px high and 30px wide.

    2. After you have created your icons (or single sprite with multiple icons), upload the image(s) to your Media Library. Note the URL of the image(s).

    3. It’s time to add the CSS.

    If you created a single sprite, add the following.

    You may need to adjust the background position for each post format so that you get the right position on the sprite with the right format. If you need help with this step, let me know.

    .post-format-icon a {
    background: url(http://path/to/your/sprite/) no-repeat right;
    width: 30px;
    height: 27px;
    }
    .format-standard .post-format-icon a {
    background-position: -97px 0;
    }
    .format-quote .post-format-icon a {
    background-position: 0 0;
    }
    .format-image .post-format-icon a,
    .image-attachment .post-format-icon a {
    background-position: -48px 0;
    }
    .format-link .post-format-icon a {
    background-position: -141px 0;
    }
    .format-gallery .post-format-icon a {
    background-position: -187px 0;
    }
    .format-chat .post-format-icon a {
    background-position: -233px 0;
    }
    .format-audio .post-format-icon a {
    background-position: -280px 0;
    }
    .format-aside .post-format-icon a {
    background-position: -324px 0;
    }
    .format-video .post-format-icon a {
    background-position: -370px 0;
    }
    .format-status .post-format-icon a {
    background-position: -420px 0;
    width: 27px;
    }

    If you have created separate icon images for each post format, use this CSS:

    .post-format-icon a {
    background: none;
    }
    .format-standard .post-format-icon a {
    background: url(http://path/to/your/standard/icon);
    background-position: 0 0;
    }
    .format-quote .post-format-icon a {
    background: url(http://path/to/your/quote/icon);
    background-position: 0 0;
    }
    .format-image .post-format-icon a,
    .image-attachment .post-format-icon a {
    background: url(http://path/to/your/image/icon);
    background-position: 0 0;
    }
    .format-link .post-format-icon a {
    background: url(http://path/to/your/link/icon);
    background-position: 0 0;
    }
    .format-gallery .post-format-icon a {
    background: url(http://path/to/your/gallery/icon);
    background-position: 0 0;
    }
    .format-chat .post-format-icon a {
    background: url(http://path/to/your/chat/icon);
    background-position: 0 0;
    }
    .format-audio .post-format-icon a {
    background: url(http://path/to/your/audio/icon);
    background-position: 0 0;
    }
    .format-aside .post-format-icon a {
    background: url(http://path/to/your/aside/icon);
    background-position: 0 0;
    }
    .format-video .post-format-icon a {
    background: url(http://path/to/your/video/icon);
    background-position: 0 0;
    }
    .format-status .post-format-icon a {
    background: url(http://path/to/your/status/icon);
    background-position: 0 0;
    }

    Let me know if you have any questions or run into any trouble along the way!

    #138144

    M

    thank you guys, fantastic support!

    #138162

    Michelle

    Hi there!

    You’re very welcome. :) I’ll check back in a few days to see if you have any questions about the process, before marking it as resolved. :)

    #138543

    Caroline Moore

    Howdy @minolim!

    Just checking in; are you all set?

    Cheers,

    Caroline

    #139393

    Michelle

    Hi there,

    I’m going to go ahead and close this topic. If you have any other questions, feel free to start a new one.

    Cheers,

    Michelle

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

The topic ‘Change Post Format Icons next to post’ is closed to new replies.