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
Comments (21)
Wondering about a few things...
First, does the swiki search php pages? I did some test searches with the specific folder as the favored web site, and nothing came up for that website, even though I know the words was there.
Second, in IE7 the header in the manage buzz cloud drops to the middle of the page so it's hard to manage my buzz cloud.
Otherwise, great idea, it's interesting the things people will look for and it's giving me new insight into how I can relate to them.
Posted by Shawn | May 18, 2006 9:43 AM
If these functions are designed for people moderately proficient at working working with web pages, you may want to rethink how this is set up. I've followed the instructions above very carefully, and none of them work for me. I eagerly await the issue of more user friendly functions. And if anyone is so inclined, perhaps you could post an entry that updates these instructions so they work for the moderately skilled among us.
Posted by Rob | June 29, 2006 9:45 AM
I'm also having real difficulty working the CSS out
Posted by Web site designer from the UK | July 3, 2006 6:17 AM
Is there any way to add a favicon to your swicki? I have made one for my site but can't seem to get it to work. I've added the code in the header section and that did not work. Any suggestionss?
Posted by Dchi | July 16, 2006 2:11 AM
Shawn -
Thanks for the feedback.
1. Swicki's search PHP pages. We use a number of crawlers to index sites. Sometimes it takes a few hours to index your site. Try again later.
2. We're updating the HTML for IE 7 in the next release.
Tac
Posted by Tac Leung | July 16, 2006 2:52 AM
Rob -
We recognize that the customization model can be rather difficult, and have been rewriting the underlying code to make it easier, as well as building a more user-friendly customization interface. We'll let you know when they're ready.
Tac
Posted by Tac Leung | July 16, 2006 2:57 AM
I would like to insert affiliate links onto my swikis. Unfortunately, I can't seam to do this due to you not processing script language! Please help!
Posted by TWD | July 19, 2006 12:47 PM
Hello, I administer about 50 swickis and it would be great to have the choice of entering global customization codes that could be called into all Swickis at once.
I'm addicted to these things and which they could function a little faster.
Posted by sunshine | August 18, 2006 9:07 PM
Our header has dynamic content in ColdFusion. Can we use iframe to call up the header unto our swicki search results page? That way the dynamic content in the frame remains intact.
Posted by alex | September 9, 2006 4:49 PM
Really cool
"merci quel bonheur!"
thank you sir ;-)
Posted by aseed | September 12, 2006 9:14 PM
I want to find a way to make a global bookmarking option, but i cant insert javascript code into my template. any suggestions?
Cheers csab
Posted by Csaba | September 14, 2006 11:54 PM
HI. I've been playing with the css and haven't found any problems - all seems to work OK. Complete customization appears possible. I suggest the peoples having trouble persevere a bit more. Thanks for a great product.
Posted by Michael | September 24, 2006 5:22 AM
Thanks for this great service. Everything would be perfect if we could add some javascript code but other than that, I have nothing negative to say.
Posted by Chadon | September 26, 2006 11:06 AM
Quick fix anyone? I'm trying to add the header from my site. When I put the html code it appears hard left. I have tried adding align="middle" "center" and "centre" to get it to, well, centre over the results. But to no avail. Anyone got a quick fix?
Posted by Michael | October 4, 2006 11:51 PM
I am trying to add this to the header
div id="tabs-header"
ul id="tabs-primary"
but it strips out the div id and ul id and so cannot work with the css i have added.
Why does it strip out this it is not javascript etc?
Posted by peter | October 16, 2006 12:54 AM
Is it just me or has the CSS customization feature been disabled? No changes I make are being recorded and displayed. I have had no problem with full customization of my Swickis before as can be seen here http://watercolor-painting-techniques-swicki.eurekster.com/
Posted by Michael | October 16, 2006 6:26 PM
Thanks this is a great service. Really appreciated.
Yes I agree with TWD suggestion "would be great to have the choice of entering global customization codes that could be called into all Swickis at once" specially on the advertisment side.
I have no problem for CSS too it's great. Here is where I inplemented the code: http://www.music-abuse.com/pages/voice-over/voice-over.php
------------------------
Cerciello Giuseppe
music maker/producer
http://www.music-abuse.com
------------------------
Posted by gC | November 22, 2006 2:21 PM
Excellent service to customize our swicki sites. Just need to play more with CSS.
Thanks,
Carol
Posted by Carol | January 17, 2007 5:21 PM
Why can't we include metatags of our own?
Why is not robot friendly? (it has the "index no follow" description in the code)
Posted by Carlos Lorenzo | April 4, 2007 4:19 AM
Great system, thank you.
A question: The result titles are very short and end in "...". These are too short to quickly scan for an appropriate result. Is there a way to allow a longer length result? I've modified the CSS widths to 100% to accommodate, but evidently this isn't enough.
Posted by Dan | April 18, 2007 3:56 AM
I almost adapted to customize my love swicki. It's very innovative system I've ever use. Great! I'm waiting new improvement more. Thank's
Posted by ngadutrafik 2007 | May 3, 2007 6:18 AM