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.