PurpleMoggy's Blog
Loading...Change Email Post Link Image
If you're like me then you can't stand the default blogger email post link picture --> 
I'm sure it looks fine on a white (or otherwise light) background, but on a dark template it looks horrible! I've always been a little surprised that blogger doesn't give you a couple color options like they do with the navbar.
This image is actually being displayed as a background image using css. The style rule is located in an external stylesheet located at:
http://beta.blogger.com/css/blog_controls.css
Looking inside you'll notice the relevant css class:
.email-post-icon {
background: url("/img/icon18_email.gif") no-repeat left;
/* makes an 18x18 box */
padding:9px;
margin:0 0 0 .5em;
}Now you can copy that and paste it into Template -> Edit HTML -> header css. You're gonna want to change the class name. I just added a '2' to make it '.email-post-icon2'
(The reason you need to change the class name is because the external stylesheet is loaded into your page after the css section in your template, and your changes wouldn't be respected otherwise)
Now you can change the background image, which will give you a css addition something like:
.email-post-icon2 {
background: url("http://path_to_image_file.gif") no-repeat left;
/* makes an 18x18 box */
padding:9px;
margin:0 0 0 .5em;
}Finally, go into Template -> Edit HTML and check the checkbox for 'Expand Widget Templates', and find:
<span class='email-post-icon'> </span>
and change it to:
<span class='email-post-icon2'> </span>
That's it :)
6 comments:
Was that meant to be an insider explanation? I need very concise, step-by-step instructions, please. The way it is written is as if your audience new something about Blogger, or code, or editing HTML/CSS? I don't know how to very well, but I know the lingo. Can you please explain the steps one-by-one to me? I want to make my blog also show the black/Minima dark background for the EMAIL THIS POST icon. Thanks.James or james.ashburn@gmail.com
Better yet, create a CLICK HERE TO ADD WIDGET button.?? :) hahah
Ok... here's how to add a dark email image (the black with white outlined one that I used to have here)
Go to Template -> Edit HTML and click the 'Expand Widget Templates' checkbox
Now add the following bit of css (located towards the top of your template code, you'll see a bunch of other code that looks similar):
.email-post-icon2 {
background: url("http://img142.imageshack.us/img142/473/icon18emailew7.gif") no-repeat left;
/* makes an 18x18 box */
padding:9px;
margin:0 0 0 .5em;
}
Now you'll need to search thru your template code and find:
<span class='email-post-icon'> </span>
It should only show up once.
Replace that with:
<span class='email-post-icon2'> </span>
Thank you, purplemoggy! It worked. I probably could have figured that out, but I got confused. I am grateful for what you and others do to help us less-technologically inclined.
thanks for that little hack.. i will try it out for my own blog.
Thank you very much for this information.
For some reason, the default blog_controls.css file no longer has any data for email-post-icon, causing those links to become blank spaces.
I was able to use the information on your page (including the URL for icon18_email.gif) to add the missing CSS code to my blog's template, restoring the missing image.
Post a Comment