
Last week we quietly launched another swicki customization feature - custom header/footer HTML and CSS. This new feature allows you to control the look and feel of the results page of your swicki. Swickis are search engines for your community, and we want you to be able to make them look and feel like your site or blog.
If you look at your swicki list in "My Swickis" you will see a new option labeled "Customize templates" at the top of the right column of options, above "Edit buzz cloud".
On the "customize templates" page, you will see 4 text boxes with the following labels:
- CSS styles will override the default swicki CSS
- Header HTML will be inserted in the shaded header at the top of the page
- Side HTML will be inserted below the swicki buzzcloud on the right of page)
- Footer HTML will be inserted at the bottom of the page, just before the eurekster footer links
To use this feature, you will need a solid grasp of HTML and CSS. For those of you not familiar with HTML and CSS, don't worry - we are working on an easy-to-use, intuitive interface that will allow you to easily control the same elements. We're always interested in what you would find most useful, customization or otherwise, so post a comment or send an email to swickifeedback{at}eurekster.com.
For those interested in learning a bit about CSS and HTML and how we use them in your swicki, i've posted some quick pointers to help you get started in the full blog post...
CSS styles
To change the background color of your swicki, add the following CSS code to the "CSS Styles" box:
html,body { background-color: #6799CB; }
You can replace "#6799CB" with any HTML color such as "red" or "black", as well as any hexadecimal color value. If you aren't familiar with hexadecimal color values, colorschemer provides a useful tool for picking colors and even matching palattes.
To change the header color, add this line to the CSS code, substituting your preferred hex color value.
.swickiHeader { background: #6799CB; }
Swicki classes and CSS properties
We have assigned CSS classes to all of the elements on the swicki results page. The above example refers to the "swickiHeader" class. If you would like to use a background image (such as a gradient or hatch pattern), you can add that using standard CSS.
.swickiHeader { background-image: url(http://yoursite.com/gradient.gif);
background-color: #6799CB; }
In fact, you can use any CSS property to control these elements. For a full list of CSS properties,
w3schools has a good reference.
You can apply CSS properties to style pretty much any element on the page.
The header title text:
h1.swickiSearchTitle a:link,h1.swickiSearchTitle a:visited { color: #FFFFFF; text-decoration: none;}
The search button label:
.swickiHeader .searchBtnLabel { color: #FFFFFF}
For a full list of CSS classes we use to style the page, you can review our CSS results page file. The text file lists all of the CSS properties for our default style for all swickis. In addition, based on the color palatte you selected when you customized your swicki, we add CSS properties in the head of the HTML document to that override the default. The "customize template" CSS Styles box, you can override both of these - whatever you enter into the box gets inserted in the head of your swicki results page witin a <style type="text/css"> declaration.
A handy way to apply your site's styles to your swicki is to import the CSS file URL. Simple add this code to the CSS box, substituting the URL of your file:
@import url( http://swicki.eurekster.com/css/results2.css );
One final note - when you save your changes to the "customize template" page, we validate and format your css, so don't be alarmed if your code looks different.

HTML Header/Footer
In addition to styling the CSS of the classes on the page, you can also insert your custom HTML. For security reasons, we don't allow JavaScript, PHP or any other scripting languages - they will get stripped when you save your changes.
The header HTML you enter into the "customize template" page is insterted above the swickiHeader element and above the entire swicki container, but underneath the swicki toolbar. This way you can use a header element that is liquid and spans the entire width of the browser window.
Alternately, if you want to use a header that fits exactly on top of the search box, you need to size it to 800 pixels wide.
When you include header HTML code, we turn off the title of your swicki and the byline to keep the design clean.
I'll post more tips and tricks in the future, but I'll do my best to answer any questions or comments that get posted here.
UPDATE: For a better understanding of the CSS classes we use to control the results page, check out our Swicki CSS Cheat Sheet