Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Saturday, September 7, 2013

Changing Font Size in the Header Bar in Blogger's Dynamic View Templates

Before
After
You'd think there is an easy way to change the size of the font on your Dynamic View's header bar. Oh wait, there is - the option to change your font size is very much there in your Template Designer (under Advanced - Header Bar). But let's be honest here. I have not seen this working. It never had any effect on my actual template, and no, not even on my preview page. Fortunately, there's a way to manually change the font size in the header bar, and here's how.

Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog:

Use the following to change the size of your menu font (Classic, Flipcard, Magazine..)
.header-drawer .menu span{
font-size: 20px !important;
}
And the following to change the size of your header bar links.
.header-drawer .tabs{
font-size: 20px !important;
}
And this to change the font-size of the view-options in your drop down menu:
#views .menu-item{
font-size: 20px !important;
}
Change the value '20px' in Line 2 accordingly.

55 comments:

  1. Replies
    1. I Yoga,thanks for this one. Any tip on changing header font size? kind regards

      Delete
    2. Hi Nuno,

      Try this:

      #header .header-bar .title h1{
      font-size: 20px !important;
      }

      Cheers :)

      Delete
  2. Thanks for the good info.

    Is there a way to change sub menu font size? the drop down menu - class, flipcard, magazine something like that

    ReplyDelete
    Replies
    1. Hi Anon,

      I've updated the post above :)

      Cheers!

      Delete
  3. Hello Yoga,
    Sorry this is a wrong place to comment as I am not able to find which part is wrong.
    I used your CSS codes to make changes in my dynamic views blog.
    Something is going wrong, the Header bar is moving when I hover over it.
    Here is my blog http://technohulk.blogspot.in/

    The CSS codes I used are (I have added HTML comments so that you can understand the codes easily). I guess the part marked with 'add header in dynamic view' is the one which I did wrong.


    #views{
    display: none !important;
    }

    #header #pages, #header #pages:before{
    border-left: 0px !important;
    }
    //For choices of views

    #header #pages:before{
    border-left: 0px !important;
    }
    #gadget-dock div.gadget-item:last-child, #spk{
    display: none !important;
    }
    //Subscribe gadget removal


    #header .header-drawer.sticky, #header .header-drawer {
    top: 134px;
    }

    #header .header-bar{
    height: 165px;
    }

    #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
    top: 165px;
    }

    #header-container {
    height: 205px;
    }

    .viewitem-panel .viewitem-inner {
    top: 100px;
    padding-bottom: 120px !important;
    height: auto !important;
    }

    #header-container #header.header .header-bar span.title{
    background: url(http://2.bp.blogspot.com/-hiDO5AnaLQg/UjyHGEiDEhI/AAAAAAAAHiY/wpnCEc7FJek/s380/Logo.PNG)
    no-repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 165px;
    }
    #header .header-bar{
    background: white ;
    }
    #header.header .title a h1, #header.header .title h3{
    display: none;
    }

    //Add header in the dynamic view


    #gadget-dock, .ss{
    top: 300px !important;
    }
    //changing gadgets position


    .header-drawer .menu span{
    font-size: 20px !important;
    }
    #header .header-drawer.sticky{
    margin-top: 0px !important;
    position: fixed !important;
    top: 0px !important;
    -moz-transition: top 0.0s linear 0.0s !important;
    -webkit-transition: top 0.0s linear 0.0s !important;
    -ms-transition: top 0.0s linear 0.0s !important;
    -o-transition: top 0.0s linear 0.0s !important;
    }

    //Sticky bar


    .magazine .summary:after, .ss{
    content: " ------> Read More" !important;
    color: green !important;
    }

    //Read more

    .header-bar span.title a h1, .ss, #header .title a:hover{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    color: transparent !important;
    text-shadow: 0px 0px 0px transparent !important;
    }

    //Linking homepage

    By the way, I would like to thank you! You are awesome! All your codes work like a charm :)

    ReplyDelete
  4. Hi Aditya,

    I could not see the problem in your blog. Have you got it sorted?

    ReplyDelete
    Replies
    1. Yes, sorry for bothering you. I used Customize->Template->Background and then uploaded a picture, didn't tile it and placed it in the centre.

      Google should hire you! You are a life saver! :)

      Delete
    2. Lol.. well they're buying me meals and hotel stays every 2 years, can't complain :P

      Delete
  5. I can not change the font size of the post title designer models. How can I do? thanks

    ReplyDelete
  6. how to increase the font size of the title of the post? Thanks and sorry for my bad english ;)

    ReplyDelete
    Replies
    1. Right... Here, give this a go :)

      .title.entry-title{
      font-size: 30px !important;
      }

      Cheers!

      Delete
  7. Replies
    1. This should work:

      .title.entry-title{
      font-size: 30px !important;
      font-weight: 900 !important;
      }

      Delete
  8. There is a possibility to add a widget in the dynamic views? thanks

    ReplyDelete
    Replies
    1. There are plenty of gadgets that can be added to Dynamic View templates, except for the HTML/Javascript gadget..

      Delete
  9. There is a possibility to insert a scrolling text on the home of a blog with dynamic view. thanks

    ReplyDelete
    Replies
    1. I'm afraid that will require some sort of scripting, or some advanced form CSS which I have no clue of..

      Delete
  10. how to align blog post side by side in blogger that is showing the post in two-three columns in blogger.
    You can see this link
    http://www.templateism.com/p/preview.html?url=http://gogreentheme.blogspot.com/

    ReplyDelete
    Replies
    1. You will have to restucture your entire template to have multiple columns for your posts. The key here is to use tables. As you can tell, this involves a lot of work - I'm afraid I can't be of much help when it comes to tasks of this size.

      Delete
  11. Hi, sorry if ive missed this somewhere. Id like to make the header bar a certain width and centre. Ive used your code to put three snapshots across each row and id like the header bar to be just across these.
    Can you help please.
    thanks
    AS

    ReplyDelete
    Replies
    1. Hi there,

      I need to have a look at your blog to even suggest if it can be done. What's your blog's address?

      Delete
  12. Hey Yoga Can You Tell Me How To Add A 2nd Level Vertical Sub Menu To A 1st Horizontal Sub Menu

    You Can See By Blog Link Is Here :
    http://dropsteel.blogspot.com/

    Or See This Image,can you please tell me how to correct it please reply me soon bro
    I badly need your help

    ReplyDelete
    Replies
    1. Hi Syed,

      Adding a multi-level drop-down menu in Dynamic View is a lost cause - it cannot be done.

      Delete
    2. Thanks For The Answer Yoga You really Helped Me Alot Thanks Bro :D

      Delete
  13. Hey Dude please help me..

    How to increase search bar size :(
    please help bro..

    ReplyDelete
    Replies
    1. #header input#search{
      width: 500px !important;
      }

      Delete
  14. Hi,
    Please help me. My texts are not justified properly. Words are cut-off from my posts whenever it wants to. example: Senten ce

    Please help. Thank you.

    ReplyDelete
  15. Hi, how can I make the blog description position below the Blog Header?

    Thanks you.

    ReplyDelete
  16. Hi Yoga,
    Please help, how can i put the blog description directly below the blog title and put them in center too?

    Please help.

    Thank you.

    ReplyDelete
    Replies
    1. Hi Alta,

      Let's handle one thing at a time. I was told the word break issue should have been resolved by now. Are you still seeing it in your blog?

      Delete
    2. Hi Yoga,

      The word break issue is resolved. Thank you.

      Delete
  17. Hi Yoga, how can I get rid of the choices to be viewed on my blog. I have it set to classic and don't want the other choices there. http://spring4kids.blogspot.com

    ReplyDelete
  18. Also, I see on this blog, that the widgets are showing, they are not showing on mine and I would like them to. Can you help me with that too please? http://technohulk.blogspot.in

    ReplyDelete
    Replies
    1. Hi there,

      I can see your widgets just fine. As for disabling the views, see the link below:

      http://www.southernspeakers.net/2011/09/disable-certain-dynamic-views-in.html

      Delete
  19. Hi Yoga, I changed the blog post title font size, but then the size of the sidebar (in the sidebar dinamic view) changed too, and it's to large... How can I change just the font size of the sidebar?
    Thnks for the help man!

    ReplyDelete
    Replies
    1. Hi Alex,

      Do you only want to change the title in your post, or the title in your sidebar? Your question seem to suggest you want to do both. In any case, what's your blog's address?

      Delete
  20. Hi,

    Could you please help me to add side menu list.

    Re
    Prasanna

    ReplyDelete
  21. Hello Yoga

    Please I need you help. I successfully adjusted the head and several other aspects of my blog but I am unable to get the menu bar to stay fixed right below the header bar. Please check www.efuzo.com and tell me what I am missing. Here are all your codes I have used so far..

    #views{
    display: none;
    margin-right: -5px;
    }
    #header #pages:before{
    border-left: none !important;
    }

    #header.header .header-bar span.title{
    width: 186px !important;
    text-align: center !important;
    }
    #header .header-bar .title h1{
    font-size: 40px !important;
    display: block !important;
    }
    #header .header-bar .title h3{

    position: relative;
    top: -30px !important;
    margin-top: 20px !important;

    width: auto !important;white-space: normal !important;
    max-height: 30px !important;
    display: inline-block !important;
    line-height: 20px !important;
    }

    #header .header-drawer.sticky{
    margin-top: 0px !important;
    position: fixed !important;
    top: 135px !important;
    -moz-transition: top 0.0s linear 0.0s !important;
    -webkit-transition: top 0.0s linear 0.0s !important;
    -ms-transition: top 0.0s linear 0.0s !important;
    -o-transition: top 0.0s linear 0.0s !important;
    }
    #header .header-bar{
    height: 85px;
    }

    #header-container {
    height: 135px;
    }

    #header-container #header.header .header-bar span.title{
    no-repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 115px;
    }

    ReplyDelete
    Replies
    1. Your header bar looks stable now. Have you got this sorted?

      Delete
    2. Yoga thanks for coming back. I abandoned my original plan to put the description under the header title and I think my current design is fine. Unfortunately I have been unable to use any of the codes below to center the pages in the header bar. It remains aligned to the left when I use widths up to 84% - any value higher than that moves collapsed the pages under "Pages". I noticed some people have reported similar issues, do you have any solution to this yet?


      .tabs{
      width: 84% !important;
      text-align: center !important;
      }

      OR

      #header #pages{
      width: 100% !important;
      }

      #header #pages.tabs ul{
      width: 100% !important;
      text-align: center !important;
      }

      Delete
    3. Sorry for the late reply. Unfortunately nope, this is the closest we can get to automate the centralization. Another way is to define a fixed margin either to your right or to the left, but this will only look good on your computer, as it takes into account the width of your monitor - which obviously isn't a good idea.

      Delete
  22. its not working for me for somereason.
    i want to increase the sapcing between my header tabs contents so it fills out the area.

    how can i do it ?

    ReplyDelete
  23. Hello Yoga,
    Thank you very much for this but how can I get a bigger header bar now that I have a bigger font?
    Alain

    ReplyDelete
    Replies
    1. Hi Alain,

      You mean as in increasing the height of the header bar or something? What's your blog's address btw?

      Delete
  24. Hi Yoga,

    Anyway of centre aligning the header text and title?

    ReplyDelete
    Replies
    1. I see you've already got this sorted. Let me know if further assistance is needed.

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.