Southern Listeners

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

Saturday, March 10, 2012

Change Gadget Color in Blogger Dynamic Views

Before
After
Still psyched about Dynamic View's gadget features? Well, here's a way to further personalize the gadget to suit your blog, by changing its color. Currently, the gadget's color is set to black by default, with white font. In this post, I'll show you how you can change your gadget's background color, and the font color as well.

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.
.gadget-icons, .gadget-title, .gadget-content, #gadget-dock, .gadget-menu, .ss{
background: red !important;
color: yellow !important;
}
The 'background' attribute represents the main background color, while the 'color' attribute represents the gadget's font color. For more personalization options, see the 'Extras' box below.

Extras

1) If you'd like to use a more personalised color, use a hex code instead. You can generate hex code based on your preferred color by clicking here. Once you have your hex code, just place it in the code as such
.gadget-icons, .gadget-title, .gadget-content, .ss {
background: #FF2B2B !important;
color: #FCD927 !important;
}
2) If you'd like to adjust the gadget's link color as well, add the following code to your CSS:
.gadget-icons a, .gadget-title a, .gadget-content a, .ss a{
color: white !important;
}
3) The gadget is made of three different blocks. You can give individual colors to each one of them.


To change the main gadget color (Red in the screenshot above), use the following CSS:
.gadget-icons, .ss {
background: red !important;
color: yellow !important;
}
To change the color of the pop-out gadget box (White in the screenshot above), use the following CSS:
.gadget-content, .ss {
background: white !important;
color: black !important;
}
And to change the title field color of the pop-out gadget box (Black in the screenshot above), use the following CSS:
.gadget-title, .ss {
background: black !important;
color: white !important;
}

68 comments:

  1. Thanks Yoboy, this is working great on my new blog! http://coolhandgraphics.blogspot.com/

    Is it possible to place an image over the gadget buttons / icons - or some way to replace the icons(I know, never happy!), thanks again!

    ReplyDelete
    Replies
    1. I do know a way. In fact, its large enough to into a separate post, that I'm planning to publish next weekend. If you can't wait, please contact me in private :)

      Delete
    2. Yoboy's CSS for that in action can be seen at my blog. It is a long bit of CSS though and I had to rearrange it a lot since I have moved my gadgets around. A tutorial for this will be awesome (though I will feel less special :p)

      Delete
    3. A tutorial is coming alright, it is in my queue of things to post about. Yours will still be special since you're using custom images :)

      Delete
    4. Yey for being special... I like feeling special :D

      Delete
  2. Love Hannah's image replacements for the gadgets icons!! Look forward to the next tutorial!

    ReplyDelete
  3. Is there a way to keep the gadget bar from hiding and staying out permanently?

    ReplyDelete
    Replies
    1. Oh yes, add this to your css:

      #gadget-dock{
      position: fixed !important;
      right: 0px !important;
      }

      Cheers..

      Delete
    2. Thanks Yoga! That did it!

      Wondering if it might be possible to set the background to transparent on the gadget bar and the horizontal menu bar.

      Delete
    3. Yo Bob,

      Yeah it is possible. Add this to your css:

      #gadget-dock, .gadget-icons, .gadget-title, .gadget-content, .gadget-container, .ss {
      background: transparent !important;
      color: #FCD927 !important;
      }

      For the horizontal menu, you can set it to transparent by going to Template Designer - Advanced - Header Bar - Change its color to transparent.

      Delete
    4. Something has changed and the gadget bar background is no longer transparent at http://www.kansasbob.com. Any ideas? Thanks!

      Delete
    5. Hi Bob,

      Thanks for informing. I've updated the code above. Use this in your case:

      .gadget-icons, .gadget-title, .gadget-content, #gadget-dock, .gadget-menu, .ss{
      background: transparent !important;
      }

      Cheers :)

      Delete
    6. Worked like a charm! Thanks Yoboy for the help!

      Delete
  4. Sorry to say but I copy pasted this into the CSS and nothing changed.. Any idea?

    ReplyDelete
    Replies
    1. Did you hit on 'Apply to Blog' and check the changes on your actual blog or were you expecting to see a change in Template Designer's live box preview? Because the latter is broken at the moment.

      Delete
    2. Ah no, I just looked at the preview box below. Will try it out on the blog itself :)
      Thx

      Delete
    3. Ok it works now! Sadly the text inside my archive is light blue to read, so any way to change that too?

      Delete
    4. Hi Phil,

      Use the code under 'Extra' item 2 to change the color of your links :)

      Delete
  5. Thanks very much for your tips - as a newbie i find it a lifesaver.
    1 basic question please - what can i use or read to see the options/containers/elements available?
    e.g. how do i see there is a '.gadget-title' and one of the items i can customise via it is 'background' ?

    Thank you!

    ReplyDelete
    Replies
    1. You need developer's tools. If you're using Firefox11, press Ctrl+Shift+i. For IE9, press F12. I personally prefer a third party tool called Firebug.

      Delete
  6. hi! how can i fix this Gadget (sidebar) on my blog..this sidebar always goes away after few seconds...i want it the whole time on my blog. http://www.timelinefashion.blogspot.com/

    ReplyDelete
  7. hey bro.. this is cool place to play with dynamixzzz..
    And is there any way to hide link with different views drop down menu??

    see my bLOG http://kandypromo.com/

    ReplyDelete
  8. Hi Yoboy, thanks so much for putting all this together - it's really very helpful. Is there any way of getting the title field colour to change when you click on it, as it does in its default form? Similarly, can you change the colour of the icons themselves - both the starting colour and the colour they change to when clicked?

    ReplyDelete
    Replies
    1. Hi Adam,

      1) use this instead:

      .gadget-icons, #gadget-dock, .gadget-menu, .ss{
      background: red !important;
      color: yellow !important;
      }
      .gadget-item.gadget-selected .gadget-menu .gadget-icons, .gadget-title, .gadget-content{
      background: yellow !important;
      color: black !important;
      }

      2) Nope, you can't change the color of the icons, but you can replace the icon with your own image (one image for both the starting and the one when they clicked on):

      http://www.southernspeakers.net/2012/03/change-gadget-icons-in-blogger-dynamic.html

      Cheers :)

      Delete
    2. Thanks so much. Didn't quite work, but you steered me on the path:

      .gadget-icons, .ss{
      background: #222244 !important;
      color: white !important;
      }

      .gadget-title, .ss {
      background: #222244 !important;
      color: white !important;
      cursor: pointer !important;
      }

      .gadget-item.gadget-selected .gadget-icons{
      background: white !important;
      color: #222244 !important;
      cursor: default !important;
      }

      .gadget-item.gadget-selected .gadget-title{
      background: white !important;
      color: inherit !important;
      cursor: default !important;
      }

      .gadget-content, .ss {
      cursor: default !important;
      }

      So thanks for getting me there! Changed the cursors because they were annoying me :)

      Delete
    3. Sorry Yoga, but I'm struggling with changing the icons. I have

      .gadget-item.gadget-selected .gadget-icons img{
      display: none !important;
      }

      to get rid of them, but then where does .gadget-item.gadget-selected go in

      #gadget-dock>div:nth-of-type(1) .gadget-icons{
      background: url(img) no-repeat center !important;
      }

      #gadget-dock>div:nth-of-type(2) .gadget-icons{
      background: url(img) no-repeat center !important;
      }

      etc?

      Delete
    4. Hi Adam,

      I don't see a way to assign separate images for the default and selected icons. Sorry bout that.

      P/S: AVB to Spurs.. Lol.. Good luck..

      Cheers.

      Delete
    5. Haha, I was hoping to you wouldn't think to actually check on the blog... Theoretically, should it be possible, or would I be chasing a lost cause if I kept trying to find away? How about deleting the HTML and rebuilding the gadget dock from scratch?

      Delete
    6. This is what I'm seeing. By default, the icon is not powered up with CSS. Rather, Blogger's script uses 'img' html tag to load the icon - thus making it possible to have two separate icons. Since we don't have access to the script, we could only use CSS to override the icons. Now here's the tricky part. Instead of overriding the 'img' element itself, I had to override its parent element, which is a 'div' element. Reason? The 'img' element is too small and centered, and it's dynamically loaded, making it very difficult to be overwritten with static CSS. You might have guessed the effect of it. Since the CSS background is applied to the parent 'div' tag, it isn't possible to uniquely assign two separate images to its child elements. In other words, with my limited CSS skills, I don't see a way to assign two separate icons for the gadgets dynamically at the moment. Sorry mate.

      Delete
    7. Ah, okay. Thanks for trying :)

      Delete
  9. Hi, i don´t remember how i can set the gadget dock for see my page list, i used your advise to my page, but now, i can´t remember the css for this thing, can you tell me?
    Regards!
    mi site is www.tecnologiaunla.com.ar

    ReplyDelete
    Replies
    1. Hi Catedra,

      I'm not sure if I'm following, but if you wanna show your pages links on your Dynamic View gadget dock, use the Linklist gadget. You need to add your links manually.

      Cheers :)

      Delete
  10. Thanks for this, any ideas why after changing my gadget box colour and text to white, the blogger profile 'write up' still remains it's default colour grey, menus are white text, but not text beneath them ?

    ReplyDelete
    Replies
    1. Hi Anon.. Let me have a look.. What's your blog's address?

      Delete
  11. Your site has been an amazing source of help to me! Just one small question. In my gadget holder, my blog archive titles seem to be "invisible" and I can't figure out how to get them to be white. blog = numberblog.com

    ReplyDelete
    Replies
    1. Hi Dreg,

      Tried accessing your blog --> http://numberblog.com/

      But I could just see a tag that says 'Coming Soon!'.. What's up?

      Cheers :)

      Delete
    2. So sorry, here is correct link. http://numberu.blogspot.com/

      Delete
    3. Hi Dreg,

      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.

      #gadget-dock a{
      color: white !important;
      }

      Cheers :)

      Delete
    4. Perfect, worked like a charm! I appreciate your help, Thank you!!!!

      Delete
  12. How to change background for dynamic views using Background which is present after template?????

    ReplyDelete
    Replies
    1. Pretty straight forward. Go to Template Designer - Background - Choose a background - Apply to Blog. If it is working for you, it is possible that you might have been affected by the new bug that is lurking around there few days.

      https://productforums.google.com/forum/#!msg/blogger/S_uVwRQQrOY/56O_PXMQ084J

      Delete
  13. Hi Yoga! me here again. I'd like to ask you why is it that the gadget dock seems to show only a few number of gadgets, I added a couple more and they don`t appear... One of them at least is very important to me, it allows to share content on facebook. I need this. In fact, now that I think, it would be much better if I could change the "like" button that comes at the end of the posts to "share it". Is it possible?
    Thanks in advance as always! :)

    ReplyDelete
    Replies
    1. I assume you've used the HTML/Javascript gadget to add it. Unfortunately, this gadget isn't supported in Dynamic View templates yet. And nope, we can't make structural change as in changing the 'like' buttons. At least not yet.

      Cheers..

      Delete
  14. Ah, I hope they change it soon... Thank you anyway, Yoga :)

    ReplyDelete
  15. Thanks! Helped a lot.. but how to change the gadget divider color?

    ReplyDelete
    Replies
    1. Try this:

      .gadget-menu{
      border-color: yellow !important;
      }

      Cheers..

      Delete
  16. hi yoboy, how to remove Subcribe(rss-feed) widget in dynamic view

    ReplyDelete
    Replies
    1. Hi Anon,

      About time! Here you go:

      http://www.southernspeakers.net/2013/08/removing-subscribe-gadget-from-bloggers.html

      Cheers and God bless :)

      Delete
  17. I just whant to thank you again for all your help.

    Salut

    ReplyDelete
  18. Hy, just one small question. How can you change color of each box individually, for example: Labels in red, but rss feed in blue

    ReplyDelete
    Replies
    1. Hello.. This should work:

      #gadget-dock>div:nth-of-type(1) .gadget-icons{
      background: yellow !important;
      }

      #gadget-dock>div:nth-of-type(2) .gadget-icons{
      color: white !important;
      }

      #gadget-dock>div:nth-of-type(3) .gadget-icons{
      background: blue !important;
      }

      #gadget-dock>div:nth-of-type(4) .gadget-icons{
      background: red !important;
      }

      Delete
    2. Can you give my a help how to make this moving line at the top ------> http://todosobrecamisetas.blogspot.com/

      Delete
    3. This is a third-party add-on. Cannot be done in Dynamic templates, unfortunately.

      Delete
  19. Is there any way of changing or using another RSS feed other than the Blogger feed on the Dynamic-View

    ReplyDelete
    Replies
    1. I'm afraid this is not possible, sorry.

      Delete
  20. hi! is there a way to add in my profile widget etc to a blog that is on the dynamic flipcard view? my blog is http://thebalcony2015.blogspot.com.au/ and it's for a school assignment :/

    ReplyDelete
    Replies
    1. Hi there! The flipcard gadget does support profile gadget. Just add it like how you would on any other template (Dashboard - Layout - Add a Gadget - Profile)

      Delete
  21. I've been struggling for the past couple of hours trying to get the popout link hover color changed on a linklist gadget. Please help!

    ReplyDelete
    Replies
    1. Hey do you still need help on this? What's your blog's address?

      Delete
  22. hi Yoga,
    thanks for your helpful and informative site. Need your help on changing the font in main gadget/side bar? and how to make the label connected with the top header (where there is a written sign : magazine, snapshot, etc?) Thank you for your help.

    ReplyDelete
  23. hi Yoga,
    could you pls help me to change the font at the main gadget/side bar? Thanks a lot.

    ReplyDelete
    Replies
    1. Hi Winda, could you share your blog's URL?

      Delete

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