Login
Username:

Password:

Remember me



Lost Password?

Register now!
Main Menu
Site Info
Webmasters
admin
admin

Who's Online
5 user(s) are online (4 user(s) are browsing XOOPS Docman)

Members: 0
Guests: 5

more...

Chapter 3. CSS Files

3.1. style.css

The style.css Cascading Style Sheet is the main style sheet of a theme. This is loaded in all user-side pages, be it the Home page, the News module or the View Account page.

Line 1-17

body {color: black; background: white; margin: 0; padding: 0;}

table {width: 100%; margin: 5; padding: 5; font-size: small}
table td {padding: 0; border-width: 0; vertical-align: top; font-family:
Verdana, Arial, Helvetica, sans-serif;}

a {color: #666666; text-decoration: none; font-weight: bold;
 background-color: transparent;}
a:hover {color: #ff6600;}

h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
ul { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;}
li { margin-left: 2px; list-style: square inside; color: #2F5376}

input.formButton {}

These load the general styles to page elements. As can be seen, this is where the body and link attributes of the pages are determined.

Line 19-31:

.item {border: 1px solid #cccccc;}
.itemHead {padding: 3px; background-color: #2F5376; color: #FFFFFF;}
.itemInfo {text-align: right; padding: 3px; background-color: #efefef}
.itemTitle a {font-size: 130%; font-weight: bold; font-variant: small-caps;
color: #ffffff; background-color: transparent;}
.itemPoster {font-size: 90%; font-style:italic;}
.itemPostDate {font-size: 90%; font-style:italic;}
.itemStats {font-size: 90%; font-style:italic;}
.itemBody {padding-left: 5px;}
.itemText {margin-top: 5px; margin-bottom: 5px; line-height: 1.5em;}
.itemText:first-letter {font-size: 133%; font-weight: bold;}
.itemFoot {text-align: right; padding: 3px; background-color: #efefef}
.itemAdminLink {font-size: 90%;}
.itemPermaLink {font-size: 90%;}

These are style classes specific for the News module and how the News articles are rendered.

Line 33:

th {background-color: #2F5376; color: #FFFFFF;
 padding : 2px; vertical-align : middle;
 font-family: Verdana, Arial, Helvetica, sans-serif;}

This is a general style attribute for table headers. This is important to consider when tables are used in blocks and modules, e.g. forums, recent posts block, contact us.

Line 35-36:

td#headerbanner {width: 100%; background-color: #2F5376;
 vertical-align: middle; text-align:center;}
td#headerbar {border-bottom: 1px solid #dddddd;
 background-image: url(hbar.gif);}

These style ids are specific for the Header Table. Note that the header bar image (hbar.gif) is called from the style.css as a background image and not directly from the theme.html.

Line 38-41:

td#leftcolumn {width: 170px; border-right: 1px solid #cccccc;
 font-size:12px;}
td#leftcolumn th {background-color: #2F5376; color: #FFFFFF;
 vertical-align: middle;}
td#leftcolumn div.blockTitle {padding: 3px; background-color: #dddddd;
 color: #639ACE; font-weight: bold;}
td#leftcolumn div.blockContent {padding: 3px; line-height: 120%;
 line-height: 120%;}

These style ids and classes are specific for the Left Column. Note the style attributes used for the Left Block Titles and Left Block Content.

Line 44-57:

td#centercolumn {font-size: 12px;}

td#centercolumn th {background-color: #2F5376; color: #FFFFFF;
 vertical-align: middle;}
td#centerCcolumn {padding: 0px 3px 1px 3px;}
td#centerCcolumn legend.blockTitle {padding: 3px; color: #639ACE;
 font-weight: bold; margin-top: 0px; margin-right: 0px;  margin-left: 0px;}
td#centerCcolumn div.blockContent {border-left: 1px solid #cccccc;
 border-right: 1px solid #cccccc; border-bottom: 1px solid #dddddd;
 padding: 3px; margin-right: 0px;  margin-left: 0px; margin-bottom: 2px;
 line-height: 120%;}

td#centerLcolumn {width: 50%; padding: 0px 3px 0px 0px;}
td#centerLcolumn legend.blockTitle {padding: 3px; color: #639ACE;
 font-weight: bold; margin-top: 0px;}
td#centerLcolumn div.blockContent {border-left: 1px solid #cccccc;
 border-right: 1px solid #cccccc; border-bottom: 1px solid #dddddd;
 padding: 3px; margin-left: 3px; margin-right: 2px;
 margin-bottom: 2px; line-height: 120%;}

td#centerRcolumn {width: 50%; padding: 0px 3px 0px 0px;}
td#centerRcolumn legend.blockTitle {padding: 3px; color: #639ACE;
 font-weight: bold; margin-top: 0px;}
td#centerRcolumn div.blockContent {border-left: 1px solid #cccccc;
 border-right: 1px solid #cccccc; border-bottom: 1px solid #dddddd;
 padding: 3px; margin-left: 2px; margin-right: 3px;
 margin-bottom: 2px; line-height: 120%;}

These are the style ids and classes of the all the center blocks: the center-center blocks (centerCcolumn), the center-left block (centerLcolumn) and the center-right blocks (centerRcolumn).

Please note that the font-size of the center blocks and module content is determined here (centercolumn).

Line 59:

div#content {text-align: left; padding: 8px;}

This is the specific div that contains the module contents. The text-align attributes and padding are defined here.

Line 61-64:

td#rightcolumn {width: 170px; border-left: 1px solid #cccccc;
 font-size:12px;}
td#rightcolumn th {background-color: #2F5376; color: #FFFFFF;
 vertical-align: middle;}
td#rightcolumn div.blockTitle {padding: 3px; background-color: #dddddd;
 color: #639ACE; font-weight: bold;}
td#rightcolumn div.blockContent {padding: 3px; line-height: 120%;}

These style ids and classes are specific for the Right Column, if it is to be displayed. Note the style attributes used for the Right Block Titles and Right Block Content.

Line 66:

tr#footerbar {text-align:center; background-image: url(hbar.gif);}

This is the id used for the Footer Table. Take note that the background image is the same with the Header Bar. It is declared here in the style.css and not in the theme.html.

Line 68-72:

td#mainmenu a {background-color: #e6e6e6; display: block;
 margin: 0; padding: 4px;}
td#mainmenu a:hover {background-color: #ffffff;}
td#mainmenu a.menuTop {padding-left: 3px; border-top: 1px solid silver;
 border-right: 1px solid #666666; border-bottom: 1px solid #666666;
 border-left: 1px solid silver;}
td#mainmenu a.menuMain {padding-left: 3px; border-right: 1px solid #666666;
 border-bottom: 1px solid #666666; border-left: 1px solid silver;}
td#mainmenu a.menuSub {padding-left: 9px; border-right: 1px solid #666666;
 border-bottom: 1px solid #666666; border-left: 1px solid silver;}

These are the styles used for the Main Menu block. As can be seen, the style.css differentiates between the topmost link, the main links and the submenu links.

Line 74-77:

td#usermenu a {background-color: #e6e6e6; display: block;
 margin: 0; padding: 4px; border-right: 1px solid #666666;
 border-bottom: 1px solid #666666; border-left: 1px solid silver;}
td#usermenu a:hover {background-color: #ffffff;}
td#usermenu a.menuTop {border-top: 1px solid silver;}
td#usermenu a.highlight {background-color: #fcc;}

These are the styles used for the User Menu block. The last line (a.highlight) states the color of the Inbox link when there are private messages for the user.

Line 81-87:

.outer {border: 1px solid silver;}
.head {background-color: #c2cdd6; padding: 5px; font-weight: bold;}
.even {background-color: #dee3e7; padding: 5px;}
.odd {background-color: #E9E9E9; padding: 5px;}
.foot {background-color: #c2cdd6; padding: 5px; font-weight: bold;}
tr.even td {background-color: #dee3e7; padding: 5px;}
tr.odd td {background-color: #E9E9E9; padding: 5px;}

These are styles used for tables. The odd and even values are the ones used alternately in most XOOPS tables to show the different rows and columns.

Line 89-91:

div.errorMsg { background-color: #FFCCCC; text-align: center;
 border-top: 1px solid #DDDDFF; border-left: 1px solid #DDDDFF;
 border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA;
 font-weight: bold; padding: 10px;}
div.confirmMsg { background-color: #DDFFDF; color: #136C99;
 text-align: center; border-top: 1px solid #DDDDFF;
 border-left: 1px solid #DDDDFF; border-right: 1px solid #AAAAAA;
 border-bottom: 1px solid #AAAAAA; font-weight: bold; padding: 10px;}
div.resultMsg { background-color : #CCCCCC; color: #333333;
 text-align: center; border-top: 1px solid silver;
 border-left: 1px solid silver; font-weight: bold;
 border-right: 1px solid #666666; border-bottom: 1px solid #666666;
 padding: 10px;}

These are styles used for Error and Confirmation Messages produced by the system. There is almost no reason to customize these.

Line 93-94:

div.xoopsCode { background: #FFFFFF; border: 1px inset #000080;
 font-family: "Courier New",Courier,monospace; padding: 0px 6px 6px 6px;}
div.xoopsQuote { background: #FFFFFF; border: 1px inset #000080;
 font-family: "Courier New",Courier,monospace; padding: 0px 6px 6px 6px;}

These are styles used for the Codes and Quotes found in the NewBB module or the module comments.

Line 97-108:

.comTitle {font-weight: bold; margin-bottom: 2px;}
.comText {padding: 2px;}
.comUserStat {font-size: 10px; color: #2F5376; font-weight:bold;
 border: 1px solid silver; background-color: #ffffff; margin: 2px;
 padding: 2px;}
.comUserStatCaption {font-weight: normal;}
.comUserStatus {margin-left: 2px; margin-top: 10px; color: #2F5376;
 font-weight:bold; font-size: 10px;}
.comUserRank {margin: 2px;}
.comUserRankText {font-size: 10px;font-weight:bold;}
.comUserRankImg {border: 0;}
.comUserName {}
.comUserImg {margin: 2px;}
.comDate {font-weight: normal; font-style: italic; font-size: smaller}
.comDateCaption {font-weight: bold; font-style: normal;}

These are styles used in the NewBB module and module comments to show information about the user. These information are usually found under the username when viewing a forum post.

The comments are owned by the author. We aren't responsible for their content.

Author Thread
dalong
Published: 2006/11/16 8:00  Updated: 2006/11/16 8:00
Just popping in
Joined: 2006/11/16
From:
Comments: 2
 Re: xo-002 http://www.apachefriends.org/en/xampp.html
very good!
I like here!

Author Thread
dalong
Published: 2006/11/16 10:13  Updated: 2006/11/16 10:13
Just popping in
Joined: 2006/11/16
From:
Comments: 2
 Re: xo-002 http://www.apachefriends.org/en/xampp.html
thank for your work!

Author Thread
huqilong
Published: 2006/11/20 2:50  Updated: 2006/11/20 2:50
Just popping in
Joined: 2006/11/16
From:
Comments: 3
 Re: xo-002 http://www.apachefriends.org/en/xampp.html
I hava a question ,when I have installed phpeclipse,I can't user the button for the apache in the Eclipse IDE,how shoud I do?

Author Thread
huqilong
Published: 2006/11/20 3:10  Updated: 2006/11/20 3:10
Just popping in
Joined: 2006/11/16
From:
Comments: 3
 Re: xo-002 http://www.apachefriends.org/en/xampp.html
dddd

Author Thread
Mark_1900
Published: 2006/11/18 11:05  Updated: 2006/11/18 11:09
Just popping in
Joined: 2006/11/18
From:
Comments: 2
 Alias Permission Problems
For an Alias I also had to add a Directory tag to the httpd.conf, otherwise I had permission problems accessing the files... <br /> [code] Alias /wiki "C:/Documents and Settings/Me/wiki"<br /> <Directory "C:/Documents and Settings/Me/wiki"><br /> Options Indexes MultiViews<br /> AllowOverride None<br /> Order allow,deny<br /> Allow from all<br /> </Directory><br /> [/code]<br /> Oh and all these editing tags seem broken!!

Author Thread
Mark_1900
Published: 2006/11/18 11:21  Updated: 2006/11/18 11:32
Just popping in
Joined: 2006/11/18
From:
Comments: 2
 Getting the correct php_dbg.dll
I want a debugger. I downloaded the latest XAMPP 1.5.4a and noticed that it comes with PHP 5.1.6 & PHP 4.4.4, and neither are supported. The debugger module only supports a subset of these major versions from 5.1.0 to 5.1.2 and 4.4.0 to 4.4.2 (http://dd.cron.ru/dbg/downloads.php). I think right at the beginning you should specify which versions to download to get a debugger Version "XAMPP 1.5.2" would be fine.

Author Thread
huqilong
Published: 2006/11/30 6:28  Updated: 2006/11/30 6:28
Just popping in
Joined: 2006/11/16
From:
Comments: 3
 Re: xo-002 http://www.apachefriends.org/en/xampp-windows....
I want to know how to use phpeclipse with eclipse detailly!

Author Thread
thierrybo
Published: 2007/2/3 16:19  Updated: 2007/2/3 16:21
Just popping in
Joined: 2007/2/3
From:
Comments: 1
 Re: xo-002 ch02s03.html Workspace Method 2
I do not agree with the suggested method 2: Quote:
For example you have set up XAMPP and your “document root” path is the XAMPP default:
C:Program Filesapachefriendsxampphtdocs
Quote:
,then your appropriate workspace path should be one level less:
C:Program Filesapachefriendsxampp
If htdocs is your document root, then each folder inside IS a new project and you should set workspace directory as Document Root directory. With suggested method, all your web projects are managed with ONE big PHPeclipse project.

Author Thread
dafydd
Published: 2007/4/3 6:01  Updated: 2007/4/3 6:01
Just popping in
Joined: 2007/4/3
From:
Comments: 2
 Re: xo-002 ch01.html
Trying this out on a Mac. J2SE 1.5.0_07-164 installed. 1.5.0_06 is what's available on the download site. However, it would almost certainly be updated with Software Update.

Author Thread
dafydd
Published: 2007/4/6 1:00  Updated: 2007/4/6 1:00
Just popping in
Joined: 2007/4/3
From:
Comments: 2
 Re: xo-002 ch01s04.html
Second question: How do we point the XAMPP start/stop buttons in the Eclipse toobar to where we put XAMPP?

dafydd

Author Thread
dysmas
Published: 2007/8/4 14:18  Updated: 2007/8/4 14:18
Just popping in
Joined: 2007/8/4
From:
Comments: 1
 Debugging standalone PHP applications
Thanks hundred times for all the detailed explanations here !!

And especially for the note which explains why debugging a CLI application does not work in 1.1.8 version and only in 1.1.9. (wrong port, as I guessed, but I have been looking for this information for some hours before coming here). Unfortunately this 1.1.9 CVS version does not work in the last 3.2.0 Eclipse version I just got. Let us hope the stable version is going quickly.

Author Thread
Mercyful
Published: 2007/9/10 14:46  Updated: 2007/9/10 14:46
Just popping in
Joined: 2007/9/10
From:
Comments: 1
 Re: dbg is not working
I want using eclipse3.2 with php-plugin and for debugging i want using dbg.
I'm using xampp 1.6.3a with php 4.4.7. and php_dbg.dll-4.4.x
After step by step installation
http://docs.schuetzengau-freising.de/ ... =xo-002&file=ch01s05.html
the debugger dbg will not work.
When i called phpinfo() there is no section dbg shown.
Who have any ideas?
Thanks a lot!
Regards Mercyful

Author Thread
keryx
Published: 2007/9/26 22:59  Updated: 2007/9/26 22:59
Just popping in
Joined: 2007/9/26
From:
Comments: 1
 Re: xo-002 ch04.html
A section about verrors should be nice. I get the following:


<terminated, exit value: 0>PHP C:\Program\PHP\php.exe : <path>/<fil>.php

I've googled like crazy but to no avail. And yes - it does not stop at breakpoints and "variables" are empty. DBG is working:

if (function_exists ("DebugBreak")) {
DebugBreak ();
echo "debugging started!<br />\n";
}

Outputs "debugging started!" And DBG is reported on phpinfo().

Author Thread
koski
Published: 2007/10/19 3:55  Updated: 2007/10/19 3:55
Just popping in
Joined: 2007/10/19
From:
Comments: 1
 Re: xo-002 ch01s03.html
Hi,

Seems that the mentioned link for cvs:

http://phpeclipse.sourceforge.net/update/cvs

is out of date or wrong.

Author Thread
andybruk
Published: 2007/11/18 1:11  Updated: 2007/11/18 1:11
Just popping in
Joined: 2007/11/18
From:
Comments: 1
 Re: xo-002 index.html
I've been searching for a PHP debugger for ages. This is the only one I can find that works perfectly, thanks very much for providing this documentation.<br /><br />I doubt if I could ever get it to work on Windows, but it works so well with Ubuntu Linux and Eclipse 3.1.<br />
Powered by XOOPS 2.0 © 2001-2005 The XOOPS Project