Tuesday, March 13, 2012

Hiding elements from Blogger's Dynamic View Template

I've been playing a little with Blogger's Dynamic Views template in the past week, so far it seems pretty neat for photo based content.

One of the quirks of the new Dynamic Views is that, unlike standard Blogger templates, users cannot edit the HTML of the page. This is a pretty huge drawback but it is tempered by the fact that you can still modify the CSS using the template designer.

In order to make the blog I was working on a little less cluttered I wanted to hide a number of elements on the page. This may be useful to others so I have itemised my changes below.

  • Hide the search box (from the top right):
    /* Hide search */
    .header-bar #search{ display: none !important; }

  • Hide the Google Chrome feedback link (from the bottom right):
    /* Hide the google chrome feedback button */
    a.feedback  { display: none !important; }

  • Hide the "Home" button (from the pages list):
    Note: This assumes the home button is the first page in your list of pages.
    /* Hide the home button */
    #pages ul li:first-child  { display: none !important; }
    

  • Hide the "Sharing Controls" (Facebook, Twitter buttons etc):
    /* Hide the sharing controls */ 
    .share-controls { display: none !important; }
    

  • Hide the gadget dock (from the right hand side of the page):
    /* Hide the gadget Dock */
    #gadget-dock { display: none !important; }
    

  • Hide the views on the main page:
    /* Hide the views on the main page */
    #views  { display: none !important; }
    

  • Hide the dynamic view switcher:
    /* Hide the views on the main page */
    #views { display: none !important; }
    /*Hide the vertical bar from before the first page link */
    #pages::before { border-left-width: 0 !important;}

It is worth noting that these changes do not remove elements from the structure of the page (anyone reading the source of the page can still see the elements) but it does make the overall page a little cleaner.

You can see the results of my changes here and here.