How To Hide Stuff with CSS

by Josh

The KickApps platform provides an integrated suite of components for user-generated content and social networking, but depending on the needs of your site, you may not need all of these components. Several affiliates, for instance, have scaled down their KickApps implementations to video only. To see what this can look like, check out the Lemon Your Widmer site. In this tutorial, I'm going to show you how to do this with CSS. You can then apply the same process to remove any element on the KickApps platform. The general strategy is to find the id of the element that you want to remove, and then apply the display:none declaration to it, like this:

#ka_element {display: none}

The easiest way to find the id of an element is to use Firebug (a Firefox add-on), so if you haven't installed it yet, you should do so now.

Here's how the KickApps platform looks by default:

To turn this into a video-only community, we need to remove all of the tabs except for "videos". Here's how:

  1. With Firebug installed, open a new browser window in Firefox, and browse to your KickApps-powered site.  
  2. In the Firefox menu, click Tools > Firebug > Open Firebug. The Firebug panel will appear.
  3. On the top left of the Firebug panel, click Inspect.
  4. Hover over the "audio" tab in the page above. You should see something like this:
  5. Notice the highlighted code in the Firebug panel (magnified above). This is the HTML for the audio tab element that you're hovering over. As you can see, it's a <li> with the "ka_audioTab" id. Below it you can also see the ids for the photo, blog, member, and groups tabs.
  6. Since we want to remove all of the tabs except for "videos," our CSS rule will be:

    7. <style type="text/css">

    #ka_audioTab, #ka_photoTab, #ka_blogTab, #ka_memberTab, #ka_groupsTab, #ka_messageBoardsTab {display: none !important}

    </style>
  7. Notice the "!important". We need to increase the weight of this rule, because as you can see on the right-hand side of the Firebug panel, <li>s inside of #ka_header are set to display: inline. That means that our rule would be over-ruled without the !important. We could have raised the weight of this rule in other ways, but the !important will ensure that these tabs never appear, regardless of what CSS we might add in the future.
  8. Log into the AC and browse to Configure > Pages > Global Page Template.
  9. Paste the CSS rule from step 6 into the <head></head> section of your Global Page Template.
  10. Click "save"

Here's how your nav will look now:

We've now removed all of the tabs except for videos! You can use the same process to remove any element from the KickApps platform. In the next tutorial, I'll show you how to add new tabs to the main navbar.

Did you enjoy this tutorial? Have questions, comments, or want to submit one of your own? Contact us at support@kickapps.com.