Widget fonts and page color blocks
Support Area › Forums › Foxy › Widget fonts and page color blocks
- This topic has 2 replies, 3 voices, and was last updated 12 years, 1 month ago by Giulio Sciorio.
-
AuthorPosts
-
February 16, 2012 at 01:34 #5084Maureen SchreyerParticipant
1. How do I change the fonts for the widgets? I’ve successfully changed the logo font but I don’t know how to edit the widget fonts.
2. Is there a way to change the color of the background “boxes” on each page (where text is) – currently an overprint “dark grey” – I’d like to change ’em to a much lighter color to use with a very light background image and change text to black.
Thanks in advance.
February 18, 2012 at 18:33 #5117Bill RobbinsModeratorMaureen,
You can change those items. Let me see if I can help you out.
1) Widget Fonts: To change them, go to the theme options page and select the “styling” tab.
2) Select “yes” from the drop down at the top to “include custom styling.”
3) Scroll down to the very bottom until you see a box for “Custom CSS.”
4) Paste this into the box:.widget, .widget p, .widget li { color: #ccc; }
5) Update your settings.
That will change most widget text to a silver color. You can use that selector to affect other changes like font choice and so on.
Change boxes to a lighter color: This can be done too. Back in the Custom CSS box from the answer above, paste this:
header, .page-content, aside.sidebar .widget, aside.sidebar nav a, aside.sidebar nav a:visited { background-color: rgba(221,221,221,0.84); color: #000; }
That will change the color to a light gray with black text.
The only tricky part of that is for Internet Explorer 7 & 8, they don’t support semi-transparent background colors, so for those browsers, a image is actually used. To change that, you’ll either need to replace the small file in the theme inside the images folder called “header-background.png” or you’ll need to change the background to a solid color for Internet Explorer.
To change the background to a solid color, follow these steps:
1) Go to the appearance section and select edit to open up the theme editor.
2) From the list of files on your right, choose ie.css
3) Replace everything in the file with this:.page-content, .staff-list article, aside.sidebar .widget,header, aside.sidebar nav a, aside.sidebar nav a:visited, .current-menu-parent ul.sub-menu li a { background-color: #ccc; } aside.sidebar nav .current-menu-item a, aside.sidebar nav a:hover, .current-menu-parent ul.sub-menu li a:hover { background-color: #971012; background-image: none; }
4) Save your changes
That will change the color in IE 7 & 8 to a light gray that isn’t transparent.
If you have any questions, let me know.
February 27, 2012 at 17:18 #5200Giulio SciorioParticipantI’m trying to get the text in the body of the posts to be black and the side bar header text (recent posts, categories, about this blog..) to go white but it seems with this code when I adjust the color for the text in the body the text for side bar header also changes.
Also the links next to the date in each post are white and I don’t know how to change them.
Probably didn’t explane that right but heres the code –
header,
.page-content,
aside.sidebar .widget,
aside.sidebar nav a,
aside.sidebar nav a:visited {
background-color: #ffffff;
color: #000000;
}body {background-color: #ffffff;}
The URL is http://blog.giuliosciorio.com/
-
AuthorPosts
- The topic ‘Widget fonts and page color blocks’ is closed to new replies.