File:  [mozdev] / bookmarkshome / www / styles.html
Revision 1.89: download - view: text, annotated - select for diffs - revision graph
Thu Aug 3 14:23:08 2006 UTC (11 years, 11 months ago) by jagrboom
Branches: MAIN
CVS tags: HEAD
*** empty log message ***

	<link rel="stylesheet" href="project.css" type="text/css">
    <body onload="init()">
	<script type="text/javascript">
	function init() {
	    var styleSelect = document.getElementById( "styleSelect" );
	    var selectedOption = styleSelect.options[0].selected = true;

function changeStyle() {
    var styleSelect = document.getElementById( "styleSelect" );
    var selectedOption = styleSelect.options[styleSelect.selectedIndex];
    var links = htmlFrame.document.getElementsByTagName( "link" );
    links[0].href = selectedOption.value;
    // firefox and opera
    //var loadCss = true;
    if( document.styleSheets ) {
	var sheets = htmlFrame.document.styleSheets;
	for( var i = 0; i < sheets.length; i++ ) {
	    sheets[i].disabled = true;
	    if( sheets[i].href == links[0].href) {
		sheets[i].disabled = false;
	    if( sheets[i].cssText !=  undefined ) {
		// msie
		loadCss = false;
		if( sheets[i].cssText != "" ) {
    if( loadCss ) {
	cssFrame.location = links[0].href;

    function nextStyle() {
	var styleSelect = document.getElementById( "styleSelect" );
	var selectedOption = styleSelect.options[styleSelect.selectedIndex];
	if( styleSelect.selectedIndex < ( styleSelect.options.length - 1 )) {

    function previousStyle() {
	var styleSelect = document.getElementById( "styleSelect" );
	var selectedOption = styleSelect.options[styleSelect.selectedIndex];
	if( styleSelect.selectedIndex >  0 ) {

    function hideEngines( ch ) {
	var searchForm = htmlFrame.document.getElementById( "searchForm" );
	if( ch.checked ) { = "none";
	else { = "";
(e.g. #FFFFFF in the stylesheet below)
The most important features in the <b>BookmarksHome</b> stylesheet are the colors and the font size. The<i> #XXXXXX </i>values  are values for colors. The best way to find the colors you like is to use some kind of <a href="">color chooser</a> (the style tab of the options window contains a simple color chooser too). You can change the font size by changing the<i> em </i>values (e.g. from .8em to .7em or 1.2em) or<i> px </i>values of the font(-size) property. If you want to know more you can read this <a href="">stylesheet tutorial</a>.
To use one of the stylesheets on this page, choose<i> Online... </i>in the menu with style names under the<i> Style </i>tab in the options window. 
Don't let yourself be discouraged from sending in your stylesheet if you donīt know how to make one as advanced as those below; finding good colors is an art in itself, so someone elseīs stylesheet with only the colors changed is welcome too!
<table id="styleTable" width="100%">
    <caption>Some examples of styles...</caption>
	<td id="cssTd" rowspan="2">
	    <iframe name="cssFrame" src="Bubble02Sep04Css.html" height="600" width="100%"></iframe>
	<td id="htmlTd" colspan="4">
	    <iframe name="htmlFrame" src="bmhStyles1.2.4.html" height="500" width="100%"></iframe>
    <tr id="styleNavRow">
	<td id="backTd">
	    <a class="forBack" href="javascript:previousStyle()">&lt;</a>
	    <input id="engineCheckbox" type="checkbox" onchange="hideEngines( this )">Hide Search Engines<br><br>
	    <select id="styleSelect" onchange="changeStyle()">
		<option value="cho_7-13Jun06.css" selected>cho_7-13Jun06</option>
		<option value="krys73-15Apr06.css">krys73-15Apr06</option>
		<option value="Matieu13Apr06.css">Matieu13Apr06</option>
		<option value="Barisko05Mar06.css">Barisko05Mar06</option>
		<option value="AndrewSteel04Feb06.css">AndrewSteel04Feb06</option>
		<option value="Cybolic11Jan06.css">Cybolic11Jan06</option>
		<option value="Barisko04Dec05.css">Barisko04Dec05</option>
		<option value="RodolpheCassis01Nov05.css">RodolpheCassis01Nov05</option>
		<option value="earthbound_retro_x.css">earthbound_retro_x</option>
		<option value="Hugues17Oct05.css">Hugues17Oct05</option>
		<option value="olahe25Sep05.css">olahe25Sep05</option>
		<option value="blogo22Sep05.css">blogo22Sep05</option>
		<option value="Willem23Aug05.css">Willem23Aug05</option>
		<option value="JPow16Aug05.css">JPow16Aug05</option>
		<option value="corypina14Aug05.css">corypina14Aug05</option>
		<option value="Will25Jun05.css">Will25Jun05</option>
		<option value="Estelle02Jun05.css">Estelle02Jun05</option>
		<option value="lilin31May05.css">lilin31May05</option>
		<option value="RodolpheCassis10Apr05.css">RodolpheCassis10Apr05</option>
		<option value="example02Mar05.css">example02Mar05</option>
		<option value="J-FMenard15Feb05.css">J-FMenard15Feb05</option>
		<option value="ByteWarrior28Nov04.css">ByteWarrior28Nov04</option>
		<option value="MLC23Nov04.css">MLC23Nov04</option>
		<option value="Andres03Nov04.css">Andres03Nov04</option>
		<option value="Jean10Oct04J.css">Jean10Oct04J</option>
		<option value="Jean10Oct04I.css">Jean10Oct04I</option>
		<option value="Jean10Oct04H.css">Jean10Oct04H</option>
		<option value="Jean10Oct04G.css">Jean10Oct04G</option>
		<option value="Jean10Oct04F.css">Jean10Oct04F</option>
		<option value="Jean10Oct04E.css">Jean10Oct04E</option>
		<option value="Jean10Oct04D.css">Jean10Oct04D</option>
		<option value="Jean10Oct04C.css">Jean10Oct04C</option>
		<option value="Jean10Oct04B.css">Jean10Oct04B</option>
		<option value="Jean10Oct04A.css">Jean10Oct04A</option>
		<option value="JK08Oct04.css">JK08Oct04</option>
		<option value="Lithian06Oct04.css">Lithian06Oct04</option>
		<option value="Josh05Oct04.css">Josh05Oct04</option>
		<option value="Dimiter02Oct04.css">Dimiter02Oct04</option>
		<option value="Dimiter01Oct04.css">Dimiter01Oct04</option>
		<option value="Jeroen29Sep04.css">Jeroen29Sep04</option>
		<option value="Bubble02Sep04.css">Bubble02Sep04</option>
	<td id="forTd">
	    <a class="forBack" href="javascript:nextStyle()">&gt;</a>

FreeBSD-CVSweb <>