ol'bookmarks

on line bookmarks manager

Screenshots from 0.7

Shots taken under Linux, using different browsers...
Default theme:
Here are the different views of Ol'bookmarks:

Main	Recent	New
Search	Categories	Conf
Mozilla sidebar		Opera Sidebar
Categories	Configuration	Categories


Provided themes:


BlackOrange	Boxes	Kind Of Blue	Kind Of Blue (frames)
Slashdot	Giram	Texxxt!
	Thanks to the Giram project ;-)


Other themes:
You can post your contribution in the patches submission page (in the 'Theme' category)
You only need to post a tarball of your theme files (img/mytheme/* and theme/mytheme.*)

Themes howto:
Here's the README.themes included with ol'bookmarks (since v0.7)


---

------------------------------------------------------------
This is OL'BOOKMARKS, an on-line web-based bookmarks manager
  Copyright 2001, Cyril Bellot.
  Visit Home page at http://olbookmarks.sourceforge.net/
------------------------------------------------------------

OL'BOOKMARKS THEMES HOWTO

Themes are configurable through a CSS style sheet, a  PHP  configuration
file, A PHP skeleton file and pictures. CSS and PHP  files  should  have
the same  filename.  Pictures  should  be  in  a  subdirectory  of  img/
directory, having this name too. A friendly theme name can be  given  in
the PHP config file. This friendly name will be the  one  in  the  theme
choose list of the configuration form.

___________
STYLE SHEET
The style sheet is purely HTML and should define the following styles:
    body
    a:link
    a:visited
    a:active
    font.bookmarktitle
    font.bookmarkmenu
    font.bookmarkmenuselected
    font.bookmarkmenuunfiled
    font.bookmarkmenuunfiledselected
    font.bookmarklink
    font.bookmarkref
    font.normaltext
    font.sorttext
    font.boxtitle
    h1
    h2
    h3
    td
You can of course add your personal classes to this list and use them
later in the PHP skeleton file.

__________________
CONFIGURATION FILE
The configuration file is a PHP file and should define some themes constants:

    $theme_name
	    (string)
	    This is the common name written in the themes choice list.
	    This is the friendly name...
    $theme_menu_mode
	    (string)
	    The ol'bookmarks menu can have several aspects:
		"list", "bar", "tree"
    $theme_menu_disclaimer
	    (0/1)
	    If set to 1, the disclaimer defined in the lib/config.php
	    file with $homeurl and $homename will be displayed in the menu.
    $theme_categories_mode
	    (string)
	    This specifies the main presentation mode of the categories of
	    bookmarks:
	    'tree': A tree with categories on the left, bookmarks in 
		    selected categorie on the right
	    'list': A tree with categories on the left, bookmarks in 
		    selected categorie on the right
	    'none': All bookmarks sorted by categories in the same view.
		    No menu (tree or list)
    $theme_bookmarks_columns
	    (integer)
	    This is valid for any of the previous modes.
    $theme_categories_columns
	    (integer)
	    This is only valid for mode set as 'none'.
    $theme_separators
	    (0/1)
	    This is only valid for mode set as 'tree' or 'list' and sets
	    or unsets the vertical separator.
    $theme_url_look
	    (integer 1-6)
	    This specifies the look the bookmarks will have:
	    1:	[Pic] Web site name
		      [edit] http://website.url/
	    2:	Web site name   Bookmark description [edit]
	    3:	Web site name [edit]
		      Bookmark description
	    4:	Web site name
		      [edit] Bookmark description
	    5:	Web site name [edit]
	    6:	[Pic] Web site name
		      [lang] http://website.url/ [edit]
	    7:	[Pic] Web site name
		      Bookmark description
		      [lang] http://website.url/ [edit]
    $theme_uses_frames
	    (0/1)
	    This specifies if the theme uses separate frames to display 
	    menu, categories, bookmarks, forms...

_____________
SKELETON FILE
The skeleton file is a PHP file and should first define some functions used 
by ol'bookmarks to display some elements, and then contains HTML code (with 
PHP calls to macro-functions) that will define the basic look of the pages.


    _________
    FUNCTIONS

    function custom_title($t)
    is the function used to display most of the titles. You can define the
    title looks through PHP code.

    _________
    HTML PART

    The look of the page can be defined with HTML, Javascript, etc. You only
    have to insert some PHP macro-functions calls:

	HTMLHEADERS("$htmlbodyoptions");
	    It will produce html, head, title, body tags including the 
	    theme css file.
	    The $htmlbodyoptions is used in some pages (especially to focus
	    default fields in forms) If you strip it, you will loose automatic
	    focusing but everything will work...
	    You are free to define your own HTML headers instead, but this
	    function also takes care of charset generation depending of lang.
	    If you keep this function, you can also personalize body tag and
	    add your own options to $htmlbodyoptions; eg:
		HTMLHEADERS("$htmlbodyoptions MARGINHEIGHT=0 LEFTMARGIN=0 ".
			    "RIGHTMARGIN=0 TOPMARGIN=0");

	HTMLFOOTERS();
	    The equivalent for html footers.

	HTMLMENU();
	    Displays the menu with the look defined in previously seen
	    $theme_menu_mode constant.
	    No option is needed. $theme_menu_disclaimer can define if the
	    disclaimer set in lib/config.php will be displayed.
	
	include("$lib/categorieslist_view.php");
	    Displays the categories list with the look defined in the
	    $theme_categories_mode constant.

	include("$root/show.php");
	    finaly displays the current page: bookmarks of current category,
	    search, import/export or configuration page...

    You can build your own HTML pages including these calls anywhere you want, 
    as far as the result is valid HTML code correctly interpreted by web 
    browsers...

    If you want to include pictures that will come from the img/your_theme
    directory where all the pictures needed for the themes are, you can
    use some PHP code to define the correct path; eg:
	<IMG SRC=<?=$img?>/<?=$theme?>/mylogo.png>
    or:
	<IMG SRC=<? echo "$img/$theme"; ?>/mylogo.png>
    That will in fact generate html code looking similar to:
	<IMG SRC=/olbookmark/img/mytheme/mylogo.png>

    _______
    EXAMPLE

    Here is an example of a configuration file:
    ---------------------------------------------------------------
	<?
        $theme_name="Test theme";
        $theme_menu_mode = "tree";
        $theme_menu_disclaimer = 1;
        $theme_categories_mode = "tree";
        $theme_bookmarks_columns = 2;
        $theme_categories_columns = 3;
        $theme_separators = 1;
        $theme_url_look=2;
	?>

    Here is a very simple example of a skeleton file:
    ---------------------------------------------------------------
	<?
        function custom_title($t)
        {
                print "<H1 ALIGN=right>$t</H1>\n";
        }

        HTMLHEADERS("$htmlbodyoptions MARGINHEIGHT=0 LEFTMARGIN=0 ".
		    "RIGHTMARGIN=0 TOPMARGIN=0");

        HTMLMENU();

	?>
	<TABLE WIDTH=100%><TR><TD VALIGN=TOP>
	<?
	    include("$lib/categorieslist_view.php");
	?>
	</TD>
	<TD WIDTH=2 VALIGN=TOP>
	    <IMG SRC=<?=$img?>/<?=$theme?>/vbar.png HEIGHT=400 WIDTH=2>
	</TD>
	<TD VALIGN=TOP>
	<?
	    include("$root/show.php");
	?>
	</TD></TR>
	</TABLE>
	<?
	    HTMLFOOTERS();
	?>
    ---------------------------------------------------------------

    You can also build a frameset theme. Have a look at the samples in the
    themes/ directory. This will implies you use some extra variables to
    define the frames names ($frametarget, $framefile) in your frames pages.


________
PICTURES
    3rd part of the theme after the css and the php files, some pictures 
    must be found in img/your_theme (same name here as your_theme.php and
    your_theme.css)

    The pictures should be theses ones:
	    branche1.gif	20x20
	    branche2.gif	20x20
	    branche3.gif	20x20
	    branche4.gif	20x20
	    categories.png	20x20
	    delete.png		20x20
	    down.png		12x12
	    edit.png		20x20
	    group.png		20x20
	    groupnew.png	20x20
	    key.png		 8x4
	    left.png		12x12
	    pixel.gif 	 	 1x1
	    right.png 		12x12
	    up.png 		12x12
	    url.png 		20x20
	    vbar.png 		 2x2 (can be different...)
	    hbar.png 		 2x2 (can be different...)

    Of course your own additional pictures in this directory and call them
    in the php skeleton file (see example before)

_____________________________________
BUILD YOUR THEME FROM AN EXISTING ONE

    Change to theme/ directory. Copy the existing 2 files to your new ones:
	cp default.css my_theme.css
	cp default.php my_theme.php
    (if you selected a frames-theme, copy all te frames files too)
    Edit the my_theme.conf file and change the common name field:
	$theme_name="My own theme";
    Change to img/ directory. Copy recursively the choosen existing theme
    directory to your new one:
	cp -r default my_theme

    You can then customize everything in themes/mytheme.* and img/mytheme/*
    especialy the themes/my_theme.php file to design the theme look and feel.

__________
CONTRIBUTE

    Feel free to contribute to ol'bookmarks and send me your themes through
    the Sourceforge patch submission. See:
	http://sourceforge.net/projects/olbookmarks/

---