Valor Apps - Pure Tabs Custom Theme Tutorial

Before we begin

Thanks for purchasing Pure Tabs plugin. I made the plugin to be a simple means of having tabs in any article. The plugin comes with 24 built-in themes. However, it is very easy to create your own theme. This tutorial will give you the necessary explanation you need to make your own custom theme.

Before we start, I expect persons should have a basic understanding of CSS, and are comfortable with editing CSS styles. If you are a little shaky or need a refresher on certain things, I have provided you with some resources that may assist you. Below are valuable links that will help you to follow this tutorial.

Now that we have the resources out of the way, let's get down to business. I would like to point out that this tutorial does not teach you about CSS. It assumes you are comfortable with CSS, and can understand making changes.

The last thing I would like to share with you, which has been instrumental in my development of these themes is the use of your browser's DOM Console. Every browser has a console that you can use to see and manipulate styles and elements in real-time. However, I will advise you to use the Chrome browser as its interface is quite simple.

To view/edit the styles of any element in Chrome, hover your mouse over that element, and right click, then select "Inspect Element". You will see the following:

When you do that the console will be revealed, and when you hover over an HTML element, it is highlighted in real-time, so you see what it is referring to. If you select or click on an HTML element, the Cascading Styles are shown for it. You may check/uncheck individual declarations, and you can edit values for any property. See the screenshot below:

Introduction

Step 1: Find the Themes

The theme folder can be found in media/puretabs/themes. There are 24 themes in this folder. To create your own custom theme, do not edit any of these. What you should do is go the Demo Site, take a look at the Themes to see which one is closest to what you want, and then copy-and-paste that file in the folder, then rename it.

Step 2: Copy/Paste and Rename File

For example, if I wanted a green theme similar to the Basic Blue theme, I could copy and paste the basic-blue.css file, and rename the file to basic-green.css.

Step 3: Rename Class Selectors

The next step is to open the new basic-green.css file with any decent text editor, that has code syntax higlighting for easier editing (Since I use a Mac, I like Text Wrangler). After opening the file, rename all the class selectors. You could do this manually, but I would just do a search-and-replace function to replace ".basic-blue" with ".basic-green" (notice the dot "." before it!).

Now that you do that, your first rule set should now change from:

div.puretabs.basic-blue
{
  background: #FAFAFA;
  border-color: #A1C3D7;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  behavior: url('./media/puretabs/css/PIE.php');
}

to this:

div.puretabs.basic-green
{
  background: #FAFAFA;
  border-color: #A1C3D7;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  behavior: url('./media/puretabs/css/PIE.php');
}

Step 4: Prepare the shortcode

Now that we have everything as expected. You need to make sure you specify the theme in the puretabs shortcode/tag that you placed in the article. So, make sure your shortcode looks like this at a bare minimum:

{puretabs theme="basic-green.css"}
.
.
.
{/puretabs}

With this, we can make changes and refresh the webpage to see the changes immediately. Please note that you may also set the theme from the Plug-ins Manager, but the shortcode attribute overrides what is in the Plug-ins Manager.

Basics

There are 16 rule sets that comprise each theme file. These 16 rule sets are split into 5 sections relating to the various options of displaying the Tabs. Here are the 5 sections:

General Styles
No-Header Styles
Bottom Tabs Styles
Left Tabs Styles
Right Tabs Styles

We will be primarily dealing with the General Styles. There are 8 rules sets in Genreal Styles. I will give an overview of what these rules sets affect, and also a general understanding of what to edit. With that you will be able to make your own creative theme.

Setp 5: Know what to edit

Before editing anything, I want to give a general rule for editing CSS style declarations. Recall that CSS is "cascading". This means that a declaration that comes after another has precedence and replaces the one before it. For example, if you have the following rule set:

div.puretabs.basic-green
{
  background: red;
  background: blue; /* <- has precendence */
  border-color: #A1C3D7;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  behavior: url('./media/puretabs/css/PIE.php');
}

The background color would be blue. The blue overrides the red because it is declared after. This is VERY important to understand, especially when it comes to declaring gradients. The reason why it is important is because I deliberately declare several background declarations in one block. I do this because the first background declaration acts as a default. Different browsers have a different way to express gradients. So, I have to accommodate each browser type. The very first background declaration is always a flat color, because every browser can interpret that. Subsequent background declarations are set for each type of browser. If a browser does not recognize a declaration, it skips it. If it does recognize it, it replaces the previous (flat) background declaration with the gradient one.

So, for example, you may see the following block:

  background: #A1C3D7; /*fallback for non-CSS3 browsers*/
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#B4D0DF), to(#85B2CB)); /*old webkit*/
  background: -webkit-linear-gradient(#B4D0DF, #85B2CB); /*new webkit*/
  background: -moz-linear-gradient(#B4D0DF, #85B2CB); /*gecko*/
  background: -ms-linear-gradient(#B4D0DF, #85B2CB); /*IE10 preview*/
  background: -o-linear-gradient(#B4D0DF, #85B2CB); /*opera 11.10+*/
  background: linear-gradient(#B4D0DF, #85B2CB); /*future CSS3 browsers*/
  -pie-background: linear-gradient(#B4D0DF, #85B2CB); /*PIE*/

You will see that I have placed comments at the end to explain to you which browsers are being targeted by that declaration. Also note that the fallback flat color is just one color, but a gradient consists of two colors that the browser computes a gradient for. So please make sure that you test out the colors you want using the free tools I listed above (Color Picker and Gradient Generator).

Step 6: Prepare what you want

Before you start editing, you should know what you want to edit. Here is a general list of things you would edit:

Background Color and/or Gradient for main panel
Border Color for main panel
Border Radius (Curvature) for main panel
Background Color and/or Gradient for header
Border Color for header
Border Radius (Curvature) for header
Background Color and/or Gradient for a tab
Border Color for a tab
Border Radius (Curvature) for a tab
Text Color for a tab
Background Color and/or Gradient for tab when mouse over
Border Color for a tab when mouse over
Border Radius (Curvature) for a tab when mouse over
Text Color for a tab when mouse over
Border Color for a tab's content
Text Color for a tab's content

Step 7: Understanding the General Rule Sets

Below are the 8 rule sets that dictate the general styles. I have placed comments inline to let you know what it does. I placed them empty here to save space.

div.puretabs.basic-green
{
  /* Styles for the entire tabs panel. */
  /* I normally set the background color here, which will be reflected in all the tab contents. */
}

div.puretabs.basic-green > ul
{
  /* Styles for the tabs header. */
}

div.puretabs.basic-green > ul > li
{
  /* Common styles for all the tab buttons. */
}

div.puretabs.basic-green > ul > li:first-child
{
  /* This sets styles for the very first tab button. */
}

div.puretabs.basic-green > ul > li:hover
{
  /* This sets what will change when you mouse over a tab button. */
}

div.puretabs.basic-green > ul > li.active
{
  /* Sets the styles for the active tab button. */
  /* I normally set the border color same as the header border color for continuity. */
  /* I normally make the font bold. */
}

div.puretabs.basic-green > div
{
  /* Sets the styles for all the tabs' content, whether tab is active or not. */
  /* I normally set the text color here for tab content */
  /* Border Color is set the same as header border color for continuity. */
}

div.puretabs.basic-green > div.active
{
  /* Custom styles for the active tab's content. */
  /* You can change text color or background if you like. */
}

Special Notes

Ok. For the record, I really detest dealing with hacks for IE6. Actually, I don't even bother with catering for IE6. If anyone is using IE6 to view your site, they probably shouldn't be allowed to own a computer. Ok... I am joking there... kinda. lol. Using IE6 is like riding a bike on the highway. Don't do it.

With that said, I have decided to use CSS3Pie to cater for IE specific issues, since most modern browsers (including IE9 and IE10) know how to handle gradients and curved borders. So, for any rule set that manipulates the borders or have a gradient background, you will see the following declaration at the end:

  behavior: url('./media/puretabs/css/PIE.php');

Please just leave this alone. Don't mess with it. It causes IE6 to IE8 to play nice with curved borders and gradients. Or at least, it is supposed to.

Conclusion

Finally, to ensure general uniformity, I advise to always test your Custom Theme in various browsers. I normally test in Chrome, Safari, Firefox and Internet Explorer 9+ and 10+. Sometimes, we make typo errors or forget to copy/paste the correct colors for the gradient for a particular browser declaration. It may be tedious, but I think that it is worth it in the end.

Feel free to email me copies of your custom themes, and I will share them for free with everyone.

Pure Tabs