Ever wanted to add your own stuff to the rail like the (
once available but no more) Premium accounts? You can do it with some CSS and HTML tricks. You won't have as many features as them but it should work for adding a simple widget (for example a weather or map widget) to the rail.
If you want to make it visible in all of your pages, you must add the HTML code to your Page Title. If you want it only on your main page, add the HTML code to your Welcome box.Let's start with the simplest code: it's just HTML, so you don't need to change your CSS. For example:
<div style="background-color: transparent; width: 160px; position: absolute; top: 1300px; right: 115px;"><img src="Image_URL"></div>It will put the image hosted in
Image_URL in the fixed vertical position
1300px in the right rail so it will be below the ads. The trick is using the
div to position it
absolutely (i.e. not relative to other boxes in your page) so it will have a fixed position on your page. The
div will be positioned 115 pixels to the left from the
right margin and have a
width of 160px, the usual rail width. As you probably noted it used standard CSS commands in the
style tag, just like what you use in your CSS (check the basic CSS commands in
this previous post).
Note: you may need to adjust the position values, specially
right, to suit your theme better. You can start using 0px and then make it bigger or smaller (negative values) to place it where you want. The values above are usually good for Avlack-based themes. Some other reference values:
- Skyline
top: 1300px;
right: 0px;
- Clean:
top: 1000px;
right: -20px;
You can do the same, using a more simple and stylish code if you first add this to your Custom CSS (pay attention to the dot in the
selector's name):
.widget1 {background-color: transparent;
width: 160px;
position: absolute;
top: 1300px;
right: 115px;}and then add this one to your page (either Page Title or Welcome box, as I said previously, it's up to you):
<div class="widget1"><img src="Image_URL"></div>Note that I use
widget1 as the name of the
selector in the CSS, so I must use the same name for the
div class in the HTML code.
Of course you could use the background tag to add the image in your CSS also, but this way you can add other stuff to your page, like a cool Flash weather forecast that would not work otherwise. For example, you can add a clock in that position using this HTML code:
<div class="widget1"><embed allowscriptaccess="never" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://poq-space.com/Files/clocks/clock22.swf" width="120" height="100" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed></div>I simply have to add the widget code between the
div's, and as all the positioning and extra style is in the CSS, the code I need to add to my page is much smaller and simpler.
If you want to make the widget static, i.e. it won't move when you scroll the page, use
fixed instead of
absolute. This way you can create an 'always visible' widget. You may need to use a high
z-index value too so it will float above all other things. For example:
.widget1 {background-color: transparent;width: 160px;position: fixed;bottom: 50px;left: 10px;z-index: 1000000;}You can create more
selectors for
div's in your CSS to add more than one widget or image to your page using HTML, just use the correct position so one won't overlap the other and a pair of
div's for each widget when adding the HTML to your page. The options are almost endless. Enjoy!
Acknowledgements:
dantcer for the example code and
alogena (
link to her group) for original the idea.
Link: 
Link: 
