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;
}