Southern Listeners

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

Friday, October 14, 2011

Change Blogger Dynamic View Post Title Color


While we wait for Blogger to introduce template customising options to Dynamic View, here's how you can change your Post Title's color (in Dynamic View). This is a respond to an anonymous blog reader. I figured the answer will serve better as a post rather than a comment-reply.

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
h1.title a{
color: #0033CC;
}
See the weird number in the code above (#0033CC)? That is the hex for your color. You can generate your own hex for a color of your choice by going to the following useful link:

Hex Color Code Generator

Enjoy folks.

54 comments:

  1. Thanx for this too. But can you help with the color and size of main blog title? Also how to do similar changes in the pages we add?!
    Thanx Yoboy!:)

    ReplyDelete
  2. @रवि: The tweak in this page will change the color of the title in your static pages as well. As for your first question, see the link below:

    Change Dynamic View's Blog Title Color and Size

    Cheers buddy.

    ReplyDelete
  3. Hi, thanks for this tutorial, it is really helpful!

    I also have another question, are you just experimenting to find the CSS rules and codes, or is there a specific place that has all them all? The reason I am asking is because I am trying to center my posts to the middle of the screen, instead of off to the side as you can see here:

    http://otcpharmacy.blogspot.com

    I have had people tell me that the bigger the screen, the more off center it looks because it seems to be staying at a fixed distance from the side bar as opposed to centering itself on the screen.

    Thanks again!

    ReplyDelete
  4. @TheMan: You need a combination of some developers tool (Firebut, MeasureIt, etc), some experience, some experimentation and a lil bit of luck.

    As for your case, add the following CSS to center your content's body:

    .sidebar #main.hfeed #content .article{
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
    }

    Also, you have an empty adsense box floating near the right side of your blog. If you hide this box, your posts will be better adjusted to the center. To hide your adsense box:

    .sidebar #main.hfeed #content .article .adsense-aside{
    display: none !important;
    }
    .sidebar #main.hfeed #content .article{
    padding-right: 0px;
    }

    ReplyDelete
    Replies
    1. How would this be done in Magazine view? I have an Adsense ad causing a large empty bar on my right margin of posts. I've been trying to apply something like this to no avail. You're a God with CSS YoboY, thanks for the tips on here

      Delete
    2. Never mind, figured it out!


      .article.has-ads {
      padding-right: 0px;
      min-height: 650px;
      }

      Will remove the blank spaces.

      Delete
  5. Wow, perfect! Thanks! I am definitely recommending this blog to my friends. Your help has been incredibly useful.

    ReplyDelete
  6. @TheMan: You're welcome. That's nice to know. Have a pleasant weekend :)

    ReplyDelete
  7. Yoboy. How would I assign a different color to each of the pages in my navbar? Thanks!

    Jon

    ReplyDelete
  8. @Jon: Hi Jon, add this to your CSS:

    #pages.tabs ul li:nth-child(1) a{
    color: yellow;
    }

    #pages.tabs ul li:nth-child(2) a{
    color: red;
    }

    #pages.tabs ul li:nth-child(3) a{
    color: cyan;
    }

    Cheers.

    ReplyDelete
  9. Yoboy Checkout this blog-

    The guy uses flipcard theme but has graphical representations of "Date" and "Label"

    http://www.slowbizz.com/

    How can I do that!!!!???? That is a really awesome change!

    Thanks so much in advance.

    PS. I am a teacher using these dynamic views blogs for studnent portfolios- so a hundred students from Hawaii are visiting your blog everyday to use your CSS! You are getting some of them hooked. some have already written to you directly!
    Here is an example: http://ninja8o8.blogspot.com/

    ReplyDelete
  10. Yoboy another question- what is the width that the header image must be in order to exactly stretch across the whole screen in dynamic views?

    Thanks,

    ReplyDelete
  11. @Jon Pennington: That's great Jon. You must be an awesome teacher.

    As for the graphical representation, it isn't hard to do. I wrote a code for someone in some comment somewhere, let me see if I can find it..

    Found it. That person is Slowbizz, the owner of the blog that you've seen. See my reply here.

    Let me know if you need further clarification on it. Merry Christmas Jon.

    ReplyDelete
  12. @Jon: Just saw your other question. There is not defined answer for your question, as the width of the header depends on the width of your display size. So, you need to use your best judgment when it comes to the header's width, as a wide header will look awful in small screened devices.

    ReplyDelete
  13. Hi again :) I have been scouring the WWW, but can't find the answer (again) which makes me think that it might not be possible (again) - but you seem like the right person to ask anyway!! I wanted to know if it is possible to target the text color of a blog post using CSS in the Dynamic Views? The problem is that using the template settings, I have to use the same font color for both then body of the blog post, and for the names of users in the comment section (for whatever reason). The problem is that I have links highlighted black, so that the text in the comment section needs to be white (so that you can read the links). However, in the body of the text, being on a white background, the text needs to be black. For some reason this only effects the comments section (links are the perfect white on black bkgd in the body of the post). I figured that the easiest solution, aside from manually changing the color of each blog post, would be to target the text color of the post as opposed to the comment section - but I figure it out what this is being called in the html, and therefore can't effect any change. Any ideas?

    Thanks, E
    canadieren.blogspot.com

    ReplyDelete
  14. @Erin Jeanne Wright: You've found the right person if your problem is concerning CSS. Here, this code should fix it. Add it to your CSS.

    .blogger-comments .comments-content .user, .blogger-comments .comments-content .user a{
    color: white !important;
    }

    Happy new year...

    ReplyDelete
  15. Ahh, you are a genie! Works like a charm, thanks :) Happy New Year to you too! E.

    ReplyDelete
  16. @Erin Jeanne Wright: No problem at all. Cheers :)

    ReplyDelete
  17. there is any way to make default text direction for posts from "ltr" to "right to left" and "right aligned"?

    ReplyDelete
    Replies
    1. I happen to know a way. Add this to your CSS:

      html, body {
      direction:rtl !important;
      }

      Cheers.

      Delete
    2. sorry that bother you again!!
      I used above code to change whole blog to rtl direction and now in heather, my search bar is in right and at the left of that there is blog title and left of that blog description .
      can you help me to move search bar to left side of header?
      thank you

      Delete
    3. I need to have a look at your blog. What's your blog's address?

      Delete
    4. sure !
      this is one of them:
      http://iriproudlink.blogspot.com/

      Delete
    5. Noted. Add this to your css:

      #header .header-bar .title {
      margin-right: 20px !important;
      margin-left: 235px !important;
      }

      #header #search {
      right: auto !important;
      left: 10px !important;
      }

      Cheers!

      Delete
    6. thank you.
      that's very amazing!!
      I want to learn CSS! can you introduce me best and shortest way to do that?
      I,ve tried some e-books and none of them was usable for blogger because I don't have original CSS code of blogger pages so I can not change that for my use.
      I'll be thankful if you help me with that!

      Delete
    7. There isn't a book that teaches CSS in Blogger, at least none that I aware of. It takes lots of practice as well as trials and errors. I'd point you to this website for starters: www.w3schools.com/css/

      Developer's tools like Firebug could come in handy. All the best :)

      Delete
    8. oh, my god!
      firebug is awesome. thank you!

      Delete
  18. I have used the following CSS to make "post title" larger.

    h1.title a{
    font-size: 56px;
    }

    How can I make the text font bigger too?

    ReplyDelete
  19. Dear Yogaratnam N:

    I have found the solution to change text to bigger font. I appreciated all the information about CSSs for Blogger Dynamic View you posted here. Thanks.

    Here is my blog, http://pfge-pfge.blogspot.com/

    ReplyDelete
  20. Thats great pfge. Sorry couldnt answer you earlier. Do let me know if anything else comes up :)

    Cheers,
    Yoga.

    ReplyDelete
  21. In Dynamic Views I tried to extrapolate your Page Title color change instructions above to get the page title to align flush left with the post text. Blogger only offers it centered. FYI am only using the Sidebar view. (Thanks for showing me how to get rid of the links to the other views!!) . I tried:

    h1.title a{
    text-align: left;
    }

    That didn't work. Nor did "text-indent: 0px" or "margin-left: 0px" or "padding-left: 0px"
    Any suggestions?

    Peter

    ReplyDelete
    Replies
    1. Hi Peter,

      This should work:

      .article .article-header .title {
      text-align: left !important;
      }

      Click on 'Apply to Blog' and view the actual change on your blog. Cheers :)

      Delete
  22. What about adding the post title to the comments page?

    ReplyDelete
    Replies
    1. I'm not sure if I'm following. What comments page?

      Delete
  23. hi for my website http://www.malaysiacuisine.com/ is there anyway that i could justify all my postings in the mainpage as it look messy and i wanna clean it up

    ReplyDelete
    Replies
    1. Damn I miss Malaysian food! Yes there is a way to justify your post summaries. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .entry-summary{
      text-align: justify !important;
      }

      Delete
  24. Yoga, why is it that when I hover over my blog post links they go transparent or invisible: www.ramyhanna.com

    How do I add CSS to fix this?

    Thanks, you're amazing with this stuff!

    ReplyDelete
    Replies
    1. Hi Ramy,

      Thanks for spotting this. It's a bug from one of my tutorials. This is what you need to do. Go to your CSS, find this:

      .header-bar span.title a h1, .ss, .title a:hover{

      and change it to:

      .header-bar span.title a h1, .ss, #header .title a:hover{

      Cheers :)

      Delete
  25. I've reading your blog's posts all day long, trying to avoid to disturb you, but I just could not find it.
    So...
    how can I change the font color in the dynamic views sidebar. I'm talking about the actual sidebar on the left not the right one (for the gadgers).
    Thank you in advance!

    ReplyDelete
    Replies
    1. I've Yanni,

      I've replied you in the forum. Cheers :)

      Delete
  26. i want to change the blog titles underlying link color..plz help..thanx

    ReplyDelete
    Replies
    1. Are you referring to the link that appears when I hover over your blog title?

      Delete
  27. I am using bloggers template. I was trying to change post title color but couldn't find a way out. I have searched over the web, referred many website but didn't got solution. But when reading your post got i idea and added this code color: #732f40; below h2.post-title, .comments h4 { and problem solved. Thanks for posting this great info.

    ReplyDelete
    Replies
    1. That's excellent Shoeb! Glad you got it figured :D

      Delete
  28. hello my blog titles are not showing up in blogger, can you please have a look and help me out http://netdoz.blogspot.com

    Thank you

    ReplyDelete
    Replies
    1. Hey bro have you got it sorted? I can see your title showing just fine.

      Delete
  29. Hi I would like to ask for help in repositioning my thumbnail img on my mobile template. I want it larger and at the center.

    ReplyDelete
    Replies
    1. Not sure if this can be done. But I'll give it a look anyways. What's your blog's address?

      Delete
  30. In Magazine View all of a sudden my posts are running into the ribbon date? What is the code to scoot the post title back over?

    ReplyDelete
    Replies
    1. Hello Laura,

      Something is broken within Blogger. Feel free to join the official discussion here:

      https://productforums.google.com/forum/?utm_medium=email&utm_source=footer#!topic/blogger/f5kTwuW8d6o

      Delete

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