This is a basic tutorial to insert a side-menu container into your KickApps Community. Please Note: additional code may be required to add other custom elements in the future.
- Begin by logging in to your KickApps Affiliate Account.
- Select Configure > Pages > Global Page Template.
- Inside the MIDDLE "body" input box, insert the opening html tags of a “wrapper” container, which will encompass the standard “ka_mainContainer” and the custom container you are inserting:
<div id ="wrapper">
- Inside the BOTTOM "footer" input box, insert your right-hand navigation content "div". The div id can be anything you choose; in this example, we call it "my_rightNav":
<div id="my_rightNav">
<!-- my_rightNav content goes here --></div>The content of your "my_rightNav" div could be an ordered or un-ordered list of nav links. In this case, we use an un-ordered list:<div id="my_rightNav">
<ul id="rightNav_menu_list"></div>
<li id="rightNav_link1"><a href="http://www.mylink1.com">link 1</a></li>
<li id="rightNav_link2"><a href="http://www.mylink1.com">link 2</a></li>
</ul> - Inside the BOTTOM "footer" input box, beneath the "my_rightNav" div, insert the closing tag of your "wrapper" div:
</div>
- The basic structure holding your right-hand navigation is in place.
We will now begin to add CSS styling to "my_rightNav" to float right and to "ka_mainContainer" to float it left. This is done in order to let the browsers know how to position the divs in relation to each other.
- Create a new CSS document and name it any way you choose.
- Insert a link to this CSS document in the <head></head> section of your Global Page Template. Example: <link rel="stylesheet" type="text/css" href="http://www.mysite.com/mycommunity/mystyles.css" media="all" />
- Insert float code inside "mystyles.css":
#ka_mainContainer {float:left}
#my_rightNav {float:right} - You may also wish to specify the width and height parameters for "my_rightNav":
NOTE*: To ensure that both divs fit within your "wrapper" side-by-side, assign the "wrapper" a width equal to or exceeding that of the sum of the widths of "ka_mainContainer" and "my_rightNav"<, or else do not assign a width parameter to the "wrapper." Example:
#my_rightNav {float:right; width:200px; height:auto}
NOTE**: In case where right or left margin space is added to either floated container, you may also wish to add CSS to display these items inline. This is done to prevent Internet Explorer browsers from reading margins as being double their specified size. Example:#ka_mainContainer {float:left; width:800px}
#my_rightNav {float:right; width:200px}
#wrapper {position:absolute; width:1000px}#my_rightNav {float:right; width:200px; display:inline}
- (OPTIONAL) To give your "ka_mainContainer" and "my_rightNav" matching height, you can insert a custom "footer" div beneath the closing </div> of "ka_mainContainer":
This custom "footer" can hold information of your choice. Or it could serve one simple function: to ensure that your floated left and right divs end at the same vertical point. To that end, don't forget to float and clear the "footer" div. Assigning the "footer" a hight value of just 1px should be sufficient.
<div id="footer">
<!-- footer content is optional --></div>#footer {
height:1px;
float:left;
clear:both
}