Customizing Your Community Using CSS

by Danny, Thursday, July 17 2008, 03:52 PM by

The beauty of the KickApps platform is the complete functionality and ability to alter the style to any element of any module on any page.

With the help of CSS and Firebug, making your KickApps-powered community one of a kind, will be made simple in just a short amount of time. In this tutorial, I will assist in making this happen for your community!

Site Styler

Site Styler

The Site Styler is a blessing in disguise for some of us. If you haven't got much CSS experience and your just looking to build a quick and easy community with your own color scheme or images, then look no further. The Site Styler enables you to quickly and easily style your site in minutes!

From the page background to the footer, to the content blocks and font colors, the Site Styler can be of much assistance to you. But if you're trying to insert images for the menu tabs, or you want to style each content block individually, or maybe you just want to display certain elements differently, then maybe you should check out the next section of this tutorial!

Basic CSS

First and foremost, CSS (Cascading Style Sheets) derives from the word cascade, meaning to overlap or flow.  Before CSS, developers had to insert each style into the HTML, making the code difficult to read.  With the power of CSS, it makes coding much more convenien. By attaching numerous Style Sheets, you can target each element as specifically as you want, thus putting you even more in control of your styles then ever before.

Each CSS definition is composed of only 3 components; the selector (element that you wish to style), the property (the actual property title), and the value (the style you would like to apply to that property).  The syntax is quite simple, for example: 

body {
background: #000000;
}

Classes

Classes, in CSS, are signified by placing a period (.) before the selector name.   So let's assume we have a class named 'class1' and we would like to set the text color to blue: 

.class1 {
color : #0000FF;
}

Now for every element with the class name class1, the font color will be blue, throughout out the page.

IDs

Unlike classes, IDs are defined by a number sign (#) preceding the selector name. Once again, let's assume we now have an element with the ID named 'container'. We would like to set the size of container to 200 pixels by 200 pixels and we would like the text color to now be red: 

#container { 
width: 200px; 
height: 200px; 
color: #FF0000; 
}

Keep in mind, when using an ID it will only affect that single element on the page. However, an element can carry an ID and a class. In this case, which ever command is executed last, according to its position in the HTML, will take precedence over the previous command.

If the HTML looks something like this: 

<div id="container" class="class1"></div>

The element will inherit the width, height, and color from the ID style, but then the color will be overwritten by the class style, due to the structure of the HTML.

Implementing CSS Within KickApps

Now this is what you've all been waiting for, how to implement this into your KickApps-powered community site! Before we can get started with this, you have to understand how CSS works. The term Cascading Style Sheets derives from the word cascade, meaning, a succession of stages, processes, operations, or units. So this means, with CSS, a property value can be overwritten, to display another style, by a later call to that property.

KickApps already has a number of style sheets attached to the platform, styling your pages, now you are about to go ahead and create another to specify your own custom styling. In most cases we'll have to the overwrite the styles predetermined in the KA General Styles page. To do this, we will have to first identify the operative CSS property and value, for a given element. Next we will replace this property value with a new, more appropriate value. When we finally upload the custom CSS file to the Global Page Template, the server will load this file preceding the KA style sheets, therefore giving your custom styles precedence over the existing styles.

You now know the basics, well enough to edit the style of your community. So first I'll list the main elements associated within the KickApps page, then I'll give you a little walk through of how to use this to your advantage.

  • body -- The body is actually everything on the page. This is not an ID or a class, therefore it doesn't have a period or number sign when calling it in the CSS file. KickApps has made it easy for you to specify elements dependant on the page by also including IDs in the body.
  • #ka_mainContainer -- This is exactly what it's titled, the main container. Everything displayed on the page is nested within this element.
  • #ka_le_headercont -- This contains the title of your site and displays your title image. Using CSS you can replace the default KickApps image with your own. By setting {text-indent: -9999px;} it will shift the text off the screen, making it look as if it's hidden.
  • #ka_header -- This is a container that holds the TopNav, SubNav, and BtmNav.
    • #ka_headerTopNav -- This is your menu bar. It contains a tag for each navigational tab.
    • #ka_headerSubNav -- The SubNav is what appears directly below the TopNav. It contains categories associated with the current TopNav tab selected.
    • #ka_headerBtmNav -- Here you will find the login/register/password links as well as the search bar.
  • #ka_contentContainer -- Everything between the #ka_header and the #ka_footer.
    • #ka_leftColumn -- The left column of the page, contains different modules per page.
    • #ka_rightColumn -- The right column of the page, also contains different modules per page.
  • #ka_footer -- This the entire footer section at the bottom of the page. Contains the #footerUser.
    • #footerUser -- This is simply the links located inside the footer.

 Now those are the core elements that make up the KickApps pages. You might be wondering what good that is to you, well I'll show you. On my KickApps community, MyJetsNation.com, I have taken full advantage of every aspect of CSS. Here I will walk you through the steps I took to get my page to look this way.

 The most important thing to do first is gather all your ideas. Using an application such as Adobe Photoshop, you're going to want to create the images you plan to use. This is an example of a quick mock I made for my community:

Most designers are never satisfied with their first mock, so don't be discouraged if it doesn't look good right away. Once your images are all completed and uploaded, you can begin to insert them into your site.

 Each KickApps page is broken down into 3 main sections; Header, Footer, and everything in between. For the sake of this tutorial, lets call that middle-ground, the ka section. This seems appropriate, considering each element name in that area begins with ka_.

 The header contains the top image, and nav. The footer contains the links at the bottom of the page. Obviously the ka section is made up of everything else on the page. Now its time to learn some CSS.

 Let's start with a default KickApps page:

Default Template

  • Step 1
Set the page background. 
body{background:url("http://www.myjetsnation.com/images/bodybg.jpg";);}

 That snippet of CSS came from my site. This will set the body background to the image specified in the path. Without inserting a repeat-x, repeat-y, or no-repeat command, the browser will tile the image by default.

Step1.jpg

  • Step 2
Set the main container style. 
#ka_mainContainer {
margin:0 auto; 
padding:0; 
width:950px; 
background:url('http://www.myjetsnation.com/images/contentbg.jpg') repeat-y;
}
 

 This code snippet sets the width to 950 pixels, and centers the element on the page. It also sets the background image and repeats along the y-axis (vertically).

Step2.jpg

  • Step 3
Insert header image. 
 
  #ka_le_headercont {
    text-indent:-8000px; 
    background:url('http://www.myjetsnation.com/images/header.jpg') no-repeat; 
    height:105px;
    width:910px; 
    margin:0 auto
  }
 

 Notice inside the background property value. I've inserted the no-repeat command to be sure that my header image doesn't tile. I've also set the height and width to fit my image. By setting the margin to '0 auto' it will automatically center the image in the body.

Step3.jpg

Those are three fairly simple excerpts, so it's time to move on to something a bit more challenging! After the page background and header, the next important element to style would be the menu. There are many different ways to style your menu bar. I had chosen to set a background the width of the mainContainer, I then inserted an image in place of each link on the menu.

  • Step 4
Apply images to the menu. 
 
  #ka_headerTopNav {
    margin-left:7px;
    padding-top:0px;
    height:32px; 
    width: 910px; 
    background: url('http://www.myjetsnation.com/images/TopNav.gif');
  }
 
  li#ka_homeTab a {
    width:67px; 
    background: url('http://www.myjetsnation.com/images/menu.gif') top left;
  }
 
  #ka_headerTopNav #ka_headerTopNav_ul li.current a#ka_homeTab_nav, #ka_headerTopNav #ka_headerTopNav_ul #ka_homeTab a:hover {
    width:67px; 
    background: url('http://www.myjetsnation.com/images/menu.gif') left -37px;
  }
 

 The first line of code you see there sets the image for the menu bar. The second line sets the image for the home tab. Finally, the third line applies a different image to the tab for the hover and current state. If two properties hold the same value, it is useful to put them on the same line, to keep away from duplicating code. When it comes to overwriting the KickApps styles for the menu, you must be sure to specify the exact path it takes to get to that element. Simply calling #ka_homeTab won't do the trick.

Step4.jpg

  • Step 5
Stylize the subnav. 
 
  #ka_headerTopNav {
    margin-left:7px;
    padding-top:0px;
    height:32px; 
    width: 910px; 
    background: url('http://www.myjetsnation.com/images/TopNav.gif');
  }
 

 Here we set a 7 pixel margin to the left of the subnav to make it appear to be indented. Height and width are set, background is set.

Step5.jpg

  • Step 6
Finish rest of styles.

 With the information I have provided for you, you should be able to now go in and finish styling the rest of your page. You can set the background in the content boxes, as well as the content box headers, the footer, and anything else you may deem worthy of some extra styles. Here's a look at my finished product, to give you an idea of what you can be capable of.

Step6.jpg

Firebug

 

 Firebug can be used for a number of things, but for the purpose of this tutorial, we will focus specifically on the CSS aspect of this Firefox plug in. If you haven't already done so, download Firebug here.

 The most important feature of Firebug (from a CSS point of view) is the Inspect option. By clicking the Firebug icon, located in the bottom right corner of your browser window, you will open the control panel. The first tab from the list on the Firebug menu is the Inspect tab. You will notice that once activated, you can inspect every single item on the page. This will help you determine the ID's and classes of the items you would like to edit. When you hover over an element, firebug displays a border around the perimeter of the element so that you can really see the entire object.

To inspect the element, simply click it and you will get a complete breakdown of the HTML as well as the CSS. By default the CSS will pop up in the right column of the control panel and it can be edited through there.

Firebug.jpg

After inspecting the item, you can now click the style tab on the right panel to see all properties attached to the current element. What's great about this feature is that you can actually see every style that is applied to this element in all attached style sheets. To the right of the property values, you can actually see which style sheet is loading these values, which ultimately makes it easier to edit.

FireBugStyle

These edits will happen in real time, meaning you dont have to update your CSS files to see the changes. However, once the page is refreshed, you will lose these edits. Therefore, it is a good practice to go in and update your CSS file each time you have something you want to keep.

Once you have played around a bit with Firebug, and gotten the hang of it, you'll be ready to move on. If you're still unsure of the Firebug functionalities, you can view a more complete Firebug tutorial at evotech.net.

Global Page Template

 

You've created your style sheet, all the work is done, so now what?  The last step to styling your community, is linking your style sheets.

Navigate through your affiliate center to the Global Page Template, it can be found under the Configure tab by clicking Pages in the sub nav.  Inside the <head></head> tags, is where you will link your style sheets.  Locate the path, on your server, in which you have uploaded your CSS files to.  Now paste this into the text box, replacing the href with a link to your file:

<link rel="stylesheet" type="text/css" href="http://www.kickapps.com/STYLES.css"/>

AffiliateCenter.jpgtop

So that will just about do it for this tutorial. Hopefully it was helpful to everyone, and if anything seems unclear to you or you've got any questions, head on over to the KickDeveloper.com Message Boards.

Did you enjoy this tutorial? Have questions, comments, or want to submit one of your own? Contact us at This e-mail address is being protected from spambots. You need JavaScript enabled to view it .