Release 2.2 CSS Update Guide

by Chris

Important Updates

We've updated some of the CSS rules to allow increased customization throughout your KickApps-powered community.

  • Use the updated Transition Kit (all links to the Kit have been updated throughout this page).
  • Updates to the the CSS tables and diagrams below are noted in red.
  • We've changed the release date to July 17, to allow you some time to review these changes and take any necessary actions.

If you have any questions , please contact us or post a message on the KickDeveloper Message Boards.

On July 17, you'll see several new improvements to your KickApps-powered pages, including:

  • An updated home page that conforms to the other pages' "clean blue and white" design theme and can be easily customized via CSS
  • An updated member profile page that uses more HTML and bit less AJAX, for easier CSS customization
  • A wider left column on the media play page, to accommodate a larger media player

We've also added two new page-specific stylesheets:

If you've implemented any custom CSS on your community pages, you should review and edit your CSS files before July 17.

This tutorial describes the upcoming changes and how they'll affect your page layouts, so you can determine if your site will be affected and make any necessary updates. We've included diagrams of the upcoming CSS changes at the end of this page.

Step 1: Review your CSS on the new page templates

First, you'll download a preview copy of the new pages and see how they look with your custom CSS rules.

  1. Download TransitionKit_2-2.zip (1.8MB).
    It contains copies of the upcoming HTML page templates, which match the upcoming page designs with a couple of minor exceptions:
    1. All hyperlinks within these files have been disabled
    2. The video on the Play page is only a placeholder - it will not load
  2. Extract the zip file on your computer. It will create a directory called TransitionKit_2.2.
  3. Browse into the directory and you'll see 11 HTML pages and 11 similarly-named subdirectories. Each subdirectory contains a page-specific stylesheet and some other files (images, JavaScript files, etc.) that correspond to one of the HTML pages.
    Here's a breakdown of the CSS files and the corresponding pages:

CSS File

HTML Template

/playPage_files/ka_playPage.css

playPage.html

/searchPage_files/ka_listPage.css

searchPage.html

/myHome_files/ka_managePage.css

myHome.html

/messaging_files/ka_managePage.css

messaging.html

/formPage_files/ka_managePage.css

form.html

/groupPage_files/ka_groupsPage.css

groupPage.html

/messageBoard_files/messageBoard.css

messageBoard.html

/forum_files/forum.css

forum.html

/reply_files/discussion.css

reply.html

/homePage_files/ka_homepage.css

homePage.html

/profilePage_files/kap_profile.css

profilePage.html
  1. To test your custom CSS on the new page templates, paste your custom code or a link to your CSS files directly into the page templates' HTML and open them in a browser. If all of the pages display correctly, you're done.

Step 2: Edit your CSS for the new page templates

If your custom CSS rules aren't displaying correctly on the new page templates, you'll need to update them to fix any problems.

  1. From the main directory, open ka_generalStyle.css in your favorite text editor.

    Tip: For editing and debugging your CSS, we recommend Firebug, a handy Firefox add-on from Joe Hewitt.

  2. Open ka_playPage.css from the playPage_files subdirectory.
  3. Open playPage.html in a browser window.
  4. Open your live KickApps-powered site in another browser window, and browse to a video play page.
  5. Edit ka_generalStyle.css and ka_playPage.css to reflect the styling of your live video play page. Refer to the annotated screenshots below to identify the classes and IDs of the elements that you want to change.
  6. Repeat steps 2-5 for each of the HTML files in your transition kit, modifying ka_globalStyle.css and the page-specific CSS file for each page template.

Did you use the quick.css file from our previous transition kits or tutorials? Feel free to download it and use it as needed.

Wait until July 17th to upload your customized CSS stylesheets. If you upload before then, these new sheets may conflict with your current customized styles.

CSS style sheet update diagrams

This section includes tables and diagrams of the upcoming CSS changes, for your reference.

General styles: ka_generalStyle.css

Style Name Previous New Description
#ka_leftColumn width:380px width:420px We have increased the size of our video player. Video player width is now 420px
#ka_rightColumn margin:0 0 0 395px;
padding:0;
width:300px		 float:right;
margin:0 0 0 10px;
padding:0;
width:300px		 Added a float right for all right columns and reset right column width to 300px
#ka_contentContainer width:700px width:730px Increase content container to accommodate for larger video player
.ka_adWide width:875px width:905px Increase ad class ( to accommodate for larger video player
#ka_searchLetterBox #ka_searchLetterBox .ka_searchLetterBox ID has been changed to a class
#ka_letterboxComment #ka_letterboxComment .ka_letterboxComment ID has been changed to a class
#ka_TOSDiv - height:480px Height has been added to the Terms of Service

General Style additions: Nav

The Login area is now place inside an unordered list, #ka_headerLoginAuth:
Login area

Back to Top

Play page styles: ka_playPage.css

Style Name Previous New Description
#ka_playPagePlayer width:380px width:420px We have increased the size of our video player. Video player width is now 420px
.ka_statsList li width:366px width:400px We have increased the size of the stat list to accommodate our bigger video player
#ka_playPageDetails width:300px width:298px Decreased width to accommodate bigger video player
#ka_playPageRelatedTabs width:300px width:298px Decreased width to accommodate bigger video player
#ka_related width:300px width:298px Decreased width to accommodate bigger video player

Back to Top

Search page styles: ka_listPage.css

Changes listed in red were added July 9.

Style Name Previous New Description
.ka_searchList width:700px width:730px Increased width for search page
ka_searchList has been changed to a class
.ka_searchList li width:140px width: 146px;
float: left;
height: 247px		 Increased width for search page list and added float left and new height for list
li.ka_list - li.ka_list New style for search list
.ka_searchList li:hover .ka_searchList li:hover li.ka_list:hover Change hover list name
.ka_searchListDetails h3 .ka_searchListDetails h3 .ka_searchListDetails h4 Changed title header to h4
.ka_listDetails li - display:block New list element for search list
#ka_related width:300px width:298px Decreased width to accommodate bigger video player

The data for each listing is now placed in an unordered list, with classes for each row: .ka_Details, .ka_listFrom, .ka_listDate, .ka_listViews, .ka_listRating
Search results

Back to Top

New page CSS: Home page

You'll find the new home page code in the transition kit at homePage.html, and the corresponding CSS at /homePage_files/ka_homepage.css.

(All of the style changes listed in this table were added on July 9.)

Home page style changes

Style Name Current New Description
#ka_aboutModule width: 420px width: 440px Increased width for about module
#ka_videoPlayer,
#ka_tagModule		 margin: 0 0 10px margin: 0 0 20px; Increased margin for video and tag module
.#ka_blogList,
#ka_audioList		 width: 400px width: 408px Increased width for blog and audio list

home page

Back to Top

New page CSS: Profile page

You'll find the new profile page code in the transition kit at profilePage.html, and the corresponding CSS at /profilePage_files/ka_profile.css

All of the style changes listed in this table were added on July 9.

Note that we've transitioned your Profile pages' HTML from a table-based layout to a div-based layout, to enable advanced CSS customization and improve your site's search engine optimization.

Profile style changes

Style Name Current New Description
all classes and ids sample class or id: div#ka_profileContainer or div.ka_profileSeg #ka_profileContainer or .ka_profileSeg
 Removed "div" from all class and id declarations
#ka_profileLeft padding: 10px 5px 0px 5px;
margin-left:		 margin: 10px 5px 0px; Consolidated padding into margin element
#ka_profileRight width: 204px;
padding: 10px 0px 5px 0px;
margin-right: 9px;		 width: 525px;
margin: 10px 0 5px 5px;		 Changed width and padding on right column
#ka_profileLeft a, #ka_profileRight a text-decoration: underline; - Removed underline
#ka_profileComments ul li - min-height: 60px;
height: auto !important;
height: 60px		 Added minimum height for comments
all profile page section headings td.ka_kickPlace_rightColumn_header #ka_profileContainer h5 Replaced table classes with headings

Profile page

Back to Top

New page CSS: "My Home" (profile management) page

(This section was added on July 9.)

You'll find the new My Home page code in the transition kit at myHome.html, and the corresponding CSS at /myHome_files/ka_managePage.css.css

Style Name Current New Description
.ka_searchListDetails h3 .ka_searchListDetails h3 .ka_searchListDetails h4 Changed h3 to h4
.ka_searchList li float:left - Removed float left
.ka_linkList .ka_linkList - Removed style

Back to Top

Have any questions? Post them on the KickDeveloper CSS Transition Forum, where we'll happily answer them and share your experience with other KickApps community builders.

We're also available at support@kickapps.com.