Customizing Drupal 6 Quicktab Styles

By adam
Mon, 2012-05-14 03:39
1 comments

This is a guest post from Adam, my Co-founder at BEgINr Media

When finished: After you get through this tutorial you will have made a custom Quicktabs style in Drupal 6.

This is how to do it.

Stuff I am assuming:
...you have downloaded the Quicktabs module from Drupal.org and Install it.
...you have a photo editor (Gimp, Photoshop, etc)

  1. If you choose you can build Quicktabs from scratch. This would mean building your own CSS and files. I am to lazy for this, so for this tutorial we are going to take a lot of the code and images from an existing tab style. To get started I took a copy of the Garland tab style and pulled it down to my local machine (just copy the files and paste them somewhere you can easily get to them).
  2. Take the Garland folder and give it an unique name. This will end up being the name that you select in the tab style drop-down. Also, while you are renaming things make sure to change the garland.css file to something unique as well. Note: if you site does not need right to left display you can delete this css file.
  3. Open up your newly named css file in a code editor. Once you open this file you will notice that the css is still using the old tab style theme of Garland. To fix this simply replace “garland” with the name of your css file. So for example if you named your css file “quicktabs.css” you would substitute “garland” with “quicktabs”.
  4. Before we start to edit the images and css this is a good time to check and make sure your new tab style code is getting read. To check this simply go to the admin section for quicktabs and in the tabstyle drop down change the style to your newly created style (http://yoursite.com/admin/build/quicktabs). Note: if you see the same style has the one you copied the css and images from your code is getting read correctly. If you see nothing make sure that you have changed the css file to look for your new tab style (Garland -> Quicktabs).
  5. Open up your photo editor and grab the images that you would like to change. For this example, I am going to edit both the left and right tab images. Note: this is a horizontal Quicktabs so I have no need for the sidebar images and the sidebar code in the css. If you would prefer you can delete these from your folder. In addition to the tab left and tab right, I also am going to create two additional images to display for the non-active tabs.
  6. To get the active tabs to work, all you have to do is upload your new designs to the server. If you changed image sizes, you will have to adjust some CSS to get the images to fit properly. Getting the in-active tabs to work is also very easy. Within the code you will find the css that is getting called for the current active tab. Simply copy that and paste that before the active selectors. Once that is done all you have to do is remove the .active class and change the background images to reflect the inactive images. Remember the right image is attached to the li selector while the left image is attached to the a selector.
  7. The remaining changes for the Quicktabs are only minor. These include font-sizes, colors, margins, etc. I have provided the full code below if you are curious of the changes.

If you happen to be a more visual learner here is the CSS and images that I used to create my quicktabs style.

.quicktabs_main.quicktabs-style-spl_quicktabs {
  width: 517px;
}
 
ul.quicktabs_tabs.quicktabs-style-spl_quicktabs {
  font:bold 12px/20px Arial;
  padding: 3px 0;
  height: 20px;
  margin:0;
}
 
ul.quicktabs_tabs.quicktabs-style-spl_quicktabs li {
  margin:0;
  padding:0;
  display: block;
  float: left;
  padding: 2px 0 1px !important;
  list-style-type: none;
  background: none;
}
  ul.quicktabs_tabs.quicktabs-style-spl_quicktabs li:first-child {
    margin-left: 0;
  }
 
ul.quicktabs_tabs.quicktabs-style-spl_quicktabs li a:link,
ul.quicktabs_tabs.quicktabs-style-spl_quicktabs li a:visited {
  color: #fff;
  padding: 8px 40px 4px 40px;
  margin:0;
  font:bold 12px/20px Arial;
}
  ul.quicktabs_tabs.quicktabs-style-spl_quicktabs li.first {
    background: url("./images/tab-q-fixed.gif") no-repeat left -23px;
    width: 168px;   margin-right: 1px;
  }
    ul.quicktabs_tabs.quicktabs-style-spl_quicktabs li.first.active {
      background: url("./images/tab-q-fixed.gif") no-repeat left top;
    }
  ul.quicktabs_tabs.quicktabs-style-spl_quicktabs li {
  width: 194px;
  background: url("./images/tab-info-fixed.gif") no-repeat left -23px;
  }
    ul.quicktabs_tabs.quicktabs-style-spl_quicktabs li.active {
      background: url("./images/tab-info-fixed.gif") no-repeat left top;
    }
  ul.quicktabs_tabs.quicktabs-style-spl_quicktabs li.last {
    background: url("./images/tab-ship-fixed.gif") no-repeat left -23px;
    width: 153px;   margin-left: 1px;
  }
    ul.quicktabs_tabs.quicktabs-style-spl_quicktabs li.last.active {
      background: url("./images/tab-ship-fixed.gif") no-repeat left top;
    }
ul.quicktabs_tabs.quicktabs-style-spl_quicktabs li.active a  {
  color: #585858 !important;
}
 
/* IE 6 Debug */
* html ul.quicktabs_tabs.quicktabs-style-spl_quicktabs,
* html .sidebar ul.quicktabs_tabs.quicktabs-style-spl_quicktabs {
  padding-bottom: 0px;
}
 
/* IE 7 Debug */
*+html .sidebar ul.quicktabs_tabs.quicktabs-style-spl_quicktabs li a:link {
  padding-bottom: 4px;
}

Need to learn more Drupal?

Premium Drupal Training Online (Horizontal)

Comments

Post new comment