Optimize Your Site Styler Theme for use with the Right Skyscraper Ad Unit

by TJ, aka Dragonboy

When you insert an ad or other content into your right skyscraper ad unit, your KickApps-powered pages get wider automatically. If you're using one of the default Site Styler themes, this can make your pages look a bit off because the default images don't scale automatically. To address this issue, we've made wider images for all of the default themes, so all you need to do is paste the URLs to these wider images into your Site Styler. To get started, click the name of the theme that you're using from the list below.

Note: If you're using KickApps Classic, there's no need to change a thing! It’ll look good at any width!

Blue Monday

 

Theme Editor > Background tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_01_mainbg.jpg

←Here's where to go

 

Theme Editor > Header tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_01_headbg.jpg

← Here's where to go

 

Theme Editor > Navigation tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_01_navtop.jpg

← Here's where to go

 

Theme Editor > Sub Navigation tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_01_navbot.jpg

← Here's where to go

 

 

Purple Haze

 

Theme Editor > Background tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_02_mainbg.gif

←Here's where to go

 

Theme Editor > Header tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_02_headbg.jpg

← Here's where to go

 

Theme Editor > Navigation tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_02_navtop.jpg

← Here's where to go

 

Theme Editor > Sub Navigation tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_02_navbot.jpg

← Here's where to go

 

 

Greyscale

 

Theme Editor > Background tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_03_mainbg.gif

←Here's where to go

 

Theme Editor > Header tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_03_headbg.jpg

← Here's where to go

 

Theme Editor > Navigation tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_03_navtop.jpg

← Here's where to go

 

Theme Editor > Sub Navigation tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_03_navbot.jpg

← Here's where to go

 

 

Spearmint

 

Theme Editor > Background tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_04_mainbg.gif

←Here's where to go

 

Theme Editor > Header tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_04_headbg.jpg

← Here's where to go

 

Theme Editor > Navigation tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_04_navtop.jpg

← Here's where to go

 

Theme Editor > Sub Navigation tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_04_navbot.jpg

← Here's where to go

 

 

Red Red Wine

 

Theme Editor > Background tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_05_mainbg.gif

←Here's where to go

 

Theme Editor > Header tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_05_headbg.jpg

← Here's where to go

 

Theme Editor > Navigation tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_05_navtop.jpg

← Here's where to go

 

Theme Editor > Sub Navigation tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_05_navbot.jpg

← Here's where to go

 

 

Winter Chill

 

Theme Editor > Background tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_06_mainbg.gif

←Here's where to go

 

Theme Editor > Header tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_06_headerbg.jpg

← Here's where to go

 

 

Spring Mist

 

Theme Editor > Header tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_07_headbg.jpg

← Here's where to go

 

Theme Editor > Sub Navigation tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_09_navbot.gif

← Here's where to go

 

 

Tribal Dragon

 

Theme Editor > Background tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_08_mainbg.jpg

←Here's where to go

 

Theme Editor > Header tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_08_headerbg.gif

← Here's where to go

 

Theme Editor > Main Area tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_08_headerbg.gif

← Here's where to go

 

Theme Editor > Footer tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_08_footerbg.gif

← Here's where to go

 

 

Papyrus

The Main Area tab is actually where the Header graphic is placed... a little css magic goes LONG WAY.

Theme Editor > Background tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_10_mainbg.jpg

←Here's where to go

 

Theme Editor > Main Area tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_10_headerbg.jpg

← Here's where to go

 

 

Backyard Meadow

 

Theme Editor > Header tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_09_headerbg.jpg

← Here's where to go

 

Theme Editor > Navigation tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_09_navbg.gif

← Here's where to go

 

Theme Editor > Footer tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_09_footerbg.jpg

← Here's where to go

 

 

That 70's theme

The Main Area tab is actually where the Header graphic is placed... a little CSS magic goes a LONG WAY.

Theme Editor > Background tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_11_mainbg.gif

←Here's where to go

 

Theme Editor > Main Area tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_11_headerbg.gif

← Here's where to go

 

 

Kryptonite

Only need to change one URL here, easy as luminescent green shards of crystal.

Theme Editor > Header tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_12_headerbg.jpg

← Here's where to go

 

 

Pink Scotch

This one is the MOST involved to change because it requires almost all major images to have a fixed width to get that Navigation to pop out of the sides. But still, cutting & pasting 5 times is not much work, you can do it!

Theme Editor > Header tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_13_headerbg.gif

← Here's where to go

 

Theme Editor > Header tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_13_navbg.gif

← Here's where to go

 

Theme Editor > Sub Navigation tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_13_subnavbg.gif

← Here's where to go

 

Theme Editor > Main Area tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_13_contentbg.gif

← Here's where to go

 

Theme Editor > Footer tab:

replace the Image URL with:
http://www.kickdeveloper.com/images/w_13_footer.gif

← Here's where to go

 

 

Did you enjoy this tutorial? Have questions, comments, or want to submit one of your own? Contact us at support@kickapps.com.