-
Posts
-
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
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!
thank you guys, fantastic support!
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. :)
Howdy @minolim!
Just checking in; are you all set?
Cheers,
Caroline
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
The topic ‘Change Post Format Icons next to post’ is closed to new replies.
Theme Support 
