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

Spoken by at 5:22 PM
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.
Labels: ,

66 comments:

  1. עופר מגדSeptember 8, 2013 at 3:44 AM

    Thank you, works fine for me :)

    ReplyDelete
    Replies
    1. YoboySeptember 13, 2013 at 12:31 PM

      Excellent! :)

      Delete
    2. UnknownSeptember 19, 2013 at 3:02 AM

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

      Delete
    3. YoboySeptember 23, 2013 at 11:04 PM

      Hi Nuno,

      Try this:

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

      Cheers :)

      Delete
  2. AnonymousSeptember 18, 2013 at 3:14 PM

    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. YoboySeptember 23, 2013 at 11:03 PM

      Hi Anon,

      I've updated the post above :)

      Cheers!

      Delete
  3. UnknownSeptember 21, 2013 at 8:23 AM

    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. YoboySeptember 23, 2013 at 11:50 PM

    Hi Aditya,

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

    ReplyDelete
    Replies
    1. UnknownSeptember 24, 2013 at 2:26 AM

      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. YoboySeptember 29, 2013 at 1:43 AM

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

      Delete
  5. FscoMiscSeptember 25, 2013 at 1:27 AM

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

    ReplyDelete
  6. YoboySeptember 29, 2013 at 2:37 AM

    I'm afraid I'm not following..

    ReplyDelete
  7. FscoMiscSeptember 29, 2013 at 2:57 AM

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

    ReplyDelete
    Replies
    1. YoboySeptember 29, 2013 at 3:03 AM

      Right... Here, give this a go :)

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

      Cheers!

      Delete
  8. FscoMiscSeptember 29, 2013 at 3:11 AM

    ok? bold?

    ReplyDelete
    Replies
    1. YoboyOctober 6, 2013 at 4:07 PM

      This should work:

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

      Delete
  9. FscoMiscOctober 3, 2013 at 10:46 PM

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

    ReplyDelete
    Replies
    1. YoboyOctober 8, 2013 at 11:14 PM

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

      Delete
  10. FscoMiscOctober 7, 2013 at 11:29 PM

    ok thanks

    ReplyDelete
  11. FscoMiscOctober 9, 2013 at 2:55 PM

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

    ReplyDelete
    Replies
    1. YoboyOctober 13, 2013 at 11:59 PM

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

      Delete
  12. gergeOctober 10, 2013 at 12:16 AM

    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. YoboyOctober 14, 2013 at 12:00 AM

      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
  13. AnonymousOctober 11, 2013 at 5:03 PM

    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. YoboyOctober 14, 2013 at 12:37 AM

      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
  14. Syed Ather RizviOctober 22, 2013 at 4:09 PM

    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. YoboyOctober 26, 2013 at 1:49 PM

      Hi Syed,

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

      Delete
    2. Syed Ather RizviOctober 31, 2013 at 9:10 PM

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

      Delete
  15. YoboyNovember 9, 2013 at 1:23 PM

    #header input#search{
    width: 500px !important;
    }

    ReplyDelete
  16. altadcNovember 21, 2013 at 12:14 AM

    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
  17. altadcNovember 21, 2013 at 1:49 AM

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

    Thanks you.

    ReplyDelete
  18. altadcNovember 21, 2013 at 3:28 AM

    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. YoboyNovember 24, 2013 at 8:18 PM

      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. altadcNovember 26, 2013 at 4:41 AM

      Hi Yoga,

      The word break issue is resolved. Thank you.

      Delete
  19. Spring 4 KidsDecember 9, 2013 at 9:03 AM

    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
  20. Spring 4 KidsDecember 9, 2013 at 9:08 AM

    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. YoboyDecember 15, 2013 at 12:04 PM

      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
  21. UnknownDecember 13, 2013 at 11:44 PM

    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. YoboyDecember 15, 2013 at 1:34 PM

      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
  22. Durga KarFebruary 6, 2014 at 4:02 AM

    Hi,

    Could you please help me to add side menu list.

    Re
    Prasanna

    ReplyDelete
  23. Darbie OnughaFebruary 28, 2014 at 1:27 PM

    This comment has been removed by the author.

    ReplyDelete
    Replies
    1. YoboyMarch 4, 2014 at 2:54 PM

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

      Delete
    2. Darbie OnughaMarch 4, 2014 at 9:51 PM

      This comment has been removed by the author.

      Delete
    3. YoboyMarch 17, 2014 at 1:48 PM

      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
  24. UnknownMarch 2, 2014 at 8:08 PM

    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
  25. AnonymousMarch 17, 2014 at 11:13 AM

    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. YoboyMarch 17, 2014 at 4:19 PM

      Hi Alain,

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

      Delete
    2. InspiredbytwoJuly 17, 2014 at 6:09 PM

      Hi Yoga - yes height of bar

      Delete
  26. InspiredbytwoJuly 17, 2014 at 6:09 PM

    Hi Yoga,

    Anyway of centre aligning the header text and title?

    ReplyDelete
    Replies
    1. YoboyJuly 23, 2014 at 1:31 AM

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

      Delete
  27. UnknownDecember 17, 2014 at 2:59 AM

    Hey bro.,
    I have a side bar in dynamic view which i would like to remove and instead make it look something like the usual classic blogs. Is it possible ?

    ReplyDelete
    Replies
    1. YoboyDecember 18, 2014 at 8:04 AM

      Hey there,

      Are you referring to the sidebar view? If yes removing the sidebar will remove all your post links.

      Delete
  28. BooksChatterMarch 8, 2015 at 8:02 PM

    Hi, any idea on how to change the size of the blog Title and Description (in the header section) - I have spent the last hour looking at it and can't get it to change - it seems to be set as 24px and 65px overall height.
    Thank you!

    ReplyDelete
    Replies
    1. YoboyMarch 11, 2015 at 8:45 AM

      Hello there,

      Than depends. Are you using a dynamic template?

      Delete
  29. MRApril 2, 2015 at 12:05 AM

    Hello, here's my blog - http://thesportscafe.blogspot.in/
    I want a padding of 30px between elements in my header bar. I inserted the following code in Add CSS section -

    .header-drawer .tabs{
    padding-left: 50px !important;
    padding-right: 50px !important;
    text-decoration: none !important;
    }

    But only a left padding of 50px is applied. The right padding and text-decoration properties are not being applied for some reason. Could you tell me how to overcome this issue?

    ReplyDelete
    Replies
    1. YoboyApril 14, 2015 at 1:35 PM

      Hello,

      Give this a try:

      #header .tabs li .menu-item{
      padding-right: 15px !important;
      padding-left: 15px !important;
      }
      #header .tabs li .menu-item:hover{
      text-decoration: none !important;
      }

      Delete
    2. MRApril 14, 2015 at 2:43 PM

      Thank you! That worked :)

      Delete
    3. UnknownJuly 30, 2015 at 2:26 PM

      How can you change your header bar to become home, badminton, cricket, and tennis? I really need your help Harini. Thank you

      Delete
  30. احسانیDecember 23, 2015 at 1:46 PM

    Great!
    thanks so much.

    ReplyDelete
  31. AdminJanuary 2, 2016 at 3:01 PM

    Hi YOGA
    I used all your CSS code to customize my blog and It's great.
    My blog is http://stunningcambodia.blogspot.com/

    I have some questions with that blog customization:
    1. Is there any way to change the sticky bar to fit with main post ?
    I want left and right of the bar equal to the size of main post (946px x 35px)

    2. Can we add any picture or other link on the right white space in Fold section?


    ReplyDelete
    Replies
    1. YoboyJanuary 25, 2016 at 12:56 PM

      Hi Nora,

      Sorry for the late reply.

      1. Could you advise what you meant by the sticky bar?

      2. Are you referring to the header section? If yes, try to see if this works:

      http://www.southernspeakers.net/2010/12/utilising-unused-space-in-blogger.html

      Delete
  32. UnknownJanuary 4, 2016 at 1:15 PM

    I've tried changing the size but it's still super tiny! Help :/

    vertigomadness.blogspot.in

    ReplyDelete
    Replies
    1. YoboyJanuary 25, 2016 at 4:11 PM

      Sorry for the late reply. This is probably what you need:

      #header .tabs li .menu-item{
      font-size: 20px !important;
      }

      Delete

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

Subscribe to: Post Comments (Atom)