261 Following

Murder by Death

I read cozy and historical mysteries, a bit of Paranormal/UF, and to mix it up, I read science and gardening books on occasion.

Customized blog pages: Changing the colors of the tiny like/comment/reblog icons at the bottom of your blog posts.

Disclaimer: This one is not easy - well there's an easy way and there's a hard way.  I don't recommend the hard way unless you really want these icons changed.


If you use a custom background that's dark, those tiny icons at the bottom of each post indicating how many likes, comments and reblogs a post has are likely invisible.  Here's how to make them visible. 


Heads up: this is gonna be a LONG post.  I'm taking a shortcut here and there by tagging previous posts, but it's still an involved process.


The Easy Way:


This is going to put a semi-transparent box behind the reblog / comments / likes icons that runs the width of the post, but is separate.  It's arguably not the most attractive option but it is the option that is the easiest.


1. Go to Settings / Blog / Customise / Edit HTML.


2. Using the instructions for  Customized blog pages: how to create a background for comments and how to change the font color of side links - follow steps #1 and #2.  


Note: If you've done that tutorial before and want this background to be different, follow those directions, but change the name of the style you're creating from .commentsbg to .tinyicons or whatever you'd like.  It's just the same general steps.


3.  Now search for the section of the HTML that looks like this:



Don't count on your line numbers being the same as mine, but they should be in the same ballpark.  The string/tag that is in line 301 above - put that exact same line in your HTML, just below where it says div class = "post-info".


Note:  If you've used a different name for your style in Step 2, make sure you use that name instead of "commentsbg".


When you type that div tag in, the system is going to automagically create an end tag right next to it.  Either delete that end tag or cut it - you need to move it down to where I have mine, after that last % endif %.  In the screenshot, it's at line 314; yours may vary.



4.  Click the Save button.


Tiny icons visible.



The Hard Way


This involves editing or re-creating those tiny icons.  They're transparent, which makes editing their color, frankly, something of a pain in the ass (one word: anti-aliasing).  I'm not going to get into how to do that here; I'm just going to take it as read that if you've come this far and want to keep going you either already know how to do it or are willing to figure it out.  This is, in fact, the whole reason why this is The Hard Way.


1.  Once you've re-created or edited the tiny icons to your satisfaction, create a new post* in BookLikes - trust me on this.  Make it a text post; call it whatever you want, doesn't matter.  (I titled mine "Blog image stuff" so I could find it.)  In the body of the post, upload your new image.


*(or, if you've already done this because you've used the Customized blog pages: Changing the Follower/Following 'buttons' at the top of the page. you can just edit that post and stick the images in there.)


2. Tick the back to edit after saving changes box, then click "Save as Draft" (alternatively, you can save it with a really old post date so people don't see random weird posts from you in their newsfeed).  


3.  After the post saves and reloads the edit post page, click "Preview".  This will show you the post in a new tab. 


4. From that preview, right click on one of your new icon images (the reblog one would be the best to start with, since it comes first in Step 5) and either:

A. Choose Copy Image Address, or

B. Choose Open Image in New Tab, then click on that tab and copy the URL in the address box.


5. From the Dashboard menu: Settings/Blog/Customise/Edit HTML.  Once you're in the Edit HTML split-window, look for the section of code that starts like this:


6. In line 302 on the screenshot, you need to replace the part of img class="set-middle" that starts with {{ blog.templateURL.  Highlight everything in that line between the quotes (").  Start with {{ and highlight through .png. Once it's highlighted, paste in that URL you copied in step 4.


You need to repeat Step 4 and Step 6 two more times:

Once for the likes icon: copy the URL for your likes icon then paste it in the img tag that comes directly after {% if post.likeCount %} - making sure to paste it in carefully between the quotes like you did the first time.


Finally for the comments icon: copy the URL for your comments icon then paste it in the img tag that comes directly after

{% if post.commentCount and blog.commentsBooklikes %} - making sure to paste it in carefully between the quotes like you did the first time.


This is what mine looked like when I was done (Note: I did not change my reblog icon because it's a pain and nobody reblogs my posts anyway.)




7. Click Save


You can view your blog page and check out how those new/edited icons look, but below are the instructions for changing the color of the little numbers next to them.


Changing the tiny numbers' color

This is done in the Custom CSS box under Dashboard/Settings/Blog/Customise, at the bottom of the left side of the Customise Theme area.


1.  In the Custom CSS input box, scroll to the bottom of any text that might be there, add a blank line or two, and paste the following:


div.post-info {
padding-top: 20px;
font-size: 10px;
font-family: "Helvetica Neue", Arial, Tahoma, Verdana, sans-serif;
font-weight: bold;
color: #FFFFFF;


If you leave that as-is, your text will be white.  If you want another color, change the hex code (FFFFFF) on this line:


color: #FFFFFF;


to the hex code that represents the color you want. See HTML Color Picker - W3Schools for a list of hex codes/colors.  Make sure the ; (semi-colon) stays at the end of the line.


Click Save and now you can see your reblogs, likes and comments.


Party on.