Knowledge Base: Widget - Advanced Options

In the widget builder we give you three (3) advanced options. Header Background URL, Results Per Second and External Stylesheet URL. All of these are optional but can be fun to play with to customize your widget. I explain each below.

Header Background URL The Header Background URL is a link to an image that you want to use on your widget. The width of your image can be anything you want as long as your widget width is the same. However the height of the image needs to be set to 121px. Anything larger will be cropped and might not display properly.

Results Per Second This is the amount of time between each result. For example, a setting of 2 will have a 2 second delay before the next result is displayed. This setting must be a whole number.

External Stylesheet URL The External Style sheet allows you to create your own CSS for the widget. This option assumes that you have at least a base knowledge in how CSS works. To use custom CSS just save the attached file default.css, make the desired changes and upload the file to your favorite host. Then paste your URL in the widget builder.

Below is the default.css incase you just wanted to take a look.

body {
    color: #000;
}

a {
    /*widget uses default anchor colors
      for content links. author and date
      links are further below*/
}

/* the main widget container
   modify this if you want to fill the background color (default is transparent)
   or add a border */
#CollectaSearchWidget {
    /* example 1px border with rounded corners */
    border-width: 1px 1px 0;
    border-style: solid;
    border-color: #e9e9e9;
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

/* widget header (image container) */
div#CollectaSearchWidget div.collectaHeader {
    /*this centers your header image -- the default is top left */
    background-position: center center;
    /* rounds the top corners in Firefox and Safari/Chrome
       this is redundant to rounded corners above*/
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
}

/* widget title */
div#CollectaSearchWidget .collectaTitle {
    color: #000033;
    border-bottom: solid 2px #000033;
}

/* pause link */
#collectaSubTitle {
    color: #666;
}

/* loading message -- displays briefly while loading results */
div#CollectaSearchWidget div#collectaResults div#collectaLoading {
    color: #999;
}

/* main results display */
div#CollectaSearchWidget div#collectaResults ul  {
    /*this allows for scroll*/
    overflow-x: hidden;
    overflow-y: auto;
    /*this eliminates the bottom margin for cleaner
      transition b/w the scrollbar and the footer*/
    margin: 0;
}

        /* the next section is formatting for the various parts and types of Collecta results */
        /* the result title (for stories) */
        div#CollectaSearchWidget div#collectaResults ul li span.collectaItemTitle {
            color: #000033;
        }

            div#CollectaSearchWidget div#collectaResults ul li span.collectaItemTitle a {
                color: #000033;
            }
        
        /* author and date */
        div#CollectaSearchWidget div#collectaResults ul li span.collectaItemAuthorandDate {
            color: #999;
        }

            div#CollectaSearchWidget div#collectaResults ul li span.collectaItemAuthorandDate a {
                color: #999;
            }

            div#CollectaSearchWidget div#collectaResults ul li span.collectaItemAuthorandDate img {
                border: solid 1px #eee;
            }
        
        /* avatar/favicon image */
        div#CollectaSearchWidget div#collectaResults ul li img.collectaItemFavicon {
            border: solid 1px #eee;
            /* default padding is 1px, creating a space b/w image and border, this would
               eliminate that, if desired: */
            padding: 0;
        }

/* footer with Collecta logo and links to Collecta and the logo builder
    you may style these but please leave the logo and links
    (we'll soon have different logo options as well) */
div#CollectaSearchWidget div.collectaFooter {
    border-top: solid 2px #000033;
}

div#CollectaSearchWidget div.collectaFooter a {
    color: #000033;
}