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.

56 comments:

Miaou said...

Thanks!

Anonymous said...

Thanks!

yoyoyo said...

Perfect, I've been trying to find a way to hide the template switcher all day. Life Saver, Thank you!

admin said...

hey, how to hide username e.g "Posted 13th March by Trastle"?

Unknown said...

Try Layout->Blog Posts, that may be what you're looking for.

Unknown said...

I thought I could use something like this

------------
#date-ribbon { display: none !important; }
-------------
#publish-info { display: none !important; }
------------

in order to hide the "Posted by" mention in the messages and the date ribbon. But I certainly made ​​a mistake. Could you please confirm?

Troy Test 1234 said...

@Rikardo,

The CSS you are looking for is:
.publish-info { display: none !important; }

Troy.

Troy Test 1234 said...

@Madein BrazilEurope

To hide the date ribbon use:
.ribbon.date { display: none !important; }

To hide the publish info use:
.publish-info { display: none !important; }

I found that I had to apply the changes before the date ribbon became hidden, the preview did not work.

Troy.

Unknown said...

yes, thx

Unknown said...

Awesome! Thanks for posting that, now I have hidden the stupid thing to let people change the dynamic view.

Do you know how to change the post width? I found a site that showed how to make it the "maximum" (I think it was 2000 px or something), but I don't want it THAT big.

Unknown said...
This comment has been removed by the author.
Kenken said...

Been wanting to remove the view switcher thing.. thanks for this!

Unknown said...

thank you kindly! very helpful to me!

Unknown said...

thank you!

Ashley Rae said...

Thank you for posting this! I am totally new with HTML... where do I enter the code to remove the dynamic view switcher?

Troy Test 1234 said...

Hi Ashley.

The link in paragraph one will give you detailed instructions.

In short you need to open the Blogger UI and go to the following:
Go to:

Template -> Customize -> Advanced -> Add CSS
Then add the CSS in there.

Hope this helps,
Troy.

Unknown said...

This post is awesome! How do I remove the "labels" that show up beneath each post? It's of course already unchecked in Layouts.

Mark Z. said...

Thanks so much! After searching for hours this was just the ticket for someone that doesn't know a lick of code.

Of course search results improved once a realized that I was using a Dynamic View template (�_�).

Unknown said...

Hey
Thank you very much for this post. Do you know any way to remove the labels from each blog post?
Thanks in advance

Troy Test 1234 said...

Hi James and Fabio,

Thanks for your comments, can you let me know what you mean by labels? Maybe post a link or screenshot. I am sure what you are trying to do is possible I am just not sure what the label is.

Cheers,
Troy

Unknown said...

Under every post there is something like this:
http://imageshack.us/a/img59/9918/screenshot20121023at231.jpg

I was wondering if there is anyway of hiding it. The share buttons you already showed us how, but not the label sign.

Thanks

Troy Test 1234 said...

Thanks Fabio

To hide the label from your link try the following:

# Hide the article label
.article-footer { display: none !important; }

Unknown said...

Thank you for your fast answer. Unfortunately, the labels are still visible.

MJ said...

Hi! Thanks for this, it is great!

I was wondering if you could help me with something else though. In the top bar where it allows people to change dynamic views, suddenly a "home page" link has appeared. I don't want it there, but nothing I try gets rid of it. I went to Pages>do not display but it all doesn't help :( it is still there. Any ideas?

Unknown said...

Hey, thanks a lot!
You saved me a lot of time!!

Azam Raharjo said...

Hey, not sure if I'm doing it wrong but it doesn't seems to work anymore? I can't do it in my blog

Azam Raharjo said...

Nevermind. I got it to work. Apparently I had to copy the code to HTML not CSS

damez said...

Im having trouble as well, not working. What do you mean by copying it to HTML? i cant find this.

Caroline said...

Thank you :)

Tóth Klaudia said...

Thank you for posting these tricks! It's been very helpful! :)

Admin said...

Thanks!

Minh Fâ said...

thannk you so much

Unknown said...

Thanks for this... I was able to get rid of the labels and the word "Labels:" by using the following CSS:

/*Hide article label content*/
.label { display: none !important; }

/*Hide article label moniker*/
.labels { display: none !important; }

Adam F. Dieffenbach said...

Thank you so much for this article!!!

I am not allowed to use Facebook, Google+, or Twitter in my industry, but wanted to use the dynamic view for our blog:

http://www.thelifegroup.org/#!blog/cdc3

You're awesome!

Caique Barsil said...

Hey man! Thanks for the help. I just want to know one more thing: I adjusted my blog to be on Flipcard view, but I want it to start ordered by label, and I don’t want users to be able to change it (hide these options too). Can it be done?
Thanks again!

Unknown said...
This comment has been removed by the author.
Yari said...

Thanks for this great post!! I was finally able to get it to work!

Theresa said...

thank you very much, i wouldn't have been able to customize anything without your help.

Dylan Thomas said...
This comment has been removed by the author.
Unknown said...

how to remove "no posts found" on my homepage
davideography.blogspot.com

Trish Bartleet said...

How do I change the colour of the background in the post area?? Cheers

Alexandra Style Triangle said...

thanksss!!! very much apreciated (((:

IMba^SPY said...

Nice post. Learn how to enable dynamic view on blogger http://chillofyblogging.blogspot.com/2013/06/how-to-enable-dynamic-view-for-blogger.html

Unknown said...

Thank you! very useful!! :D

muriloha said...

Many thanks for the tips.

Does anyone know how to remove date-ribbon and publish-info the mobile version of templates?

I thank you.

Unknown said...

So helpful. Thanks a lot.

Maherin said...

why the modile view dosnt load after editing the CSS??? what can i do???
blog address = http://cookfoodbd.blogspot.com/

Anonymous said...

Thank you for allowing me to hide the dynamic switcher. It was a pain toggling this afternoon.

Unknown said...

crazily useful! thanks :)

Linette said...

Thank you so much it's very much appreciated!

mantra said...

dear 2 thing

1) my blog post displaying a snapshot of picture from the post rather than showing post name, how to check it?

2) for example if anyone move mouse on my any of post then it display post name with date of publish, how can i hide this post publish date ??

I already tried to hide post publish date vis layout - blog posts -exit - popup window options ....but its not working.

here is the link to my blog http://mantracommodity.blogspot.in/

Unknown said...

Thank You Very Much

Abby Skinner said...

Very helpful and simpler fix than I had ever hoped for on uncluttering this template. Much appreciated!

Cat said...
This comment has been removed by the author.
gabsamame said...

I tried so many codes and no one worked,except these one, this one totally works. Thanks!!!!!

Unknown said...

Thank you so much for this post!

Post a Comment