- Go to the Page Elements
- Click the Edit option on the Gadget you wish to style and Locate The GadgetID.
- Go to Design-->Template Designer--> Advanced-->Add CSS-->Input One Of the Codes Below.
Depending on what your trying to style you will need a different one of these codes.
Gadget:
#GadgetID {
Your styles CSS Styles
}
Gadget Headings:Your styles CSS Styles
}
#GadgetID h2 {
Your styles CSS Styles
}
Your headings might not be h2 but generally with most blog template this is the case.Your styles CSS Styles
}
Gadget Links:
#GadgetID a:link {
Your CSS Styles
}
#GadgetID a:visited {
Your CSS Styles
{
#GadgetID# a:hover {
Your CSS Styles
}
Replace the Red text with the Unique Gadget ID.Your CSS Styles
}
#GadgetID a:visited {
Your CSS Styles
{
#GadgetID# a:hover {
Your CSS Styles
}
Replace the Blue text with the styles you wish to change.
The possibility's of the CSS styles are endless. I will go over just a few below.
Font Color:
color: #000000;
Font Type:font-family: YOUR FONT;
Background color:background-color: #000000;
Background Image:background-image:url('YOUR IMAGE');
Borders:border-style: YOUR BORDER TYPE;
border-width: 1px;
Just change the Red text to your liking.border-width: 1px;
I cant go over everything but you can look through this blog for more help with these individual styles or you can look at this great site below.
W3Schools
Thanks for the help!
ReplyDeleteHow can I change the background color of the gadget?
ReplyDeleteDepends on what gadget your trying to change. With most gadget you can use this syntax below.
ReplyDelete#Gadget# {
background-color: #000000;
}
#LinkList1# {background-color: #000000;} this is not working for me pls help
ReplyDeleteIt needs to look like this.
ReplyDelete#LinkList1 {background-color: #000000;}
#PageList1 {font-family: 'Miso';}
ReplyDeleteThis isn't working for me either. Downloaded the font from Kernest: MISO Light
I am using Windows 7 with Firefox and Miso font works fine without downloading any packages. You need to make sure you installed the font package correctly for this to work with older Windows. A way to check this is to try using Miso font in Paint or Word Pad to see if the option is available. If you do not see this font package on one of them then its not installed properly.
ReplyDeleteIs there a way to change the bacground for all gadgets in a single code / CSS ?
ReplyDeleteYes you can with one of these codes below.
ReplyDeleteFor just sidebar gadgets use this code.
.sidebar .widget {
Or for all widgets use...
.widget {
This may not work on 3rd party templates.
Thanks for this post. Between this and the ones on the Blogger help pages I was able to get the desired look on my blog page using the border and pad code in the CSS section.
ReplyDeleteI'm trying to change the background color for my side gadgets, that are presently the same color as the blog background, to white. But I have absolutely no clue how to do so. Please help?
ReplyDeleteDepending on what template your using the code to color the sidebar may change. I will need to see your template in order to give a accurate answer.
ReplyDeleteHi - your posts have been so helpful to me - I added a dotted border around my entire blog with your help but I want to add a dotted line underneath each sidebar title. Any insight?
ReplyDeleteMy blog is seventeenthandirving.blogspot.com and is using the simple template.
Seems like you figured it out.
ReplyDeleteI just left a comment, but I figured out how to accomplish what I set out to do ... just wanted to let you know, so you don't waste your time. I'll be following your blog for other neat ideas.
ReplyDeleteThe thing is, I only want to change the body of the widget without affecting the title of the widget. I put it like this
ReplyDelete#profile1 {
background:url(http://2.bp.blogspot.com/-3i3a66MBjdM/T2FjPYdWgsI/AAAAAAAAA4k/hd3AapxKaoY/s1600/transparent+test+50%25.png);
padding-left:15px;
font:14px Arial;
}
I want it to be synchronized just like the other widget please help me.
p/s: my blog: http://immaculate-world.blogspot.com/