Customizing the Pages Widget in Dynamic Views | CutieCoding

Estimated Reading Time:
The 'HTML/JavaScript' widget in Blogger for static templates does all kinds of things and probably could cure cancer if given the chance.

One of the best ways to use this widget is to create dropdown links at the top of page and stylize the heck out of it. BUT, we are not going to do that. Because the 'HTML/JavaScript' widget not supported in Dynamic Views templates. (I know, right?)

So, how do we get links at the top of the page in Dynamic Views? We use the 'Pages' widget instead.

This post does NOT talk about how to add a Pages widget to your blog and add links to it. What we do talk about is how to make it uber stylish.


CUSTOMIZE THE PAGES WIDGET IN BLOGGER'S DYNAMIC VIEWS TEMPLATES

The TL;DR Version
  1. Log in to Blogger.com.
  2. Click on the blog you want to edit. The one that uses a Dynamic Views template. 
  3. Go to ‘Template’ and click the ‘Customize’ button 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. McDone-alds: I'm lovin' it!

/* CENTER ALL THE LINKS OF THE PAGES GADGET */
#header #pages {
  width: 90%;
  display:
-moz-inline-stack !important;
  display: inline-block !important;
  text-align: center !important;
  text-align: -moz-center !important;
  text-align: -webkit-center !important;
}

/* STYLIZE THE MENU ITEMS IN THE PAGES GADGET */
#header .tabs li .menu-item {
  color: #ffffff !important;
  font-size: 1.2em !important;
  font-family: 'Chewy';
  padding-right: 0.5em;
  padding-left: 0.5em;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
}

/* CHANGE THE COLOR OF THE LINKS WHEN HOVERING IN THE PAGES GADGET */
#header .tabs li .menu-item:hover, #header .tabs li .menu-item:focus {
  font-size: 1.8em;
  color: rgb(255,255,0) !important;
}

/* CHANGE THE TITLE WHEN PAGES WIDGET COLLAPSES IN SMALLER WINDOW */
#pages span:first-child {
  font-size: 0px !important;
}

#pages .menu-heading:before{
  content: "MORE";
  font-size: 18px !important;
  font-family: 'Chewy';
}


The Lengthy Version

THE 'PAGES' RANT. In Dynamic View templates, the 'Pages' widget has limited functionality; only can be used under the header bar where the blog title is, does not support dropdowns, automatically collapses into one dropdown when the window size is reduced (I kinda like that actually), and so on.

When you add a 'Pages' widget to DV template, even though you are adding it to the sidebar, it automatically associates itself to appeart just under the header bar. Something that Blogger should consider clarifying - but hey, I'm doing that here for you.

So, don't add another Pages widget to the sidebar hoping it would take to it when you add it again. It won't. There! Phooo! I am done with the rant. Let's proceed.  

BLOG DESIGN DECISIONS. Now that we know the rules to play with, it allows you to organize your website data to be either as descriptive or as simple as possible.

For example, there was a time when our site looked like this:- Notice the pink line under the blog title? That's the header drawer where the Pages widget goes. We ignored the widget and kept the header drawer so that it looked like it was underlining the header. And all our relevant links were to the side in the gadget dock which you could access if you moved your mouse over it. It was cute and we liked it a lot.

So why change it then?


Two reasons. One, we were new and had a name that didn't really give away anything about what the site was really about. Two, the gadget dock, where all our relevant links were, doesn't work when viewed on mobile devices.

Rumi and I struggled with these decisions a lot and finally compromised to have some links at the top of the page under the blog title, just enough that it would help navigation, and let people know in one quick look what is available. Which is how we ended up looking like this now:


BACK TO THE CSS CODE.

Let's start with discussing the first piece of CSS code:
  /* CENTER ALL THE LINKS OF THE PAGES GADGET */
#header #pages {
  width: 90%;
  display: -moz-inline-stack !important;
  display: inline-block !important;
  text-align: center !important;
  text-align: -moz-center !important;
  text-align: -webkit-center !important;
}


The 'inline-block' line doesn't work on Mozilla Firefox and so, we need to add the line above it, i.e. (LOL), '-moz-inline-stack' to get the same benefits as inline-block. Of course, the same logic applies to aligning it to 'center'.

Next, we play with the font styles and color of the links in the Pages widget. I wanted the font to be white and be the font 'Chewy' to match with our Post titles.

Feel free to play around with the values here to suit your blog design. I also wanted to add a transition time so that it changed color when the mouse runs over it.

As you can see, we didn't want the underline that usually gets added for links.
  /* STYLIZE THE MENU ITEMS IN THE PAGES GADGET */
#header .tabs li .menu-item {
  color: #ffffff !important;
  font-size: 1.2em !important;
  font-family: 'Chewy';
  padding-right: 0.5em;
  padding-left: 0.5em;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
}


Which is how we ended up adding this piece of CSS so that the font color changed from white to yellow (to match the cute bow on our logo) when the mouse hovered over any link.

  /* CHANGE THE COLOR OF THE LINKS WHEN HOVERING IN THE PAGES GADGET */
#header .tabs li .menu-item:hover, #header .tabs li .menu-item:focus {
  font-size: 1.8em;
  color: rgb(255,255,0) !important;
}


Remember how I was ranting about how all the links collapse into a dropdown menu when you reduce the size of your browser window?

Well, what I didn't mention was that, the title of the dropdown menu happens to be  'Pages'. Yeah! Just...'Pages'. So, you're thinking, "Why don't I just change the title in the Pages settings and we are good to go." Well, no, we are not good to go.

In DV templates, it doesn't take in the title from the 'Pages' widget settings, for some godforsaken reason. Breathe. To change it from 'Pages' to 'MORE' (which is what we went with), we add the following piece of CSS code.

  /* CHANGE THE TITLE WHEN PAGES WIDGET COLLAPSES IN SMALLER WINDOW */
#pages span:first-child {
  font-size: 0px !important;
}

#pages .menu-heading:before{
  content: "MORE";
  font-size: 18px !important;
  font-family: 'Chewy';
}


You may have noticed that all this time, the sizes are written using 'em' as a measuring scale. However, since 'MORE' isn't inherently recognized as text that has its own default font sizing, we need to define it here as I have done with '18px'.

Hope this helped. Let me know in the comments below if you have questions, changes, rants of your own to share!

Ray out! Peace!

Image credit for the Pages picture goes to Horia Varlan.
All other pictures are screencaps from our blog design discussions. 

Read other blogging tips on CutieCoding 


Comments

Popular Posts