This page is outdated. You can now add custom CSS to your pages via the Global Page Template in the Affiliate Center under Configure > Pages. For advice on editing your CSS, see Customizing KickApps CSS v2.1.
Our First Tutorial: Editing the KickApps CSS
by Pete Clark
The purpose of this guide is to help you edit the CSS of your KickApps Page Experiences (PEs) such that the PEs will match your web site. We understand that the CSS is big, and editing it can seem a daunting task, but with the tools and tips mentioned below, we hope to make it easy for you.
First, grab and install the following browser, making sure to choose the option to install developer tools as well.
Now install the following extensions:
This guide will show you how to edit the global CSS, currently residing in the Affiliate Center under Site Settings -> Site Styles. Also under Site Settings is the Header and Footer tab, which lets you wrap all of our pages with your own header and footer HTML.
For the purposes of this guide we'll assume that you've already placed your common nav bar code (or, whatever code you like!) in the header and footer. If not, it's something you can always go back and do later.
Start by logging into the Affiliate Center (AC) and browsing to Site Settings->Site Styles. Download the main.css file, which is referenced on the page as indicated by the red arrow below:
Save a copy of this to your local machine (with a new file name, for clarity when editing, noted later), then upload it to one of your servers that is visible on the Internet. In the "CSS Rules" field, put the URL to this file you just uploaded, e.g. http://www.yoursite.com/css/myKickApps.css. (You can also choose to put CSS code directly into this text area, instead of a URL to your CSS file, but the main benefit of maintaining your own CSS file is that you can edit it on your server and not have to log into the affiliate center every time you want to make a CSS change).
Submit the form, saving your changes. Note that since this CSS currently matches our main css completely, this will have no effect on your PEs.
Now, if you're just starting out, you'll need a way into your community to browse to all of the pages for which you'll be editing the CSS. Click the KickApps logo at the top of the AC, and grab the embed code from the All-in-one widget displayed on the resulting page.
Paste this into a local HTML file on your computer, and load that up in Firefox. You'll see the All-in-one widget.
Currently we have the following pages:
- Play page
- List page
- Edit profile page(s)
- View profile page
- User registration page
- User login page
Start with whichever page you like, but we recommend the play page. Click one of the videos in the widget you just loaded in your browser, and you're taken to the play page. You'll see it's our default white background with grey / blue text.
To edit this page to match your site, you'll probably want to change the background color, the font or font size, text and link colors, etc. First, let's get the Edit CSS pane open. If your Web Developer toolbar isn't visible yet, choose View->Toolbars->Web Developer Toolbar from the main Firefox menu, as shown:
Now on the Web Developer toolbar, click CSS -> Edit CSS, as shown:
This will pop up a left hand pane, showing one tab for each CSS currently loaded for your current page:
Note: You'll be making changes to the tab with the CSS file name that you uploaded to your server (myKickApps.css if you used the example file name)… not the main.css.
How handy this tool is! Tweak any value in your CSS and see it change instantly in the page. Of course, you are just seeing this change locally for now.
Right click anywhere on the page itself, then choose view formatted source -> enable inline mode.
This might look ugly at first, but what this does is visually separate your page into sections on which you can click to view snippets of HTML source:
Click the "source" button on any section, and a window will pop up showing the formatted source:
It should be easy to identify the element you're trying to style, and when you do find it, move your mouse over the element in the source, and, assuming you've installed the developer tools when you installed Firefox as instructed above, you'll see a pop up with the exact CSS code being applied to that element, as well as the source CSS file name and line number! Make the changes you desire to this element in the Edit CSS panel (again, just in the tab for your css file). Notice how your changes change the page real-time. When you're finished making changes to that section of the page, close the view formatted source window and move on to the next section of the page, click "source," and repeat the above.
Note: You'll want to regularly save the contents of your edited CSS to a file on your local file system, because if you happen to reload the page before you're finished making changes, you'll lose all of them.
Continue editing the various sections of the page until you are happy with how it looks. When you are, save the file again, and upload the modified CSS to your server, overwriting the old one (back up the old one first, if you wish). Now, when you refresh the page, you'll see your modified CSS applied and ready to go.
Move on to the next page experience, and repeat the above steps for each of them, until you're happy with the look and feel of all of your KickApps page experiences.
Did you enjoy this tutorial? Have questions, comments, or want to submit one of your own? Contact us at support@kickapps.com.