SilverThistle

 

It's getting close to the end of the year but there's still time to challenge yourself to read a few more books before 2014 gets here.  If you've imported your bookshelves from somewhere else you may have already completed a challenge and you can use books already shelved (as long as the  'Date Read' column has been filled in with a date this year) for this.  Any books added to the shelf at a later date are automatically added to your widget for you (just remember to compete the 'date read' bit.)

 

Lets add a Booklikes Challenge Widget to our sidebar to show everyone what massive bookworms we are :)

 

First things first...You'll have to set up your challenge and decide how many books you'd like to read for it.

 

The settings for this can be found in the wonderfully named Goodies section.

 

 

Once you're in the Goodies section you need to choose the third tab along - 'Reading Challenges.

 

 

Now it's a simple case of choosing how many books you'd like to read for your challenge and click start. 

 

 

Once you've set your reading challenge by clicking the green 'start' button, you can come back to this section at any time to update your goal or even stop your challenge altogether (but we won't be doing that, will we?)

 

 

Challenge accepted!  But we need a super new widget to show off our goals.  Right?  Right.

 

The widget section is in the Goodies menu too and clicking that will take you to the widget page.  Scroll down the page a bit until you see the Reading Challenge widget.  This will allow you to get the code for your widget.

 

 

On the next screen the code you need to copy is already highlighted (in blue) for you. All you need to do is right click on it and 'copy'.  If you misclick and it becomes unhighlighted, just right click on the code and choose 'select all' then copy it from there. 

 

Almost done.  We just need to paste our code into the sidebar section where we'd like the widget to show. 

 

Now, I've heard that depending on which operating system or maybe browser you use you may see a different version of the side menu in 'customize' mode, or at least have some bits missing from your menu so if that's the case you might have to get in touch with Booklike's support to find out what needs to be done to fix that for you.

 

Anyway, assuming it's all gone to plan so far, head to your customize menu to add your widget code.  The section you need to paste your copied code into is right between the bit to choose your blog title colour and the blog subtitle box.  Your code needs to be pasted into the 'widget area' box.

 

 

Remember to click save and you have a shiny new widget!!

 

 

I'm fussy though, and I'm not fond of the transparent background or the gap at the top.  If you have a transparent sidebar with a busy background (or you're fussy, like me) you might want to change the colour of your widget too, to make it more solid looking.   If you like it as it is....you're all done here!!

 

If you want to tinker with it some more...

 

Lets do that!  We'll change the background colour of the widget and while we're at it we can move it all up a notch to fill that gap.  Don't worry though, it's just a copy/paste of a tiny bit of code into your CSS customize menu.

 

The code you will need is:

 

div center iframe {
    background-color: #FFFFFF;
    margin-top: -35px;
}

 As always I've bolded my colour code so you can change it into a colour you'd prefer.  FFFFFF is the hex code for white but you can pick another one here  - http://mudcu.be/sphere/

 

The 'margin-top' number tells the widget to move a little bit upwards within it's section of the sidebar but if you're happy where your widget is placed you can take that bit out.  Just make sure to leave the } symbol at the end of your code.

 

Done, done, done.  All done.  Finito. 

 

 

 

Hope this helps someone :)

 

 

 More tutorials can be found here: TUTORIALS

 

 

 

 

-------For Amaranth--------

 

**You've moved the code with the border down below the quote box tag so it doesn't know what to do. 

 

Copy/paste this code exactly as it is to replace from <div 40px to right before the word Quote your html. That should put the border back.

 

It's getting messy now that everything is getting moved around so double check you're replacing the right bit and that it's all sitting within the same tag < >

 

Just replace the bold bit below into right before you see the word Quotes.  The div 40px line should already be there so you copy all of bold code below you can replace it too.  It's the same bit of code, I just added it so you could make sure you were at the right bit in the html.  I can't add pics as I won't see what you see on your editor.

 

<div 40px;"="" margin-top:="" style=" background-color: #280500;">  

<div 7px;"="" 7px="" 0px="" padding:="" border-radius:10px;="" #ebe8d5;="" solid="" 2px="" border:="" style="border: 2px solid #EBE8D5;"> 

 

Quotes<br><div id="gr_quote_body">

 ------------------------------------------------------

 

 

To just change teh widget background and nothing else you need to change the actual widget code.  The code you need to change is in your html editor and you need to insert the following code into the code you added for your widget.

 

<div style=" background-color: #d16919; border: 2px solid #EBE8D5; border-radius:10px; padding: 0px 7px 0px 7px;">

 

the bold bit is what you need to add, the rest should be there already.  Once you're in the html editor use 'CTRL + F' to find the goodread's widget by searching 'goodreads' in the find box.

 

If that doesn't make sense just holler, I'm rubbish at explaining in words :(

 

*for the bit that bleeds out*

The background box for the widget is also the background box for the feed counter above it. 

 

<div 40px;"="" margin-top:="" style=" background-color: #280500;">  **This line here is your background box**

 

 <div 7px;"="" 7px="" 0px="" padding:="" border-radius:10px;="" #ebe8d5;="" solid="" 2px="" border:="" style="border: 2px solid #EBE8D5;   **This is your GR widget**