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.
55 comments:
Thanks!
Thanks!
Perfect, I've been trying to find a way to hide the template switcher all day. Life Saver, Thank you!
hey, how to hide username e.g "Posted 13th March by Trastle"?
Try Layout->Blog Posts, that may be what you're looking for.
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?
@Rikardo,
The CSS you are looking for is:
.publish-info { display: none !important; }
Troy.
@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.
yes, thx
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.
Been wanting to remove the view switcher thing.. thanks for this!
thank you kindly! very helpful to me!
thank you!
Thank you for posting this! I am totally new with HTML... where do I enter the code to remove the dynamic view switcher?
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.
This post is awesome! How do I remove the "labels" that show up beneath each post? It's of course already unchecked in Layouts.
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 (�_�).
Hey
Thank you very much for this post. Do you know any way to remove the labels from each blog post?
Thanks in advance
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
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
Thanks Fabio
To hide the label from your link try the following:
# Hide the article label
.article-footer { display: none !important; }
Thank you for your fast answer. Unfortunately, the labels are still visible.
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?
Hey, thanks a lot!
You saved me a lot of time!!
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
Nevermind. I got it to work. Apparently I had to copy the code to HTML not CSS
Thank you :)
Thank you for posting these tricks! It's been very helpful! :)
Thanks!
thannk you so much
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; }
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!
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!
Thanks for this great post!! I was finally able to get it to work!
thank you very much, i wouldn't have been able to customize anything without your help.
how to remove "no posts found" on my homepage
davideography.blogspot.com
How do I change the colour of the background in the post area?? Cheers
thanksss!!! very much apreciated (((:
Nice post. Learn how to enable dynamic view on blogger http://chillofyblogging.blogspot.com/2013/06/how-to-enable-dynamic-view-for-blogger.html
Thank you! very useful!! :D
Many thanks for the tips.
Does anyone know how to remove date-ribbon and publish-info the mobile version of templates?
I thank you.
So helpful. Thanks a lot.
why the modile view dosnt load after editing the CSS??? what can i do???
blog address = http://cookfoodbd.blogspot.com/
Thank you for allowing me to hide the dynamic switcher. It was a pain toggling this afternoon.
crazily useful! thanks :)
Thank you so much it's very much appreciated!
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/
Thank You Very Much
Very helpful and simpler fix than I had ever hoped for on uncluttering this template. Much appreciated!
I tried so many codes and no one worked,except these one, this one totally works. Thanks!!!!!
Thank you so much for this post!
Post a Comment