Help with Css in Widget Box?

michelledawnom · Member · Jan 24, 2015 at 6:34 pm
Copy link

Add topic to favorites
Hi :)

I want to change the font style (definitely size, possibly the type of font as well…)in a widget text box so it doesn’t look the same as the text in the main content of my site… is there a way to do that and would I put the css for it right in the widget box itself?

Thanks!

The blog I need help with is: (visible only to logged in users)
laura960 · Member · Jan 24, 2015 at 7:12 pm
Copy link
I have the same question – how to decrease font size in widget boxes, such as footer! Thanks!
staff-happychia · Staff · Jan 24, 2015 at 9:12 pm
Copy link
@michelledawnom,

Please try this style on your blog:
```
div#secondary .widget{
   font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size:15px;
}
```
@laura960, your selector (div#secondary .widget) will be different although the properties (font-family and font-size) can be reused. Please add a text widget some text so we can figure the selector.
timethief · Member · Jan 24, 2015 at 9:37 pm
Copy link
@laura9060
All CSS editing is theme specific editing. No your question is not the same if you are referring https://caribbeanjourney.wordpress.com/

If you are referring to another wordpress.com hosted blog wearing the Sela theme then post the URL here.

For any other theme on a WordPress.com hosted blog that you have a custom design upgrade on start a new thread please and be sure to include the URL of the blog https://en.forums.wordpress.com/forum/css-customization
thesacredpath · Member · Jan 25, 2015 at 4:54 am
Copy link
@laura960, I see Sela on this site for you: http://themangoseed.com.

To decrease the font size in the footer widgets area, go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.
```
.footer-widget-area .widget {
    font-size: 75%;
}
```
You can adjust the size as desired.
michelledawnom · Member · Jan 25, 2015 at 2:58 pm
Copy link
staff-happychia – that worked perfectly! Thank you I was able to change the size and font type, but for some reason I can’t get the color to change?
michelledawnom · Member · Jan 25, 2015 at 3:00 pm
Copy link
NM I figured it out. Thanks again!!
laura960 · Member · Jan 26, 2015 at 4:05 pm
Copy link
Yup – I posted the wrong blog – I was asking about http://www.themangoseed.com – but trying the CSS from thesacredpath right now!
laura960 · Member · Jan 26, 2015 at 4:06 pm
Copy link
And that worked! Thanks! What about centering the text in the footer widget?
staff-happychia · Staff · Jan 26, 2015 at 5:45 pm
Copy link
@laura960

the twitter and facebook icons in the footer are already centered. The section containing them has equal margin on both the sides.
laura960 · Member · Jan 26, 2015 at 5:49 pm
Copy link
Sorry – I am referring to the footer widget just above the social icon menu – right now on my site it is just a few sentences – but how do I center them?
staff-happychia · Staff · Jan 26, 2015 at 5:57 pm
Copy link
Oh that one. Okay,

Let’s modify the custom CSS to include text align attribute and set its value to center :-)
```
.footer-widget-area .widget{
font-size:75%;
text-align: center;
}
```

No items found.