Change widget layout

The layout of Astro-Online widgets is defined in a stylesheet. A default stylesheet is loaded when Astro-Online RIA is loaded. The default stylesheet however can be overwritten by simply adding another stylesheet containing the same stylesheet elements. To overwrite the default stylesheet follow these steps:

1. Create your own stylesheet

The simplest way to write your own Astro-Online stylesheet is to download the default stylesheet and change it in line with your own design. The default stylesheet already contains all the necessary classes which can be overwritten in your own version of this stylesheet. Please be aware that not every widget uses all the classes as defined in the default stylesheet. If your want to add only one specific widget to your website, you'll only need to change the classes related to that widget. In the default stylesheet you'll find which classes belong to your specific widget(s).

You can download the default stylesheet here

2. Overwrite the default stylesheet

To overwrite the default stylesheet you'll need to add a few lines of JavaScript code to your widget call. Before adding these lines of code, make sure you've uploaded your stylesheet to your web server and you have the right URL at hand. You'll need this URL to let Astro-Online know from where to load your stylesheet. The full URL must be added to your widget call through a JavaScript variable called AO_Css. Below is an example of an Astro-Online widget using an external stylesheet. The code in bold indicates the call to an external stylesheet.

<script type="text/javascript">
var AO_Css=["http://servernaam/path/stylesheet.css"];
</script>

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script
src="http://ria.astro-share.com/ao-widgets.php?AO_Container=AO_ContainerNatal&AO_Id=natal&AO_Language=en&AO_ContainerWidth=600" type="text/javascript"></script>
<div id='AO_ContainerNatal' name='AO_ContainerNatal'skin-sam'></div>

Leave a message if can't get it to work