1.02_CSS_Theme_ _By_Novice_For_Novice

Jason Pell edited this page Jun 21, 2013 · 2 revisions

I ended up modifying a theme for eyesight and color reasons, and I wanted to give this information to other novices who would like to give it a try. Please forgive grammar etc... I am trying to do this quickly, and between other tasks.





Table of Contents

Prerequisites

1) You must understand the basic tags for HTML code (what your browser interprets to create a viewable window screen). If not, learn a little before trying or you will be eternally frustrated.



2) You must know how to view the source HTML code from a browser window. For "Internet Explorer", it is the "View" menu, then "Source". For "Firefox", it is the "View" menu, then "Page Source".



3) You must have some sort of reference for the CSS you are going to edit. I know very little CCS, but there are a lot of sites on the Internet that can give you help.



Here is the site I used for a reference:
http://www.w3schools.com/css/default.asp

Create a Theme

1) All you need to do create your own theme is to copy the entire "default" theme directory and rename it to something else, such as "MYSITE".



Details about Themes are also available on this wiki at: Themes



By copying the directory and renaming it you can keep a "default" theme that works, and copy fresh files over those .css files that you might fatally change.



2) Activate your new theme, logging in as the administrator, and select "System Admin Tools", and then on the first screen "Configuration"/"Opendb Site" use the drop down menu to select "MYSITE" under "Default Theme". "Save" the configuration.



You could change it as a user if you have that option, but this way you will see all the elements of the configuration - Administrator sees all.



NOTE: There are a lot of files in the directory you just created. These files can only be changed with a "Text" editor.

themes.php

This file is a PHP script file which contains functions for the basic header and footer of the HTML pages. This is fairly dangerous and I would not recommend changing this unless you have a backup copy of the file readily on hand. This file contains actual code.



If you know something about HTML and PHP you can change it. If you know a little HTML, then you can make small changes by just observing the script format. Mostly commenting and uncommenting are recommended for those who know very little PHP scripting (also Me).



If you are scared don't try it.



Single line comments are made with "//" before the line.



Example #1... removes advanced search from the header.

// echo("<li><a href=\"search.php\">".get_opendb_lang_var('advanced')."</a></li>");



Multiple line comments are made with "/*" at the beginning and a "*/" at the end.



Example #2... See Jason comments at the beginning of the script.

.css scripts

All these scripts contain formatting elements for HTML code used in the Opendb scripts. If you mess these up, it should not be a serious problem because it is only formatting. The code is not touched. Just know how to change something back if you have a visual problem.



The main formatting file is "style.css". This formatting file is used with others ".css" formatting files to stylize the view of your browser screen. I will now show you the quick way to find out which ".css" files are used for a particular screen on your browser. Alternatively you can visit the Themes documentation for a more complete list: http://opendb.iamvegan.net/wiki/index.php?title=Themes#Page_Specific_Mappings



We will use the login screen as an example, because it is generally the shortest.



1) Bring up your browser and bring up Opendb. Now view the source page (see how to above) which should come up in a separate window.



2) Look at the top part of the source page. These are the ".css" files applicable to this page.



<link rel="stylesheet" type="text/css" href="./theme/MYSITE/style.css">
<link rel="stylesheet" type="text/css" href="./theme/MYSITE/login.css">
<link rel="stylesheet" type="text/css" href="./theme/MYSITE/style_nomenu.css">



3) Try this for several other screens and you will get familiar with which files are associated with the pages you are trying to change. I believe "style.css" is used every time.

.css Screen/Page Elements

Using the same quick method for finding out the ".css" files used for a screen will show you specific elements you can possibly change. I will use the "List My Items" screen.



This uses the following files which can be brought up in a text editor.



<link rel="stylesheet" type="text/css" href="./theme/MYSITE/style.css">
<link rel="stylesheet" type="text/css" href="./theme/MYSITE/listings.css">



Saving this source page as a text file will allow you to look at the data in length and dissect page into it's html elements.



You are going to find basic HTML elements like <h1></h1> and links <a></a>, as well as labeled class elements. Look back and forth at your screen and the source page.



Example #1...

<body><div id="header"><h1><a href="index.php">Opendb Library</a></h1>



This contains standard HTML code elements...



body - style.cs (body)
h1 - style.css (h1)
a - style.css (a:link, a:visited, a:active & a:hover)



Example #2... Looking further down you are going to see the rows of your listing this is an odd row broken down into its pieces. What I think the element is shown as follows at the end of the line (file.css:element).



[tr - table row] 
<tr class="oddRow"> (listings.css: .oddRow td - all odd row table data) 
 
<td class="checkbox"> (listings.css: ul.checkbox-action-links) 
<input type="checkbox" name="item_id_instance_no[]" value="359_1"> 
</td> 
 
<td class="item_type_image"> 
<img src="images/dvd.gif" alt="DVD" title="Digital Versatile Disc" border="0"> 
</td> 
 
<td class="title"> 
<a href="item_display.php?item_id=359&instance_no=1&listing_link=y">2001 - A Space Odyssey</a> 
</td> 
 
<td class="rating"></td> 
 
<td class="action_links"> 
<ul class="action-links"> (listings.css:ul.checkbox-action-links) 
<li class="first"> (listings.css:ul.checkbox-action-links li.first) 
<a href="item_input.php?op=edit&item_id=359&instance_no=1&listing_link=y"> 
<img src="theme/MYSITE/images/action_edit.gif" title="Edit" border="0"> 
</a> 
</li> 
<li class=""> (listings.css:ul.checkbox-action-links li) 
<a href="item_input.php?op=site-refresh&item_id=359&instance_no=1&listing_link=y"> 
<img src="theme/MYSITE/images/action_refresh.gif" title="Refresh" border="0"> 
</a> 
</li> 
<li class=""> (listings.css:ul.checkbox-action-links li) 
<a href="item_input.php?op=delete&item_id=359&instance_no=1&listing_link=y"> 
<img src="theme/MYSITE/images/action_delete.gif" title="Delete" border="0"> 
</a> 
</li> 
<li class=""> (listings.css:ul.checkbox-action-links li) 
<a href="borrow.php?op=update_my_reserve_basket&item_id=359&instance_no=1&listing_link=y"> 
<img src="theme/MYSITE/images/action_add_reserve_basket.gif" title="Add to Basket" border="0"> 
</a>  
</li> 
<li class=""> (listings.css:ul.checkbox-action-links li) 
<a href="item_borrow.php?op=reserve&item_id=359&instance_no=1&listing_link=y"> 
<img src="theme/MYSITE/images/action_reserve_item.gif" title="Reserve" border="0"> 
</a> 
</li> 
</ul> 
</td> 
 
<td class="username"> 
<a href="user_profile.php?uid=video&subject=2001+-+A+Space+Odyssey&redirect_link=Back+to+Listing&redirect_url=%2FOPENDB%2Flistings.php%3Forder_by%3Dtitle%26sortorder%3DASC%26listing_link%3Dy%26letter%3D%2523" title="User Profile">Owner Video (video) 
</a> 
</td> 
 
<td class="s_status_type"> 
<img src="theme/MYSITE/images/avail.gif" alt="Available" border="0"> 
</td> 
 
<td class="statuscmnt"> 
</td> 
 
<td class="borrow_status"> 
N/A 
</td> 
 
<td class="category"> 
<ul class="category">  
<li class="first"> (listings.css:ul.category li) 
<a href="listings.php?attribute_list=y&attr_match=category&attribute_type=MOVIEGENRE&s_status_type=ALL&linked_items=include&attribute_val=Adventure&order_by=title&sortorder=ASC" title="List items with same Genre" class="listlink">Adventure 
</a> 
</li> 
<li> (listings.css:ul.category li) 
<a href="listings.php?attribute_list=y&attr_match=category&attribute_type=MOVIEGENRE&s_status_type=ALL&linked_items=include&attribute_val=ScienceFiction&order_by=title&sortorder=ASC" title="List items with same Genre" class="listlink">Science Fiction 
</a> 
</li> 
</ul> 
</td> 
 
</tr>



In addition all the standard HTML elements in the "style.css" file apply such as...



select, input, textarea, td
a:link, a:visited, a:active
a:hover



these might apply from the "style.css" file:



ul.action-links
ul.action-links li
ul.action-links img



Since css file "style.css" comes before the "listing.css" file it sets up all the basic formatting, and then whatever "listing.css" specifically changes is then implemented.



You get the idea what to change, and I would suggest experimenting with color using HTML websites with color pallets or a graphics program that will give the HTML color code for a particular color.



When I get the chance, I will write about my problems with changing some elements so maybe others can tell me how I could have done my changes easier.

Opendb Library




This contains standard HTML code elements...



body - style.cs (body)
h1 - style.css (h1)
a - style.css (a:link, a:visited, a:active & a:hover)



Example #2... Looking further down you are going to see the rows of your listing this is an odd row broken down into its pieces. What I think the element is shown as follows at the end of the line (file.css:element).



[tr - table row] 
<tr class="oddRow"> (listings.css: .oddRow td - all odd row table data) 
 
<td class="checkbox"> (listings.css: ul.checkbox-action-links) 
<input type="checkbox" name="item_id_instance_no[]" value="359_1"> 
</td> 
 
<td class="item_type_image"> 
<img src="images/dvd.gif" alt="DVD" title="Digital Versatile Disc" border="0"> 
</td> 
 
<td class="title"> 
<a href="item_display.php?item_id=359&instance_no=1&listing_link=y">2001 - A Space Odyssey</a> 
</td> 
 
<td class="rating"></td> 
 
<td class="action_links"> 
<ul class="action-links"> (listings.css:ul.checkbox-action-links) 
<li class="first"> (listings.css:ul.checkbox-action-links li.first) 
<a href="item_input.php?op=edit&item_id=359&instance_no=1&listing_link=y"> 
<img src="theme/MYSITE/images/action_edit.gif" title="Edit" border="0"> 
</a> 
</li> 
<li class=""> (listings.css:ul.checkbox-action-links li) 
<a href="item_input.php?op=site-refresh&item_id=359&instance_no=1&listing_link=y"> 
<img src="theme/MYSITE/images/action_refresh.gif" title="Refresh" border="0"> 
</a> 
</li> 
<li class=""> (listings.css:ul.checkbox-action-links li) 
<a href="item_input.php?op=delete&item_id=359&instance_no=1&listing_link=y"> 
<img src="theme/MYSITE/images/action_delete.gif" title="Delete" border="0"> 
</a> 
</li> 
<li class=""> (listings.css:ul.checkbox-action-links li) 
<a href="borrow.php?op=update_my_reserve_basket&item_id=359&instance_no=1&listing_link=y"> 
<img src="theme/MYSITE/images/action_add_reserve_basket.gif" title="Add to Basket" border="0"> 
</a>  
</li> 
<li class=""> (listings.css:ul.checkbox-action-links li) 
<a href="item_borrow.php?op=reserve&item_id=359&instance_no=1&listing_link=y"> 
<img src="theme/MYSITE/images/action_reserve_item.gif" title="Reserve" border="0"> 
</a> 
</li> 
</ul> 
</td> 
 
<td class="username"> 
<a href="user_profile.php?uid=video&subject=2001+-+A+Space+Odyssey&redirect_link=Back+to+Listing&redirect_url=%2FOPENDB%2Flistings.php%3Forder_by%3Dtitle%26sortorder%3DASC%26listing_link%3Dy%26letter%3D%2523" title="User Profile">Owner Video (video) 
</a> 
</td> 
 
<td class="s_status_type"> 
<img src="theme/MYSITE/images/avail.gif" alt="Available" border="0"> 
</td> 
 
<td class="statuscmnt"> 
</td> 
 
<td class="borrow_status"> 
N/A 
</td> 
 
<td class="category"> 
<ul class="category">  
<li class="first"> (listings.css:ul.category li) 
<a href="listings.php?attribute_list=y&attr_match=category&attribute_type=MOVIEGENRE&s_status_type=ALL&linked_items=include&attribute_val=Adventure&order_by=title&sortorder=ASC" title="List items with same Genre" class="listlink">Adventure 
</a> 
</li> 
<li> (listings.css:ul.category li) 
<a href="listings.php?attribute_list=y&attr_match=category&attribute_type=MOVIEGENRE&s_status_type=ALL&linked_items=include&attribute_val=ScienceFiction&order_by=title&sortorder=ASC" title="List items with same Genre" class="listlink">Science Fiction 
</a> 
</li> 
</ul> 
</td> 
 
</tr>



In addition all the standard HTML elements in the "style.css" file apply such as...



select, input, textarea, td
a:link, a:visited, a:active
a:hover



these might apply from the "style.css" file:



ul.action-links
ul.action-links li
ul.action-links img



Since css file "style.css" comes before the "listing.css" file it sets up all the basic formatting, and then whatever "listing.css" specifically changes is then implemented.



You get the idea what to change, and I would suggest experimenting with color using HTML websites with color pallets or a graphics program that will give the HTML color code for a particular color.



When I get the chance, I will write about my problems with changing some elements so may be others can tell me how I could have done my changes easier.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.