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:

Nico Bally said...

Thanks!

Abidin said...

Thanks!

Mohammed Al-Saedi said...

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

Rikardo Ladesman said...

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

Ram Dixit said...

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

Madein BrazilEurope 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 Astle said...

@Rikardo,

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

Troy.

Troy Astle 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.

Madein BrazilEurope said...

yes, thx

Kristen Juchem 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.

Jan Bukač said...
This comment has been removed by the author.
Kenken said...

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

Kathy Weller said...

thank you kindly! very helpful to me!

Caroline Castro 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 Astle 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.

James O'Claire 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 (�_�).

Fabio Esteves 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 Astle 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

Fabio Esteves 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 Astle said...

Thanks Fabio

To hide the label from your link try the following:

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

Fabio Esteves said...

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

Marije 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?

Prashant Tripathi 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

Tyler Meszaros said...

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

Caro Swinburne 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

Kevin Esmeier 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!

CaiqueBarSil 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!

Alina Marie Gärtig 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.
jonar david 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

Li-Ru Hong said...

Thank you! very useful!! :D

Murilo Hildebrand de Abreu 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.

Eddy Katt 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/

Contechual said...

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

Adi Wasturaka said...

crazily useful! thanks :)

Marie Flutterby 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/

Donny Donovan 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!

NeccoEey said...
This comment has been removed by the author.
Gabriela Samame said...

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

sonia melendez said...

Thank you so much for this post!

Post a Comment