Larger Widget Menu Icons in Dynamic Views: Blogger Tips

Estimated Reading Time:
Size matters!

Err... did I say that out loud? Umm... ahem. [pushes glasses up]

Right! Okay! If you use dynamic views in Blogger, you know that it comes with its own doll accessories (sorry, can't seem to help it today) and one of them is the gadget menu as a sidebar that slides in and out when you mouse over it.

In an ideal world, I would refer to this as the sidebar. Unfortunately, sidebar is also a type of dynamic views template and that's just plain confusing here. So, hereinafter (yes, hereinafter), I'll be referring to that 'slidey sidebar widget menu dock thingy' as a 'gadget dock', which works out perfectly because that's the element ID that it's housed in.

Unlike popular opinion, I actually like the gadget dock. When I look at it though, I just wanna glam it up (#artsandcrafts) starting with... making it bigger. {cough}


Increase the size of your gadget menu icons


THE TL;DR Version

  1. Log in to Blogger.com.
  2. Click on the blog you want to edit. The one that uses any of the dynamic views template.
  3. Go to ‘Template’ and click on ‘Customize’ under the ‘Live on Blog’ frame.
  4. Then, move to ‘Advanced’ on the left panel and ‘Add CSS’.
  5. Paste the code below at the end of any other CSS code you might have there.
  6. Press ‘Apply to Blog’.
  7. Done-done-ah-done-done!


/* ADJUST THE POSITION OF THE SIDEBAR GADGET DOCK */
#gadget-dock {
  width: 70px;
  right: -60px;
}

/* ADJUST THE SIZE OF GADGET ICONS */
.ss, #gadget-dock .gadget-icons {
  width: 70px !important;
  height: 70px !important;
}

/* ADJUST THE GADGET TITLES CONTAINER THAT SHOW UP WHEN MOUSING OVER */
.gadget-container:hover,
.gadget-item:hover .gadget-container,
.gadget-selected .gadget-container {
  right: 69px;
}

/* ADJUST GADGET TITLES */
.gadget-container .gadget-title {
  height: 70px;
  font-size: 1.25em;
  line-height: 70px;
}

 BEFORE:
 
AFTER:

 

The Lengthy Version

Increase the size of the background DIV elements

/* ADJUST THE POSITION OF THE SIDEBAR GADGET DOCK */
#gadget-dock {
  width: 70px;
  right: -60px;
}

/* ADJUST THE SIZE OF GADGET ICONS */
.ss, #gadget-dock .gadget-icons {
  width: 70px !important;
  height: 70px !important;
}
I wanted each of the menu boxes to be 70px instead of the default 50px because I found that for the number of widgets I have, it looks nice at that size. If you have fewer gadgets, I recommend playing around with this number so that you find what works for you.

Whatever size you decide on, figure out how much of it you want showing it transitions out of the screen. I kept it at 10px, which is why it slides away by -60px.






 This is what it looks like after the gadget dock's position is set to the required size (in this case, 70px):
Notice that the width of the whole dock has changed but the individual slots are no longer squared. We'll fix that with the next piece of the CSS (as shown above).
And, this is what it looks like after you've squared off the the individual gadget boxes to 70px height and width:

Move The Gadget Title Text DIV

After adjusting the element holding the gadget menu and the individual boxes that contain the icons, you'll notice that when you move your mouse over the icons, some of the title text gets hidden.

<--- It looks like this













/* ADJUST THE GADGET TITLES CONTAINER THAT SHOW UP WHEN MOUSING OVER */
.gadget-container:hover,
.gadget-item:hover .gadget-container,
.gadget-selected .gadget-container {
  right: 69px;
}





 We change this like so:






Make the gadget titles larger

Next, we make the title text of the widgets larger and space them out evenly.

/* STYLIZE GADGET TITLES */
.gadget-container .gadget-title {
  height: 70px;
  font-size: 1.25em;
  line-height: 70px;
}








Once you do that, this is what it will look like:


























Now all I have to do is [deep breath] change-the-color-of-the-icon-container-remove-the-old-icons-create-custom-icons-of-the-size-that-I-want-add-them-all-in-change-the-color-of-the-box-shadow-then-test-it-all-out-so [heave] it looks like this:




Okay - got that? Good! Because we'll be talking about all that in our next 'Slog That Blog' post. Meaning? Homework! :-D

Questions? Comments? Corrections? Rants? Let me know in the comments below.

Image credit for xkcd comic
All other images are owned and provided by the author

Comments

Popular Posts