Complete Guide to Using Thesis 2 for WordPress. Click Here.

≡ Menu

Step 25: Adding Background Color to Thesis 2 Footer

Thesis 2 Footer Attribution

Our website header now has some color, so let’s change the color of the Thesis 2 footer to match.  Make note of your primary color CSS variable name for this step.  After our last step this will be easy as it is the same steps to complete this task.  Adding background color to the Thesis 2 Footer follows the same pattern as the header.

Navigate from the WordPress Dashboard to the Thesis 2 Skin Editor CSS page.  Look for the Footer label in the CSS Packages area.  Click on the Footer button.

Thesis 2 Footer CSS Package

Click “Options” at the the top of the pop-up, then click the black arrow next to Background.  Enter your CSS variable for your primary color.  Don’t forget to click the green “Save” button.

Thesis 2 Footer Background Color

Again, click the green “Save CSS” button at the top of the Thesis 2 CSS page.

Thesis 2 Save CSS Button

Refresh your website home page and scroll to the bottom of the page.  It now looks like the header.  Don’t worry that we can’t read the text.  Soon we’ll be replacing this text with our own custom text.

Thesis 2 Footer Background with Color

As we move through this guide, I will start to abbreviate steps assuming that you have started from the beginning and by now know how to navigate the Thesis 2 Skin Editor, WordPress Dashboard, and other topics we’ve covered up to this point.  This will keep me from being repetitious and boring you to tears.

About the author: I’m a techie, a gadget geek, a former programmer, and all-around technology nut. Currently I’m a business analyst for a technology company. I love what technology can do for us. I love smartphones and apps for everything. Building sites with Thesis 2.0 and WordPress help me to reconnect with the feeling of building something tangible.

I’m on: Google+ and Twitter

{ 10 comments… add one }
  • tom barney March 11, 2013, 3:05 PM

    Doug,
    Everytime I hit the preview button it takes me to my site but sometimes it looks like it suppose to and other it has all the text lined up on a left hand side and crazy words all over the place they are not suppose to be? What’s up with that. I even tried to view my site on a different computer and the site is not even remotely what it should be looking like?

  • tom barney March 11, 2013, 3:07 PM

    I also get these codes when I tried to set the variables into the header:

    Warning: preg_replace() [function.preg-replace]: Unknown modifier ‘c’ in /home/thbarney/public_html/wp-content/themes/thesis/lib/core/skin/css/variables.php on line 133

    Warning: preg_replace() [function.preg-replace]: Unknown modifier ‘c’ in /home/thbarney/public_html/wp-content/themes/thesis/lib/core/skin/css/variables.php on line 133

    Warning: preg_replace() [function.preg-replace]: Unknown modifier ‘c’ in /home/thbarney/public_html/wp-content/themes/thesis/lib/core/skin/css/variables.php on line 133

    Warning: preg_replace() [function.preg-replace]: Unknown modifier ‘c’ in /home/thbarney/public_html/wp-content/themes/thesis/lib/core/skin/css/variables.php on line 133

  • tom barney March 11, 2013, 9:23 PM

    Doug,
    If you go to http://www.asaferinternet.com you will see what I’m saying about how screwed up the site is after introducing those color variables. I even tried to delete them but it didn’t change a thing.

  • Doug Macklem March 14, 2013, 3:46 PM

    Tom: all I see is a “coming soon” page.

  • Stéphane June 21, 2013, 12:56 PM

    Hi Doug,
    I try your method step by step but the footer’s color even the header’s color not change… Always blank…
    I tried the variable’s name i have created an the simply color, nothing change…
    Can you dee what is my problem?
    Thanks
    Stéphane

    http://groupe-de-jazz.net/groupe-musique-pour-mariage/

  • Doug Macklem June 22, 2013, 4:57 PM

    Stephane: I don’t see the CSS property “background-color” at all in your Footer div. For a test, go to the CSS editor and click on the &footer package, scroll to Background – Background Color and type in “000000”. Be sure to click “Save” and “Save CSS” buttons. This will make the background black just to see it working. Then we can work on the variable.

  • Arif July 23, 2013, 2:44 PM

    Hi Doug,

    Thanks for all the info. I have Thesis 2.1 and I’m seeing no pre-made packages at all, do you know how I’d access the footer settings in 2.1?

    Thanks

  • Doug Macklem July 23, 2013, 8:29 PM

    The Packages function is being deprecated according to this link: http://diythemes.com/thesis/rtfm/getting-started/admin/.

  • Doug Macklem July 23, 2013, 8:31 PM

    Arif, you should be able to go to Thesis > Skins > Editor > CSS and the Packages are still there (for me anyway).

  • Ryan December 3, 2013, 2:54 PM

    Very useful, I just switched from Thesis 1.8 to 2.1 and there’s been many moments of frustration! I’ll try out this footer in the future.

    Thanks,

    Ryan

Leave a Comment