How to align Pages/PageList gadget

pagelist left A Pages (a.k.a PageList) gadget is simply a set of links to your (static) Pages. You can opt to add Pages gadget once a static page is published.
Pages gadget is left aligned by default. To align it in the center or on the right (of your horizontal bar or sidebar), you just need to add a small CSS code snippet.
Here we go,
  1. Go to Dashboard > Design > Edit HTML Template Designer > Advanced > Add CSS.
  2. Look for ]]></b:skin> line in your HTML code and add the following code right before the line.
    Paste one of the following snippets in the CSS editor, and press Enter key.

    a. For horizontal tabs type PageList

    • To center
      .PageList {text-align:center !important;}
      .PageList li {display:inline !important; float:none !important;}
      pagelist center
    • To align right
      .PageList {text-align:right !important;}
      .PageList li {display:inline !important; float:none !important;}
      pagelist right
    If the tabs stack on each other after you added the code, try replacing display:inline with display:inline-block.

    b. For sidebar links type PageList

    • To center 
      .PageList {text-align:center !important;}
      sidebar pagelist center
    • To align right  
      .PageList {text-align:right !important;}
      sidebar pagelist right
  3. Check out the live preview in the lower pane.
  4. Lastly, if you are happy with the way it looks, click the orange Apply To Blog button.
  5. That's it. Enjoy!

Before you leave:
  • Do you find this article useful? Share it via Retweet, Share and Stumble buttons.
  • Any suggestion, question or comment? Please post it in the comments below.

Share/Bookmark

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...