14782 Followers
257 Following
jenn

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 Currently Reading progress bar's color.

More digging was done.  

 

Most blog pages have, either along the right or the left, a list of the books the blog owner is currently reading, with (if the reader is updating their progress) a progress bar that shows how far along they are.  This tutorial will change the color of the progress bar under each book currently being read.

 

Note: This tutorial will only work if you are NOT using the "Currently Reading" Widget.  This only applies if you are using the default settings.  Here's how to figure it out if you're not sure:

 

Go to settings/blog/customise, and in the black frame on the left of the page, look for this section:

 

If you have "Hide Currently reading" checked and you still have a "Currently Reading" section on your blog page (that has a whitish background box around it), then you are using the widget and this tutorial won't work.

 

Once you've determined all of that, go to the bottom of the black frame to the "Custom CSS" box:

 

 

Yours may or may not have any text in the box.  If there is text in the box, take care not to accidentally erase any of it, or over-write any of it, or else you're going to break something on your page and possibly blame me.  

 

In the Custom CSS box, at the bottom of whatever other text might be there (add a blank line or two to be safe), copy/paste the following:

 

div.box-currently-progress {
margin: 0px auto; width: 150px;
border: 1px solid #CCCCCC;
background: #BD3513;
}
div.box-currently-progress span {
display: block; height: 10px;
background: #FFFFFF;
}

 

Get all of it - you miss a } and the whole thing will go wonky.

 

Now if you left it just like that, you'd end up with a progress bar that looks like this:

 

So, you're going to want to change the colors up a bit.  I suggest using hexadecimal values for this since we're not doing anything fancy, like transparency.  The hexadecimal values are the ones that start with # and end with the ever important semi-colon.  If this is all new to you, check out:  

http://www.w3schools.com/colors/colors_picker.asp 

for a page that lists hexadecimal values you can use.  

 

There are only two lines - maybe three - that you want to focus on.  I'll repeat the code here for easy reference:

 

div.box-currently-progress {
margin: 0px auto; width: 150px;
border: 1px solid #CCCCCC;
background: #BD3513;
}
div.box-currently-progress span {
display: block; height: 10px;
background: #FFFFFF;
}

 

the first one you may or may not want to change is:

border: 1px solid #CCCCCC;

 

This is what it sounds like: the very thin grey border around the progress bar.  You can just barely see it in my screenshot.  If you choose to change this, make sure you only change the numbers/letters after the # - don't change the first part of the line (and leave the semi-colon).

 

the second line:

background: #BD3513;

 

This is the background behind the actual progress bit that grows as you update.  In my screenshot it's the red.

 

the third and last line looks almost the same as the second line:

background: #FFFFFF;

 

This is the sliding part of the progress bar that grows as you read and update.  In my screenshot, it's white.

 

When making your changes, please make sure the semi-colon is at the end of the line!  If that semi-colon gets left off, none of this will work (see 'blaming me', above).

 

Once you've sorted it all, remember to hit "Save" and then check out your blog page to make sure it all looks as you'd hoped.  Change colors at will by repeating the steps above.

 

Have fun.

 

But wait!

I'm guessing someone is going to see this and ask "can we change the reading challenge progress bar too?".  The answer is no.  No for the same reason this won't work with the Currently Reading widget.  The widgets are actually tiny web pages of their own, embedded in your blog page, and there's (currently) no access to their html to apply customisation. Believe me, I tried.

 

Although if someone out there more talented/stubborn that I am can figure it out, I hope they'll share.