Customizing Your KA Pages to Match Your Existing Site

by nikkibons

It's not too difficult to customize your KA site to look like your core site, but you need to be prepared to put in the time to work on it to get things looking the way you want.

GOOD NEWS!
If you already have your core site built, then carrying that established header, side navigation, and footer is pretty much as simple as copying the code you have for your main site and pasting it in your KA Affiliate Manager.

CSS IS YOUR FRIEND!
If you are not familiar with CSS, do not be intimidated. Have confidence! The design (and layout changes if you want to get a bit more advanced) you make will be done via CSS modifications. Therefore, you will need to familiarize yourself with CSS. Don’t fret -- the basics are not complicated – and the more you do it, the better you'll get at it.

GETTING PREPARED

  1. My advice is for you to browse the Tutorials here.There is a lot of good information to tell you how to change certain things in your site design. http://www.kickdeveloper.com/tutorials_landing.html
  1. Note that any changes you make to your CSS you will need to enter in your KickApps Affiliate Center under Configure > Pages > Global Page Template. The best place for CSS is in the <head></head> field of your Global Page Template. You can either create an external stylesheet, upload it to a server, and then link to it from the <head></head> field like this:

    <link rel="stylesheet" type="text/css" href="http://www.yourserver.com/yourstyles.css" media="all" />

    ...or write css directly into the head field, like this:

    <style type="text/css">
    ::put your style rules here::
    </style>
  1. Be prepared for the fact that there is going to be some trial and error as you customize your pages. Even world-class coders make mistakes and have to backtrack sometimes. I recommend always saving a backup of the latest version of your CSS modifications, header and footer code locally before you begin. This way, if you make so many changes that you can't backtrack if you make a mistake, you can always revert back to your previous version and go from there. Clean slate!

THE NITTY GRITTY
Step 1: Your Header, Side Navigation (if applicable) and Footer code

  1. Copy the code that you have established in your main site's header. Change any relative links and img srcs to absolute links and img srcs (e.g. <img src=”/images/image1.gif"> becomes <img src=”http://www.mysite.com/images/image1.gif”>; <a  href="contactus.html"> becomes <a href=http://www.mysite.com/contactus.html”>)
  2. Do the same thing for your side navigation.
  3. Do the same thing for your footer.

The combination of your header code from step 1a and your side bar code from step 1b is what you are going to copy and paste into your KA Affiliate Center under: Site Settings>Enter Header & Footer Code in the 2nd field right after the <body> headline

Step 1c is what you will enter under: Site Settings>Enter Header & Footer Code in the 3rd/last field right before the </body> headline.

BUT before you do any of that, you need to add some code that will place the main KickApps content within the layout for your header, side nav and footer...

 

Step 2: Prepare to Fit It All Together
The easiest way to get your KickApps content, your header, your side navigation and footer to fit together in harmony is with CSS div's.

Create CSS rules similar to these (this is similar to what worked for me, however there are many other ways this can be done). Add these IDs to your external style sheet or paste them in the CSS Rules area (mentioned above in #2 under “getting prepared”).

#everything {width:___px}
width here should be the width of your entire site, likely equal to the width of your
top header

#myheader {width:___px}
width of your header

#myleftnav {float:left; width:___px !important;}
width of your left nav

#mainkacontent {float:left; width:___px !important}
width here should be the difference between the width of your #everything class minus the
width of  #myleftnav --  if you add margin to any of these things, make sure you add the widths
of your margins to the total width of the class

#myfooter {width: ___px}
width of your footer, likely to be equal to the width of your header

You can also specify other things in these classes like padding, font style, color, border, margin, background images and so on.

If you have a right navigation and a left navigation, create another class like #myrightnav, with the float declaration. Your #mainkacontent div will need to be that much smaller in width.

Step 3: Modifying your HTML from Step 1 to use your Step 2 Classes
This is where the magic happens. :)

  1. Paste the following in your Affiliate Center under Site Settings>Enter Header & Footer Code in the 2nd field right after the <body> headline:
    2. <div id="everything”>

    <div id="myheader">
    <!-- enter your header code from Step 1a here-->
    </div>



    <div id="myleftnav”>
    <!-- enter your side nav code from Step 1b here-->
    </div>



    <div id="mainkacontent”>

    That's it for this field. All of your KickApps content should populate itself right after this div. That is why you are leaving it open. You will close this div in the footer section in Step 3b below.

  2. Paste the following in Site Setting>Enter Header & Footer Code in the 3rd/last field right before the </body> headline: </div> <!-- this closes the #mainkacontent div you opened above -->

    <div id="myrightnav">
    <!--if you have a right nav, enter the code here, if not leave this out.-->
    </div>

    <br clear="all"> <!--don’t ask me what this is for -- it worked for me to keep my footer
    in the right place for some reason.    -->

    <div id="myfooter”>
    <!--enter your footer code from 4c here-->
    </div>

    </div> <!--this closes the #everything div you opened at the very beginning.-->

DONE!
This should be a great start for you. Of course you will need to make modifications that suit your needs. Once you have all of this done and have established your core site foundation/layout, you can start to customize the design of your Kickapps content (colors, fonts, etc) by finding the CSS classes you want to change, making the modifications and pasting the modified classes in your Site Styles or by modifying your external style sheet.

If you don't have a FireFox browser, get it and download the developer add-ons that make it easy to find classes and make CSS edits, like Firebug. It is great for many reasons, one of which is that it allows you to preview what CSS modifications would look like before you finalize them by pasting them in your site styles. Be sure to read other tutorials here for more on this.

Happy Customizing!

Did you enjoy this tutorial? Have questions or comments? Send a private message to the author of this tutorial or post a reply to the discussion where it was first published.