Anatomy of a Magazine Style Premium WordPress Theme – Part 2: DOMTab, Tabber, more
- Share Your Thoughts ↓
- 01.19.2008 - 2:43 pm
How to integrate it with the design?
Now that the installation is complete, we need to style the tabs to look and feel more like the rest of the theme/site. This part of the work will focus mostly around the existing XHTML and CSS. Since the strategy employed to carry out designing differs from designer to designer, I recommend you use discretion while reading the following the section.
To style an element, it is imperative that you add a class or id attribute (depending on its usage) to all elements that share the same attribute. For example, in our example above, I could change the style of all the H2 headings to that of H3 or change the H2 in tabs.php to H3. Here’s what I did, changed the heading to H3 and styled to match the rest of the sidebar widget headings. Check the results, it is not pretty, but I spent the least possible time styling it.
Are there other options?
Sure, there is a one other JavaScript that is picking up popularity. It’s called Tabs and is revolutionary. It is by far the simplest piece of code and is easy to style. You can get the full tutorial for tabs here.
I used this technique in the final version of the theme we developed as part of the demonstration of this tutorial series. The theme is to be released shortly.
Next up, we will build cool menu interfaces using JS and CSS.
References: wpSnap and a whole bunch of premium theme demo’s.
36 Responses to “Anatomy of a Magazine Style Premium WordPress Theme – Part 2: DOMTab, Tabber, more”
Trackbacks
- How to add a tabbed interface to your WordPress blog | WordPressGarage.com
- bingo game ks1
- How To: Creating Sidebar Tabs In Your WordPress Theme
- Wp Wordpress » Blog Archive » How To: Creating Sidebar Tabs In Your WordPress Theme
- A Vertitable Tsunami of Goodness « Feet up, eyes closed, head back
- Anatomy of a Magazine Style Premium WordPress Theme - Part 3.1 “Navigation – Second Level Menu” » Headsetoptions.org
- Do I read your Blog?
- How To: Creating Sidebar Tabs In Your WordPress Theme | [Blog Tutorials]
- Great Articles | SpiderMarket
- sizzling slots bonus code
- flash kasino
- tb test » Dallas Blogging
- When To Use Magazine-Style Themes For Blogs? | How-To | Smashing Magazine
- Weekly Links: 7/31/2009
Leave a Response
Some Useful Info
Use SimpleCode while including codes.
The links from all comments have the no-follow tag to prevent spammers from gaming their way up into SERP. So please keep the comments clean, try not to use keywords as "Names" or post unnecessary links in the comments. Thank you for cooperating.
About
WP Pro was conceived and developed with one goal in mind, “To bring our experience and expertise gathered over the years to one convenient location on the web to serve the needs of bloggers and webmasters“. -Sunny
To learn more about who we are and what we can do for you, read on...
-
Archives
-
Categories
Popular Tags
Blog Design Cockney Consulting CSS Google Grid Habari Project Hosting HTML Internet JavaScript Magazine Style WordPress Themes PHP Plugin Reboot Search Engine Optimization SEO Site Validation Spam Support Tag Technology Toolbox Troubleshoot Tutorials Web Web 2.0 Web Design Web Development Web Hosting Web Sites Widget WordPress WP XHTML
Copyright © WP Pro – Design, Development and Professional WordPress Hosting for Serious Bloggers - CSS | XHTML | Login | Return to Top ↑
Thanks Moses, I hope it if useful for everyone too.
This is a really great post, thanks for taking the time,i’m sure many WordPress users will benefit from this article.
Cheers.
Very use full!!!!!!!!!!
Thanks so much.
*dug
Interesting to see my domtab pimped here
Just two quick notes: All of these are JavaScript, not Java. Java is the same to JavaScript as Car is to Carpet. As there are (heaven forbid) still tabbing solutions out there that use Java Applets for this kind of effect, it’d be good to not put them in one sentence.
Furthermore there is also the YUI tabbing solution that is totally free and was built by yahoo and used on their own news and sport sites: http://developer.yahoo.com/yui/tabview/
@ Chris
Thanks for pointing out YUI tabs, we recently redesigned mandarinmusing.com using YUI grids but never touched the tabs! Also, I will make sure I distinguish between Java and JS in the future
@ Mark
Thanks!
Great info. Any reason why you did not address jquerry/tabs3? Is its license too restrictive?
Tabber and domTabs are for people who don’t want to import a huge library into their pages. YUI, JQuery, Mootools, and especially Sccriptaculous type libraries are for many other bells and whistles. If you don’t use all that functionality, then just stick to a specific JS include from Tabber. Personally, I think the stuff from dynamicdrive.com is fantastic and lightweight as well.
@ Don
I could not cover them all, I will try and mention them in the next post in the series.
@ Shanx
Thanks for pointing out the many options that are out there.
Great and informative blog.
Thanks for all your hard work in getting this info to us.I’ll be eagerly awaiting all of your future posts.
where did you get this call:
there’s no latest.php file in the themes right?
so why use latest.php?
@ anne
You are right, there is no latest.php, it should read tabs.php (made the corrections) and that is the file with the Tabber JS. I keep the JS in its own file so that we can easily disable the feature if an edit fails by commenting the call for that file in your sidebar.
Hi sunny,
This tutorial is very useful, especially for me as a complete novice in programming.
But as I use a fixed width sidebar, the number of tabs can be displayed neatly is limited. If I included too many tabs whose the total width is greater than the sidebar width, my tabs would mess (disorderly stacked). How can I fix this problem?
Sorry for bothering you with this question since I don’t know where to ask help. Thank you.
@ guzfrie
That is a limitation which can be addressed only by finding alternative way to represent the tab headings, have you considered using simple icons in place of headings to minimize tab width?
Some cool info!
At first I didn’t knew what to choose (Domtab Or Tabber) but then I figured that Tabber is much easier to work with and style it!
This is exactly what I’ve been looking for! However, I’m trying to implement these on a new site I’m building using WordPress, and I’m having trouble. For some reason the ‘tabs’ are all one under the other and 100% wide and there’s a small gap between the tab and the content box.
The right side bar in the template CSS is an ID, not a class. I thought maybe that cause the problem, so I changed it to a class. Yet, that didn’t make a difference except to make the gap below the bottom tab and the tab content box smaller.
Any thoughts?
Yep… it should be standard in every CMS, including the automatic switching mouseover DTABS. Thanks.
Nice tutorial….but i am unable to adjust CSS……not able to fix the width of the tab and top margin etc….
Please help
Hi Sunny,
In the first step you mention creating a file called tabs.php. Is it possible to get a link to see how that page actually looks?
I’m trying to create a few tabs including a wordpress categories tab. The tab panel shows but the tabs don’t work when clicked on.
Also the tab box as a whole seems to run right into the box below it (no separation) and unwanted bullet points are showing.
Any help appreciated.
Kind Regards,
Ken
Ken,
Go to http://www.wppro.org/about/ and scroll down to the list of themes. Click and download “The Box” theme (or any other newer theme) and you will find within the theme folder a file called “tabs.php”, use that in conjunction with the included “js” folder. Two thing to add to your theme files are the style for the tabs in your style.css or style.php and the call for the JavaScript from within your header.php file. Hope that helps, let me know!
I was hooked on tabbed widgets after playing around with the Hybrid framework, but was wondering how I could apply that same look and feel to my own blog.
Excellent…and very thorough tutorial!