Need help? Check out our Support site, then


Forever theme: change footer color

  1. Hi,

    I have the CSS upgrade and my site uses the Forever theme. I'd like to:

    1. Change the color of the footer from black to white.
    2. Change the color of the font from white to black.
    3. Shrink the footer font size.
    4. I want to keep the WordPress and theme credits, but alter the wording a bit. I currently have it reading
    "All content 0a9 2013 H. Elaine Cheong, DDS. All rights reserved. Blog at WordPress.com. Theme: Customized Forever by Automattic."
    but would like to shorten it to
    "All content 0a9 2013 H. Elaine Cheong, DDS. All rights reserved. Theme design by Automattic, powered by WordPress.com." and still link to the Automattic website.

    Thanks very much!
    My site is helainecheongdds.wordpress.com

    The blog I need help with is helainecheongdds.wordpress.com.

    The blog I need help with is helainecheongdds.wordpress.com.

  2. 1. Change the color of the footer from black to white.

    2. Change the color of the font from white to black.

    I found that you figured this one out using the following custom CSS:

    #colophon {
    	color: gray;
    	background:#fff
    }
    #colophon a {
    	color: #4b0082
    }

    Nice work!

  3. 3. Shrink the footer font size.

    I see you already changed the font size using this custom CSS:

    #site-info {
    	font-size: .8em
    }
  4. but would like to shorten it to
    "All content 0a9 2013 H. Elaine Cheong, DDS. All rights reserved. Theme design by Automattic, powered by WordPress.com." and still link to the Automattic website.

    We ask that you keep the footer credits as is, but I see that you were able to add the content you wanted to the beginning of the footer and reduce the size enough to make it all fit on one line, and I think it looks great.

    #site-info:before {
    	content: "All content 0a9 2013 H. Elaine Cheong, DDS. All rights reserved. "
    }
  5. Here are some other adjustments you may want to consider adding:

    #main {
    	border-bottom: 1px solid #eee;
    }
    
    #colophon {
    	padding: 0;
    	margin: 0 1px;
    }
    
    body.custom-background {
    	background-position: top center;
    	background-repeat: repeat;
    }

    Note that the last rule in this example can be done in the settings on the Appearance → Background page instead of with custom CSS, and you should edit the settings there. Just change position to center and repeat to tile.

Topic Closed

This topic has been closed to new replies.

About this Topic