Southern Listeners

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

Saturday, December 29, 2012

Changing Comment Bubble Color in Blogger Dynamic Views

Before
After

Here's a quick one. The bubble comments are set to a greyish color by default in all Dynamic View templates, and there isn't an easy way to change this color in the Template Designer. But here's how you can change it using some CSS..

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line } --> Apply to Blog.
.bubble.comments-count{
background-color: red !important;
border-color: red !important;
color: yellow !important;
}
.bubble .bubble-tail, .bubble.empty .bubble-tail:after, .ss{
border-color: red transparent transparent !important;
}
To customize the color, change the word 'red' in Lines 2, 3 and 7 above to another color (eg: black, white, blue, etc). To change the bubble text color, change the word 'yellow' in Line 4 above. For specific color options, you can replace the word 'red' with specific color hex code. You can generate specific hex code here.

Important note: At the time of this writing, there's a bug in the Template Designer that isn't letting some users to save their changes. If you're affected, try using IE to save your changes.

48 comments:

  1. Your blogger tricks are awesome. I have applied some of your tricks on my blog (comment bubble color, date on sidebar dynamic template & non-clickable author name). Check it out - http://www.techscratched.com

    Keep up the great work Yoga!!

    ReplyDelete
  2. I can not save, use Chrome. How do I?

    thanks

    ReplyDelete
    Replies
    1. Hi Francesco,

      Try using IE to save your changes.

      Delete
  3. Once again, thank you very much Mr. Yoga :)

    ReplyDelete
  4. I dont know if you have the answer, but I wanted to ask, do you think the dynamic views will ever allow to have comments on static pages?

    thanks

    ReplyDelete
    Replies
    1. I know for a fact that it used to be available, but a recent development conflict might have disabled the option. That said, I'm sure it is just a matter of time before they enable it again.

      Delete
  5. Hello, Mr. Yoga! I need your help. How can I change my default blog font to a font that I can't find in regular settings? For example, I want my entire blog to have Century Gothic font, and it's nowhere on the settings list. Anything that I can do?

    ReplyDelete
    Replies
    1. Hi Jelena,

      We can only add Google Web Fonts at the moment. Check if the font that you're after is a Google Web Font here --> www.google.com/webfonts

      Delete
    2. I tried doing it, but something won't work. Could you explain a bit more? :)

      Delete
    3. Hi Jelena,

      Sorry for the delayed respond. It'll be easier if we could choose an example and work on it, instead of going on a generic note.

      Cheers :)

      Delete
  6. Hi !
    But how to do the bubble? I dont have any bubble for "Post a comment!(in the footer) Or as Sara have, the date - day and month when posting. Is it a special template for that, or can it be fixed with a smart code.
    Regards Christer

    ReplyDelete
    Replies
    1. Hi Christer,

      You need to be using one of the dynamic view templates for this comment bubble to appear. There are 7 dynamic view templates to choose from. To change to a Dynamic View template, first, backup your current template by going to Dashboard - Template - Backup/Restore - Download Full Template. Next, go to Dashboard - Template - scroll down a little to choose one of the Dynamic View templates (the first row of templates).

      Delete
  7. Compliments of the season Yoga, please having trouble with the way my post appear.there are gaps between my daily post and which was not originally so, it was usually just a line separating one post from the other but now it seems like a gap is left to differentiate my yesterday posts with that of today. Would like to also remove d line below sidebar gadgets title thank you.

    http://trendevolution.blogspot.com

    ReplyDelete
    Replies
    1. Hi Abdulmalik,

      I've replied you here regarding the lines below your sidebar gadget titles. As for the gap between your posts, try this:

      .date-outer{
      margin-top: 0px !important;
      margin-bottom: -2px !important;
      }

      Cheers :)

      Delete
    2. Forgot to attach the link to your other comment:
      http://www.southernspeakers.net/2012/11/adding-separators-vertical-lines.html?showComment=1357254660387#c3481071781608401666

      Delete
  8. Your instructions are NEVER clear.This website is just a messy piece of shit.

    ReplyDelete
    Replies
    1. Or maybe you're just too stupid to understand it. That would explain why you're commenting on a post meant for Dynamic View templates when you're obviously using some piece of crap for your blog. I bet you don't even know what a Dynamic View template is. Bottom line - go fuck yourself.

      Delete
  9. Heya.

    Something is driving me mad, at the Dynamic View Sidebar before the comments wont "auto-open", only clicking. Now it auto-opens the comments when we scroll down enough.

    Can I request if you know how to make it like it was? Open only when click in comments?

    ReplyDelete
    Replies
    1. Hi Max,

      I can understand your pain. Blogger is constantly changing stuffs, and unfortunately, we have very little control over it - especially when it comes to Dynamic View templates. I've tried to see if there's any way to revert back to the previous settings, but I couldn't see a way forward. Looks like we're stuck with this setting until they make it optional for us to readily show our comment (which I do expect to happen some time in the future..)

      Delete
    2. For me the option just for add Facebook Comments instead of thoose would be enough, even with HTML now editable, I don't know if it is possible do such thing.

      Delete
    3. The HTML is editable, yes. But there's a catch. Dynamic View templates run mostly from scripts. These scripts are hosted at Google server, and they are not editable by users. You will only see reference to these scripts in your Edit HTML box. Essentially, the Edit HTML box for Dynamic Template is useless. You need to do a lottttttttt of work just to add a simple image and button, since you can't do it the HTML way.. In other words, you can't just add something to DV templates easily. If you wanna add something to the template, you need to figure out a way how you can add it to the already running script (without editing the native script since it is hosted at Google), and make them both co-exist.

      Delete
    4. Hi! I absolutely LOVE all your tutorials. I have a question. I implemented a few of them and it seems that my ads in google chrome (some of them, which now seem to be to large) are not showing up on the right side of my dynamic views. It seems to be working in IE. Is this a google adsense glitch? Or is this because I changed things around on dynamic views. Any help would be so appreciated. Thanks!

      Delete
    5. Please ignore my last question. I figured it out. ;/

      Delete
    6. Glad you got it figured! :)

      Delete
    7. I'm like Max Lexandre..
      The commment form that automatically opens, tsssss.... !

      Well, I hope it will change soon !

      Hi Yoga, and have a nice new year!

      Delete
    8. Let's keep our fingers crossed.. Hope you're having a blasting new year too! :D

      Delete
    9. Hi Yoga !
      The problem with the comment form seems now to be resolved.

      Cheers.

      Delete
    10. That's great Valerie, thanks for the update! :)

      Delete
  10. Hello Yoga.
    I recently just changed into the Dynamic View and made a Page dedicated to my chatbox.
    But there seems to be a white "border" around it and I was wondering how to remove that.

    picture : https://blogger-a-googleproductforums-com.googlegroups.com/attach/8d8b53954515d703/Untitled.png?view=1&part=2

    ReplyDelete
    Replies
    1. Hi Suzuki,

      I've replied you here:
      https://productforums.google.com/forum/#!msg/blogger/qVxH9bZKbIw/t1Yvmu91xhsJ

      Sorry it took me so long..

      Cheers :)

      Delete
  11. Aloha Mr Awesome Yoga,

    What a fabulous service you provide here! This must take an incredible amount of your time and effort.

    I don't know anything about any of this code stuff, it's like magic to me. And yet... even I was able to customize my "blog". And believe me, that's saying something. Mahalo for making it understandable for us regular folks.

    You are THE MAN!

    ReplyDelete
    Replies
    1. Hi Brian,

      Sorry for delayed reply. And thanks for taking out the time to say something nice here. Really appreciate it. You've made my day! Thanks!

      Cheers :)

      Delete
    2. You're quite welcome Mr.Yoga

      I hate to bother you, but let me ask you a question about my Flipcard View blog. When you go to the links in the upper left, there is a nice transition between them. Then, when you click... home... it first goes to the homepage, but then it goes to a blank white blogger page, and then, all the pictures fly back in again. I wonder if you have a way to fix that so it just goes back to the static homepage, (maybe even with that nice transition effect :)).

      If you don't already have the fix in your magic bag of code tricks, don't waste your time, it's really an insignificant problem.

      Delete
    3. Hi Brian,

      I'm afraid there isn't anything we can do about it. These templates run from scripts hosted at Google, and the script is loaded each time the template is viewed. To date, we don't have a way to resume a script from the last point left - which is why it is restarted each time we click the main page.

      Cheers :)

      Delete
  12. Hi Yoga,

    I really liked all your tutorials about dynamic blogger template. It was a great help to customize mine, really thank you :)

    I'm probing this ccs to change comment bubble color, but it only changes the tail:

    http://vdoll-shoppingmall-int.blogspot.com.es/

    This is the link of my blog, I hope you can help me :(

    Thank you for your great job with tutorials ^^

    Ventura ♥

    ReplyDelete
  13. Hi Yoga :)

    I just finished to modify your css for make it work on my blog.

    I Only add a ".Bubble" before the ".comments-count" in line 1; and it works :)

    Like this:
    _________________________

    .bubble.comments-count,.bubble{
    background-color: red !important;
    border-color: red !important;
    }
    .bubble .bubble-tail, .bubble.empty .bubble-tail:after, .ss{
    border-color: red transparent transparent !important;
    }
    _______________________

    Thank you very much for your grat job ;)

    ReplyDelete
    Replies
    1. Hi Ventura,

      Glad you got it figured, kudos!

      Cheers :)

      Delete
  14. Hi, thanks for your help to all of us who used dynamic blog templates. I have one question - I would like see whole name of the post on home page for timeslide template, thanks for advice, Marek

    ReplyDelete
    Replies
    1. Hi Marek,

      Try this:

      .timeslide #main .title a, .ss{
      white-space: normal !important;
      }

      Cheers..

      Delete
  15. Hi, I followed your instructions as best as I could! Your background post helped me tremendously! If you look at my blog delilahreviews.blogspot.com and see where I have gone wrong with my comment section? I want the whole section #272626 apart from the comments box, which is fine white. Thanks! Del x

    ReplyDelete
    Replies
    1. Hi Delilah,

      Here, use this:


      .blogger-comments .comments-content, .blogger-comments .comments-content .comment-replies{
      background-color: #272626 !important;
      color: white !important;
      }
      .blogger-comments .comments-content .user, .blogger-comments .comments-content .user a{
      color: yellow !important;
      }

      Change 'white' and 'yellow' as you like. Cheers :)

      Delete
  16. Hi Yoga , I have just finished "read more" part and implemented. Step by step I am trying to apply your other instructions here. Thanks a lot for your effort.
    Now I am trying to find how I can change comment bubble appearance on Magazine view. I want Comment Number be visible on the post. Is it possible?

    ReplyDelete
    Replies
    1. Hi Galena,

      Are you referring to the front page of the Magazine view, or the page that appears when you click on a post (post page, as we call it) ?

      Delete

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