Want to give your site visitors a lot of information on your splashpage, but don’t want them to have to endlessly scroll for it? The solution is nested & tabbed content. Here’s a tutorial to give you a head-start on building and styling just that kind of splashpage. For this how-to, we’ll be using the one I designed for an addiction-recovery community as our template. Once you’ve gotten familiar with the ins and outs, you can customize it to match the style of your own site.
The screenshot below shows the look we’re going to create. You can also view the page (and play with the tabbed content to see how it works) live at kwitterz.com.
First, go to your BuddyBuilder admin to set up your splashpage. If you’re not sure how to do that, see this tutorial: Create a private community complete with splashpage. Don’t forget to install the Widget Logic plugin… you’re going to need it to ensure the logged-out splashpage content disappears when users log in, to be replaced by your logged-in homepage content. get it here: http://wordpress.org/extend/plugins/widget-logic/
Next, you may or may not have guessed that the tabs are created using shortcodes (makes designing stuff a lot easier). To get those shortcodes, you need to download and install 2 plugins on your WordPress install. Why 2 shortcode plugins? Simply because, although the author of one of them has included a way to nest tabs within tabs, some unresolved jquery conflicts result in the navigation being a bit buggy. So we’ll use 2 different sets of shortcodes to eliminate those conflicts. Here’s where to get the 2 plugins:
1 – TheTheFly has a good set of shortcodes for tabs, accordions and toggles. We’ll just be using the tabs here, but go ahead and have fun with the other ones too… I did!
http://thethefly.com/wp-plugins/thethe-tabs-and-accordions/
2 – J-Shortcodes is a marvelous set of codes for tabs, accordions, buttons & boxes as well as brilliantly simple shortcodes to organize content in your pages, posts & text widgets into columns. Again, we’re only using the tabs here, but play with other shortcodes too, I’m sure you’ll find uses for them on your site.
http://www.jshortcodes.com/shortcodes/
Got ‘em? Good. Now go to “Appearance” > “Widgets” in your WP backend and drag a text widget to the “Homepage-Top” widget area. We’ll be putting all our logged-out homepage tabbed content in this single widget. (If you’ve already installed the Widget Logic plugin, you’ll notice a new field at the bottom of the widget where we’re going to tell it to only show when logged-out. But we’ll get to that later in this tutorial; for now, we want the widget to appear on the homepage even though we’re logged-in, otherwise we’d have to log out every time we wanted to see our changes).
Enter a title in the “Title” field; any title will do because we’re going to be hiding it anyway. Enter a bit of text in the content area so you can actually see your widget on your homepage.
Now let’s give our new homepage widget the basic styling we want so it fits the look of the rest of the site (you can modify whatever needs to be modified so it fits your own site). To do that, we’ll need the div ID of the text widget. Using Firebug in Firefox, or Web Inspector in Safari, or Developer Tools in IE (please don’t tell me you’re still using that dinosaur for anything but a design sounding board 
), you can easily find that. (If you don’t have, or don’t know how to use, any of those tools, you can find the ID you need by inspecting the source code of the page… it’ll be the 1st div you see after div id=”home-full-top”.) The ID we want will be something like this:
1 | <div id="text-25" class="widget widget_text"> |
Paste the following in your BuddyBuilder Custom CSS section, and change the div#text-25 to the actual id of your widget. The first part sets the width and margins of just this one widget, ensures no borders are assigned and gives it a transparent background so your site body background shows through. The second part will hide the widget title area. You can change the widget background to a color, or even an image, if you have a body background color/image that hinders readability of the widget content. Adjust everything else to fit your site too. If you want your regular widget border to be shown, simply remove border:none !important;
1 2 | div#text-25 {width:810px;margin:auto;background:transparent;border:none !important;}
div#text-25 h3.widgettitle {display:none;} |
We have our box, let’s get your site logo and some introductory text in there. Copy the following to your widget and change the image and the content to reflect what your site is about.
1 2 3 4 5 6 | <img src="http://images.cooltext.com/2089940.png" width="502" height="109" alt="kwitterz logo" /> <br /><br /> <span class="splashmain">A community help network for folks in recovery from addiction. <br /><br /> <em>Are you a kwitter?</em></span> <br /><br /><br /> |
To style the text, add the following to your Custom CSS section in BuddyBuilder and adjust to taste (remember to change the div ID too!):
1 | div#text-25 span.splashmain {font-size:26px;text-shadow:1px 1px 1px #fff;} |
Ready for the tabs? Hold on! Before we can add them, we need to select some settings in both shortcode plugins. For the main tabs, we’ll use the shortcodes from TheTheFly. In your WP backend, click “TheTheFly” > “Tabs and Accordions”, then “Settings”. Make sure “Disable on Frontpage” is NOT checked (duh!). It doesn’t really matter what “General Style” you select ‘cuz we’re going to be customizing the heck out of it (I used “smoothness” for kwitterz.com).
Also note that our customization is going to be done in BuddyBuilder Custom CSS section, not in TheTheFly, because we want our styles to apply to BOTH plugins, but only for the BuddyBuilder theme style we’re using. If you customize directly in TheTheFly, your changes will still be applied even if you change your theme style… not good. (By the way, you can do the same for all other plugins you’re using too… whatever styles you add to BuddyBuilder will override the plugin styles.) Click “Update Settings” when you’re done.
We’ll use J-Shortcodes for the nested subtabs. Go to “J-Shortcodes” > “General Settings” and click on “jtabs and jaccordion settings”. Enable any theme and click “Save Settings”. For the same reason as above, we’ll be customizing the style in BuddyBuilder, not in the Custom CSS section of the plugin. Here also, I used “smoothness” simply for the sake of consistency.
Now that we’ve selected our base styles, let’s put some tabs in our homepage widget before customizing any further so we can see our style changes as we go. The shortcodes for tabs in both plugins are really simple, TheTheFly uses tabs as an opener with tab for each individual tab, whereas J-Shortcodes uses jtabs as its opener with jtab for each tab; each tag must be enclosed in square brackets like [ and ]. The closing tags are the pretty much the same, just preceded by a slash.
Let’s start by adding 2 main tabs. Add the following in your homepage widget just below the site logo and intro text you added earlier:
1 2 3 4 5 6 7 8 | [tabs] [tab title="Main tab 1"] Content goes here... [/tab] [tab title="Main tab 2"] Content goes here... [/tab] [/tabs] |
Now let’s replace “Content goes here” with some actual content. But wait, we’re doing nested tabs right? Right, and it gets a bit tricky because there’s a 3rd shortcode coming into play here: jbox. We’re using jboxes so we can insert a heading for the content under each main tab that stays there while your site visitors navigate through the subtabs, which actually sit inside the jbox. There aren’t any special admin settings for jboxes, but inline parameters are included in the J-Shortcodes plugin (you can find all the available inline parameters in the J-Boxes section here: http://www.jshortcodes.com/shortcodes/. Replace “Content goes here” under each tab you created above with the following:
1 2 3 4 5 6 7 | [jbox color="gray" title="This heading stays put no matter which subtab is clicked below."] [jtabs theme="smoothness" size="small"] Subnav 1::Content... [jtab/] Subnav 2::More content... [/jtabs] [/jbox] |
So far, so good? Did you notice how additional tabs and subtabs are added with each shortcode, and the differences between the 2 plugins? Did you also notice how the theme and size must be specified for jtabs? If not, visit each plugin’s page to review the syntax to be used. Also check out the variety of parameters available to customize jboxes. Cool!
Before we add anything else, let’s style what we have already. Go to your BuddyBuilder Custom CSS section where we’re gonna get down and dirty! Let’s start by making sure the font-family used in the widget content, controlled by J-Shortcodes, is the same as the rest of our site. J-Shortcodes defaults to Verdana,Arial,sans-serif. If that’s not the font-family you want, add the following in Custom CSS and adjust to taste:
1 | .jayq-smoothness .ui-widget {font-family:Century Gothic,sans-serif;} |
We want to remove the background and borders from the widget content areas, the tabbed navigation panels and the individual tabs. So let’s add the following to Custom CSS:
1 2 3 4 | .jayq-smoothness .ui-widget-content, .ui-widget-content,
.jayq-smoothness .ui-tabs .ui-tabs-nav, .ui-tabs .ui-tabs-nav,
.jayq-smoothness .ui-tabs .ui-tabs-nav li, .ui-tabs .ui-tabs-nav li
{border:none;background:transparent;} |
But we want the active tab to stand out though, don’t we? Add the following to mimic the background, border, corner-radius and shadow of the jbox we added (if you use some of the jbox params to customize it, you can adjust this to fit):
1 | .jayq-smoothness .ui-tabs .ui-tabs-nav li.ui-tabs-selected, .ui-tabs .ui-tabs-nav li.ui-tabs-selected {background:#f9f9f9;border:1px solid #ccc !important;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;-moz-box-shadow:1px 1px 4px #ccc;} |
Here’s a tip: if you want to give your Buddypress component navigation the same style as the main and subnav tabs in your new splashpage – directories, profiles, etc. – insert this before the code above (you’ll likely need to adjust margins and padding also if you do though):
1 | div.item-list-tabs ul li.selected a, div.item-list-tabs ul li.current a, |
We also want the links in the active tabs of our splashpage to be a bit different, so let’s add the following. The first part gives a normal weight to all links, while the second part styles the active one (again, adjust to taste):
1 2 | .jayq-smoothness .ui-state-default, .jayq-smoothness .ui-widget-content .ui-state-default, .jayq-smoothness .ui-widget-header .ui-state-default {font-weight:normal;}
.jayq-smoothness .ui-state-active a, .ui-state-active a, .jayq-smoothness .ui-state-active a:link, .ui-state-active a:link, .jayq-smoothness .ui-state-active a:visited, .ui-state-active a:visited {color:#555555;font-weight:bold;} |
To make the links in the main tabs a bit bigger than the subtabs, we can add this to style TheTheFly tabs, as well as J-Shortcodes tabs that are either set to size=”normal” or have no size parameter set (defaults to normal):
1 | .jayq-smoothness .ui-tabs .ui-tabs-nav li a, .ui-tabs .ui-tabs-nav li a {padding:5px;font-size:1.1em;} |
Finally, let’s get our jboxes and main tabs nicely aligned on the left side, and make room for the larger image that changes on the right side when navigating the main tabs. Don’t forget to change the div ID to the same ID you got at the very beginning of this tutorial (if you don’t specify the div ID, and use jboxes anywhere else on your site, they will inherit these settings… not good):
1 | div#text-25 .jbox {width:620px;margin:0;} |
If everything has gone well up to now, your homepage widget should look similar to the image below:
Now, let’s get our images and icons in there, shall we? We first want to set the styles for the larger image that sits on the right, and the icon that appears in each main tab. Again, we need to specify the same div ID to ensure these styles only apply to the splashpage widget, otherwise other stuff on your site might wind up a little wonky. To do that, simply add the following in Custom CSS (if you want your icons larger or smaller than 32x32px, adjust that here):
1 2 | div#text-25 .ui-tabs .ui-tabs-panel img {float:right;margin:0 0 -52px;}
div#text-25 .ui-tabs .ui-tabs-nav li a img {height:32px;width:32px;} |
For your nav icons and images, you can upload some images to your WordPress Media Library, or link to some that you have hosted elsewhere. Whichever you choose, here’s how to get them to display properly. Go to your homepage widget and add the image you want to appear as an icon in a main nav tab just before the title text, but INSIDE the double quotes. Important: you MUST wrap the URL to the image using single quotes in the image tag or your layout WILL break. To have the same image display at its larger size on the right, simply paste the same image tag just outside the tab shortcode, but before the shortcode for the jbox (note that the larger images I’ve used are 128x128px but you can use whatever size fits your site best). The end result for each main nav tab should look like below.
1 2 3 | [tab title="<img src='http://kwitterz.com/wp-content/uploads/2011/06/fortress.png'>Main tab 1"] <img src='http://kwitterz.com/wp-content/uploads/2011/06/fortress.png'> [jbox color="gray" title="This heading stays put no matter which subtab is clicked below."] |
Now when navigating from one main tab to another, the bigger image on the right will change automatically, but navigating the subtabs won’t affect the image or the main content headline.
If you want to add some links at the bottom, enclose them in a span tag and give it a class so you can style them in BuddyBuilder. Here’s how I added mine:
1 2 3 4 5 | <span class="splashfoot"> Logo by <a href="http://cooltext.com">Cool Text</a> | Theme by <a href="http://buddylite.com/buddybuilder/">BuddyBuilder</a> | <a href="http://www.kwitterz.com/wp-login.php">Admin Login</a> </span> |
And here’s the style added in Custom CSS:
1 | div#text-25 span.splashfoot {font-size:11px;} |
Remember the Widget Logic plugin I reminded you to install? Here’s where it comes in handy: copy the following conditional to the Widget Logic field at the bottom of the widget. This will ensure that whatever we put in the text widget will only appear on your homepage to site visitors, i.e: not logged-in. Once users log in, the widget will disappear.
1 | !is_user_logged_in() |
Finally, if you want your users to be able to login directly from your splashpage without going to wp-login, go to your BuddyBuilder admin and, under the “Navigation” tab, select either setting to “Show form on frontpage” at “Login Form Options”. With all the hints you’ve gotten in this tutorial, you should be able to style it to fit your splashpage. If not, let me know, and I’ll update this. 
I hope you found this tutorial useful. 
If you have any questions or suggestions, please don’t hesitate to leave your comments below…
