HostGator Web Hosting

Customizing the Colors of your Nimble Theme WordPress Site

Welcome to the third tutorial in our mini-series on Elegant Themes Nimble theme.  Nimble is a bold, fully responsive design that is perfect for promoting products and/or services.  In part one of our tutorial series we showed you how to customize the Nimble theme Home page.  Specifically, we showed you how to upload a custom logo and favicon, setup the featured image slider and configure the “News and Updates” “Work and Feedback” “Plans and Pricing” sections.   In part two we demonstrated how easy it is to add attractive pricing tables to your WordPress site.  Today, we’re going to focus on changing the color scheme of the Nimble theme.How to Customize the Nimble Theme Color Scheme

Out of the box, Nimble offers a wealth of customization options.  However, the color customization options provided in the epanel may not be advanced enough for your specific needs.  Therefore, in this tutorial we’ll go in-depth and show you a couple different methods for changing the color scheme of the Nimble theme so let’s get started…

By and large, there are two ways to go about changing the colors of your Nimble theme WordPress site.  There’s the the easy way and there’s the hard way.  The easy way, like all easy ways in web design, doesn’t allow for complete customization but is achievable without any knowledge of HTML or CSS.  On the flip side, the hard way will allow you to change any aspect of your site including the background color of the Nimble theme.  However, it also requires basic knowledge of CSS, the ability to install a child theme and the ability to navigate a complex style sheet.

The Easy Way to Change the Nimble Theme Link and Font Colors

Step One: Start by logging into your WordPress Dashboard and visit your epanel under Appearance > Nimble Theme Options.

Step Two: Visit the colorization option on the left hand menu. Under the “Enable Custom Colors” header click the grayed out box that says “This is Disabled” to activate custom colors.

Step Three: You can now change many colors on the site including link and font colors by clicking the field under the header you want to change.  A color picker will appear and you can either select a color or insert a HEX value which you can get from an image editing tool such as Photoshop or Gimp.

Changing the Background Color of the Nimble Theme

Unfortunately, in order to obtain complete control over the Nimble theme colors (including the background color) you will have to dive a little deeper which we’ll show you how to do now…

Step One: Since we’re modifying our themes files, we need to install and activate a child theme in order to preserve changes with theme updates and prevent any functionality issues.  See our article on setting up a WordPress child theme to learn how.

Step Two: Once your child theme is installed and activated, visit your epanel from the WordPress Dashboard under Appearance > Nimble Theme Options.

Step Three: Enable child style sheets in Nimble by clicking the grayed out box under “Enable Style Sheets” and enter your style sheets URL.  (By default, your style sheet is located at “http://www.yoursite.com/wp-content/themes/yourchildtheme/style.css”)

Step Four: Make your modifications to the style sheet via FTP.  Fully customizing your Nimble theme colors is no easy task but it does provide a great opportunity to practice CSS, especially in regard to cross browser compatibility.  Be sure to make backup copies of your style sheet before making any sweeping changes.  Even if you’re using a child theme, you might want to revert your changes from time to time during development – backups are essential for this.

Important Nimble Theme Note: Being a highly customizable premium theme, the style sheet for Nimble is very complex and made to display properly across all browsers.  In order to change elements of your sites’ display in this manner, you will have to change it in several places in order to preserve compatibility across browsers.  Knowledge of CSS is required. Visit W3 schools to learn more about CSS for free.

Good luck navigating the Nimble theme style sheet and please feel free to post in the Comments below if you have any questions.

HostGator Web Hosting

8 COMMENTS

  1. […] January 19, 2013 Webmaster Customizing the Colors of your Nimble Theme WordPress Site. Welcome to the third tutorial in our mini-series on Elegant Themes Nimble theme. Nimble is a bold, fully responsive design that is perfect for promoting products …. Read more about Nimble Theme Tutorial: Part Three – Customizing Nimble Colors … here: Nimble Theme Tutorial: Part Three – Customizing Nimble Colors … […]

  2. thanks for the great guides. quick question – after adding a “project” page i do not want to show the large featured image at the top of the post when you click “read more”.

  3. Hi, is there anyway that I can remove the slider from the home page and add a picture to the background. Essentially I would like to upload a picture behind the slider on the home page and remove the slider.

    • That's a good question Niddy – We'll have to do some testing to see if that is in fact possible / how to do it. I'm going to go ahead and publish this comment and ask for help from other Nimble theme users out there. If you know the answer / solution please chime in. Thanks – Adam

LEAVE A REPLY