Widget fonts and page color blocks

Support Area Forums Foxy Widget fonts and page color blocks

Viewing 3 posts - 1 through 3 (of 3 total)
URL to the page in question:
  • Author
    Posts
  • #5084
    Maureen Schreyer
    Participant

    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.

    #5117
    Bill Robbins
    Moderator

    Maureen,

    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.

    #5200
    Giulio Sciorio
    Participant

    I’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/

Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Widget fonts and page color blocks’ is closed to new replies.