Styling your widget

Default styling

When the widget is initiated it will take over the styling for selected elements based on the container div where the widget is loaded.

• p font-family / font-size / line-height / font-weight / color
• strong color / font-weight / background-color
• a color / background-color

*) Custom fonts might not work.
You can provide your own markup in your own CSS by implementing a custom CSS style.

For instance when the id of the div element you placed the widget in is "searchinenet" you can provide CSS markup for normal text in the widget like:

<style>
#searchinenet p {
 font-size: 12px;
 line-height: 18px;
}
</style>

Coloursets

You can provide alternative coloursets for the widget overriding the default colourset that is provided in CSS. 

Usage:

colors: {
 primaryBorder: "#ccc",
 primaryBackground: "#f9f9f9",
 primaryForeground: "#000",
 primaryHoverBackground: "#ddd",
 etc...
}

Example:

<div id="searchinenet"></div>
<script type="text/javascript">
window._sn = window._sn || [];
window._sn.config = {
    engineid: 'insert your id',
};

window._sn.widgets = [];
window._sn.widgets.push({
    container: '#searchinenet',
    engineid: 'insert your id',
    colors: {
        primaryBorder: "#ccc",
        primaryBackground: "#f9f9f9",
        primaryForeground: "#000",
        primaryHoverBackground: "#ddd",
        primaryLink: "#007AFF",

        secondaryBorder: "#006ee6",
        secondaryBackground: "#007AFF",
        secondaryForeground: "white",
        secondaryHoverBackground: "#0062cc",
        secondaryLink: "#007AFF",

        highlightForeground: "black",
        highlightBackground: "yellow"
    }
});                    
</script>
<script type="text/javascript">
	(function () {
		var snloadf = function() {
			if (typeof window.__snld != "undefined") { return; }
			window.__snld = 1;
			var s = document.getElementsByTagName("script")[0];
			var b = document.createElement("script");
			b.type = "text/javascript";
			b.async = true;
			b.id = "snscript";
			b.src = "//cdn.searchine.net/scripts/searchine.min.js";
			s.parentNode.insertBefore(b, s);
		};
		setTimeout(snloadf, 0);
	})();
</script>

Combining styling and coloursets

You should combine both styling options to create the best results

Full example: