Flatten & Center Link List in Pages Widget @Blogger Soho Theme | CutieCoding

Estimated Reading Time:
It has to be odd how often the crisis we face with CSS has to be with centering stuff. Although, it's a lot better now with CSS3's flex property.


Anyhoo.

This time, there's a very simple piece of CSS code to help you flatten and center the Pages widget in blogger.

When I say 'flatten', I mean that the link list which is organized vertically by default, to be changed to a horizontal list.

It goes from this:


To this:



This was also requested by @gaetanonline on Twitter. Thanks Gaetano!

Here it goes:

HOW TO FLATTEN AND CENTER YOUR PAGES LINK LIST IN BLOGGER'S SOHO THEME TEMPLATE

  1. Open your blog in Chrome or Firefox.
  2. Point your mouse to the Pages widget that you want to re-align, right-click on it, and go to 'Inspect'


  3. A panel should open up with a bunch of CSS code that has a specific snippet highlighted. If you did this correctly, the highlighted CSS line of code should have something like this:


    Make note of the number in the id part of this snippet. In this example, it's 4. This depends on how many times you have had a Pages gadget added to your blog at some point or the other.

  4. Now, log in to Blogger.com.
  5. Go to ‘Theme’ on the left panel for the blog you want to edit and click on ‘Customize’ under the ‘Live on Blog’ frame.
  6. Then, move to ‘Advanced’ on the left panel and scroll down to ‘Add CSS’.
  7. Paste the code below at the end of any other CSS code you might have there. Make sure you choose the right number of the Pages widget.

  8. /* CENTERING THE BLOG TITLE */
    #PageList4 ul {
    list-style: none;
    text-align: center;
    }

    #PageList4 li {
    display: inline-block;
    padding: 3%;
    }

  9. Press ‘Apply to Blog’.
  10. You're dun-dun-DONE!


Hope this helps! Let me know if you have any questions in the comments below or tweet at us.


Ciao!
~Ray



Comments

Popular Posts