share

Pure Tabs

  • This is a placeholder for Pure Tabs Component. Full documentation will be releaseed with Pure Tabs version 2.0.

  • This is a placeholder for Pure Tabs Companion Code Helper Plugin. Full documentation will be releaseed with Pure Tabs version 2.0.

  • This is a placeholder for Pure Tabs Companion Content Plugin. Full documentation will be releaseed with Pure Tabs version 2.0.

  • 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:

    1. General Styles
    2. No-Header Styles
    3. Bottom Tabs Styles
    4. Left Tabs Styles
    5. 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:

    1. Background Color and/or Gradient for main panel
    2. Border Color for main panel
    3. Border Radius (Curvature) for main panel
    4. Background Color and/or Gradient for header
    5. Border Color for header
    6. Border Radius (Curvature) for header
    7. Background Color and/or Gradient for a tab
    8. Border Color for a tab
    9. Border Radius (Curvature) for a tab
    10. Text Color for a tab
    11. Background Color and/or Gradient for tab when mouse over
    12. Border Color for a tab when mouse over
    13. Border Radius (Curvature) for a tab when mouse over
    14. Text Color for a tab when mouse over
    15. Border Color for a tab's content
    16. 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.

  • Important Notice: The name of this plugin was changed from "Easy Tabs" to "Pure Tabs" due to a naming conflict with an existing plugin registered with JED.

    Installation:

    This plugin is designed for Joomla 2.5. To install go to the Extension Manager - Install page of Joomla Administrator and upload the package file.

    Usage:

    To use this plugin as content in an article, first enable the plugin and configure the default parameters in the Plugin Manager.

    To use the plugin in an article, you utilize the two tag expressions, each with a different set of attributes. They are used very similar to xhtml, with the exception that they surrounded by curly brackets.

    The first tag expression is {puretabs}{/puretabs}. Notice that it has a start tag and an end tag. It has 6 attributes as follows:

    puretabs Attribute default value possible values
    theme basic-blue.css [any css file in the themes folder]
    position top bottom, left, right, top
    headerfullnone, list, full
    selected1[number relating to one of the tabs]
    centered01, 0
    height500[any integer number]

    The second tag expression is {tab}{/tab}. Notice that this also has a start and end tag. In addition, this expression exists inside of {puretabs}{/puretabs}, one or more times. It has 3 attributes and 4 possible modes. Here are the 3 attributes:

    tab attributedefault valuepossible values
    titleTab[the text for the tab button]
    modetexttext, article, module, position
    iconurl-[optional url to an image prepended to the tab text]

    There 4 possible modes:

    modedescription
    text[type text between start and end tag]
    article[specify the article id between start and end tag]
    module[specify the module name between start and end tag]
    position[specify the module position between start and end tag]

    There are also various formats for the module mode and the position mode. For the module mode, you can specify the module name, its title and its style; each separated by a comma. There are 5 module styles:

    1. none (No wrapping - Raw)
    2. table (Wrapped by Table - Column)
    3. horz (Wrapped by Table - Horizontal)
    4. xhtml (Wrapped by Divs)
    5. rounded (Wrapped by Multiple Divs)

    Thus, the possible formats for the module mode are (using the example of mod_login):

    1. {tab mode="module"}mod_login{/tab}
    2. {tab mode="module"}mod_login, Login Form{/tab}
    3. {tab mode="module"}mod_login, Login Form, rounded{/tab}

    For the position mode, you can specify the module style in addition to the module position; each separated by a comma. The possible formats (using the example of user1 position) are:

    1. {tab mode="position"}user1{/tab}
    2. {tab mode="position"}user1, table{/tab}

    For a full example of how to use Easy Tabs, type the following code:

    {puretabs position=top theme=gray-pitch.css centered=0  selected='3' height=200}
      {tab title="One Thing" mode="text"}This is a sentence.{/tab}
      {tab title="Two" mode="article"}1{/tab}
      {tab title="hello" mode="position"}left{/tab}
      {tab iconurl='images/icons/application_delete.png' title="hello2" mode="module"}mod_login{/tab}
    {/puretabs}

    Also note that attributes can be specified with single quotes, double quotes, or no quotes (if the value contains no spaces).

    Parameters:

    NameKeywordDefault ValueDescription
    Default Tabs PositionpositiontopThis is the default position of tabs. This can be overridden by specific pure tabs in any article.
    Tabs HeaderheaderfullThis sets how you want the header to be displayed. This can be overridden by specific pure tabs in any article.
    Center the Tabscentered0This determines whether the tabs will be centered or left aligned when placed at the top or bottom. This can be overridden by specific pure tabs in any article.
    Minimum Heightheight500This is the minimum height used when the position of the tabs are set to left or right.
    Use Inline Stylesn/aNoThis determines whether the styles will be applied inline, or from the puretabs.css file. Use inline styles if your template styles are conflicting with the puretabs.css styles.
    Default Themethemebasic-blue.cssThis is the default theme selected for all the Pure Tabs on the site. This can be overridden by specific pure tabs in any article.
    Module Stylen/atableCode that will wrap Modules

About Us

Valor Apps is a registered business that is owned and operated by Michael Gilkes. The business is located and registered in Antigua and Barbuda.

We specialize in developing software for Joomla Content Management System (Joomla CMS), custom web apps, and custom desktop applications. We also provide computer support services to businesses located in Antigua.

Latest News

Important Notice about Joomla 2.5 January 10, 2015
Important Notice about Joomla 2.5 Joomla 2.5.28 was released on December 10, 2014, and is now officially the last release of the 2.5.x Joomla series. Official support for Joomla 2.5.28 ended on December 31, 2014. This means that there will be no new releases of the Joomla 2.5.x...
Site Upgrades and Updates August 15, 2014
Website Upgrade Please be advised that from 10:00am EST Friday, August 15, 2014 to 6:00pm EST Monday, August 18, 2014, the Valor Apps website will be involved in an ongoing upgrading process. The site will remain live. However, there will be changes to the appearance of the website that will occur during this time period. Most changes will occur within the first 24 hours. After that initial time...
First Quarter 2014 Online Newsletter April 26, 2014
Recent News! New Payment Option: FMX Tranpage Since the establishment of Valor Apps online, Paypal has been the only payment option available. As of December 2013, a new payment option was made available to all users: FMX Tranpage. If you are unable to use Paypal, or prefer not to use Paypal, you are invited to use FMX Tranpage. FMX Tranpage is a lightweight SSL-based cedit card payment...
New Releases Scheduled! April 23, 2013
New Releases Scheduled! For those who make feature requests and who contact us via email about bugs and custom features, you wait in almost over! Here is a schedule of upcoming releases with the tentative features: Advanced Folder Listing Version: 1.5 Expected Release Date: July 2, 2013 Features include: Ability to Link any Field (not just Filename) Multi-Lingual Support for Fields Compatibility with...
Pure Tabs v1.1 released! February 5, 2013
Pure Tabs Version 1.1 is now available! Updates to this version: Compatible with Joomla 3.0+ Go to the product page for a full product description.
keyboard_arrow_up