To adapt the design of SOBI2 it is not necessary to change the SOBI2 source code files. SOBI2 can easily be adapted by changing the supplied CSS file. The SOBI2 CSS file /components/include/com_sobi2.css can be edited within the SOBI2 administration panel.

How do you find the used CSS styles?
For each web designer it is very important to take a look to the generated source code, especially if you want to adapt the style of an unknown component. In Firefox press Ctrl-U in IE6 this is F11. In the source code you will find the used CSS classes resp. IDs for the HTML tags.
To make finding CSS classes more easy Chris Pederick has developed an extension for the Firefox Browser called Web Developer Toolbar. We strongly recommend this extension. Also the extension Firebug is very useful.

CSS Tutorial

This is a description of the standard SOBI2 CSS file content

The Header

/**
* @version $Id: com_sobi2.css 3399 2008-01-19 15:30:41Z Radek Suski $
* @package: Sigsiu Online Business Index 2 */
/**
* Style Sheet of SOBI 2 Component com_sobi2.css
* ---------------------------------------------------------------------------
* @copyright Copyright (C) 2007 Sigsiu.NET (www.sigsiu.net). All rights reserved.
* @license see http://www.gnu.org/copyleft/lgpl.html GNU/LGPL.
* SOBI2 is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation.
* Authors: Sigrid & Radek Suski, Sigsiu.NET */

Main Styles

To override standard template styles for SOBI2.

div.sobi2 {
}
div.sobi2 h1 {
    line-height: 24px;
    font-size: 22px;
}
div.sobi2 h2,
div.sobi2 h3,
div.sobi2 h4 {
    padding-left: 5px;
}

Style for Standard Joomla!/Mambo mosmsg-class

Style for Standard Joomla! mosmsg-class, because often undefined. To use the style of your template, delete this entry.

.message {
    padding: 5px;
    background-color: #990000;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: bold;
}

if there is no mosmsg line defined by your template remove the 'display:none' and SOBI2 will show its own mosmsg line. The mosmsg line is used to show uploading and saving results.

#sobimsg {
    display:none;
}

Style of header menu

table.sobi2Header {
    border-style: none;
}
a.sobi2Header {
    padding: 5px;
    font-size: 14px;
}

Style of component description

table.sobi2CompDesc {
    padding: 5px;
    width: 98%; 
}

Styles for Category View

table#sobi2CatListSymbols {
    width: 98%;
}
table#sobi2CatListSymbols td {
    vertical-align: top;
    border-style: none;
}

Style of category icon

img.sobi2CatIco {
    border-style: none;
    float: left;
    clear: left;
}

Style of category name

p.sobi2CatName {
    font-size: 13px;
    padding-left: 50px;
    margin-top: 1px;
}

Style of category introtext

p.sobi2CatsListSymbolsIntrotext {
    font-size: 11px;
    padding-left: 50px;
    margin-top: 4px;
}

Styles for counters

span.sobi2EditlinktipItems {
    text-decoration: none; 
    border-bottom: 1px dashed #aaa;
}
span.sobi2EditlinktipCats {
    text-decoration: none;
    border-bottom: 1px dashed #aaa;
}

Style for entries in Category View (V-Card)

table.sobi2Listing {
    width: 98%;
    margin-bottom: 10px;
}
table.sobi2Listing td {
    border-style: none;
    border-color: #3a4794;
    border-width: 2px;
    margin-top: 0px;
    vertical-align: top;
}

Style for empty V-cards (placeholder)

The color should be the background color of your main body area.

table.sobi2Listing td.sobi2EmptyCell {
    border-style: none;
    background-color: #ffffff;
}
table.sobi2Listing input { float:left; }

Style of icon and logo (image)

.sobi2Listing img {
    float: right;
    border-style: none;
    padding-top: 5px;
    padding-right: 5px;
}

Style of title (Name of Entry)

p.sobi2ItemTitle {
    margin-left: 5px;
    margin-top: 5px;
    border-style:none;
    padding-left: 5px;
    padding-top: 5px;
    clear:left;
}
p.sobi2ItemTitle a { font-size: 13px; }

Styles for the fields

Add a style for each custom field you have added in the Fields Manager in the form span.sobi2Listing_field_yourname.

span.sobi2Listing_field_myfield,
span.sobi2Listing_field_street,
span.sobi2Listing_field_postcode,
span.sobi2Listing_field_county,
span.sobi2Listing_field_country,
span.sobi2Listing_field_email,
span.sobi2Listing_field_contact_person,
span.sobi2Listing_field_phone,
span.sobi2Listing_field_fax,
span.sobi2Listing_field_city,
span.sobi2Listing_field_hotline,
span.sobi2Listing_field_phone,
span.sobi2Listing_field_federal_state {
    padding-left: 10px;
}
span.sobi2Listing_field_website {
    float:right;
    padding-right: 5px;
    margin-bottom: 15px;
}

Style of Edit and Delete Buttons in Category View

input.sobi2EditEntryButton {
}

Style for Page Navigation of Entries

#sobi2PageNav { text-align: center; } 

Style of Details View

table.sobi2Details {
    margin-top: 15px;
    margin-left: 5px;
    padding: 10px;
    width: 98%;
}

Style of Entry Name

table.sobi2Details h1 {
    padding-top: 5px;
}

Container for all custom fields data

div#sobi2outer {
    float: left;
    margin-top: 0px; /* position it vertically */
    padding-bottom: 5px; /* to fix IE bug */
}

Styles of the Image/Icon

img.sobi2DetailsImage {
    border-style: none;
    float: right;
    padding-right: 5px;
    padding-top: 5px;
}
img.sobi2DetailsIcon {
}

Styles for the fields in Details View

Add style for each field you added in the form span#sobi2Details_field_yourname.

span#sobi2Details_field_myfield,
span#sobi2Details_field_street,
span#sobi2Details_field_postcode,
span#sobi2Details_field_county,
span#sobi2Details_field_country,
span#sobi2Details_field_phone,
span#sobi2Details_field_fax,
span#sobi2Details_field_city,
span#sobi2Details_field_hotline,
span#sobi2Details_field_phone,
span#sobi2Details_field_contact_person,
span#sobi2Details_field_federal_state {
    font-size: 12px;
}

span#sobi2Details_field_website,
span#sobi2Details_field_email {
    padding-top: 8px;
    font-size: 12px;
    display: block;
}
span#sobi2Details_field_description {
    padding-top: 20px;
    margin-top: 0px; /* position it vertically */
}

Style for Way Search

span.sobi2WaySearch {
    border-style: none;
    float: right;
    clear: right;
    margin-top: 15px; /* position it vertically */
    display: block;
    padding-right: 5px;
}
span.sobi2WaySearch img {
    padding-top: 8px;
    border-style: none;
    padding-left: 17px;
}

Style for Google Maps

div#sobi2GoogleMaps {
    float: right;
    position: relative;
    border: 1px solid #333333;
    margin-top: 30px;
    margin-right: 5px;
}

Style of Details Footer Line

td.sobi2DetailsFooter {
    padding-left: 5px;
}

Style of Edit and Delete Buttons in Details View

input#sobi2EditEntryButton, 
input#sobi2DelEntryButton {
    float:right;
}

Style of Footer Line

td#sobi2Footer,
td#sobi2Footer a {
    font-size: 9px;
    color: #999999;
    padding-top: 10px;
    text-decoration: none;
}
table.sobi2Footer { width: 98%; }
td#sobi2rss { }
td#sobi2rss img {
    border-style: none;
    float:right;
}

Style of Entry Form

Header Line

p#sobi2EditFormHeader {
    font-weight:bold;
    font-size: 14px;
    padding: 5px;
}

Info Requested Fields

#sobi2ReqFieldsInfo {
    padding: 5px;
}

form#sobi2EditForm table,
table#sobi2FormTable {
    padding: 5px;
}
table#sobi2FormTable2,
table#sobi2FormTable3 {
    width: 99%;
}
table#sobi2FormTable td,
table#sobi2FormTable2 td,
table#sobi2FormTable3 td {
    vertical-align: top;
}

Style of Input fields as entered in Fields Manager

input#field_entry_name,
input#field_postcode,
input#field_street,
input#field_city,
input#field_county,
input#field_country,
input#field_federal_state,
input#field_email,
input#field_website,
input#field_contact_person,
input#field_phone,
textarea#sobi2MetaKey,
textarea#sobi2MetaDesc,
input#sobi2Ico,
input#sobi2Img,
input#field_fax,
input#field_hotline,
input#field_street {
}

label.field_entry_name,
label.field_postcode,
label.field_street,
label.field_city,
label.field_county,
label.field_country,
label.field_federal_state,
label.field_email,
label.field_website,
label.field_contact_person,
label.field_phone,
label.field_fax,
label.field_hotline,
label.field_description,
label.sobi2Ico,
label.sobi2Img,
label.sobi2MetaKey,
label.sobi2MetaDesc {
}

Style for checkboxes

input#accept_rules,
input#field_website_on,
input#field_description_on {
}

Style for not free label

span.sobi2FormNotFreeLabel {
    display: block;
    padding-top: 5px;
}

Style for Category Information/Descriptions

table#sobi2FormCats {
    width: 99%;
    border-style: none;
    margin: 10px;
}
table#sobi2FormCats td {
    padding: 10px;
    border-style: solid;
    border-color: #CCCCCC;
    border-width: 1px;
}
p#catsTitle,
p#catIntroText {
    width: 98%;
    font-size: 12px;
    font-weight: bold;
} p#catMsg { width: 98%; } 

Style for Add and Remove Button

#sobi2AddCatBt,
#sobi2RemoveCatBt {
    width:50px;
}

Style for column with Buttons

td.sobi2CatButtons {
    width: 50px;
    vertical-align: top;
}

Style for column with selected categories

td.sobi2CatSelected {
    vertical-align: top;
    width: 150px;
}

Style for Box with selected categories

select#sobi2SlectedCats {
    height: 100px;
    width: 150px;
}
select#sobi2SlectedCatsID {
    height: 0px;
    width: 0px;
    border-style: none;
}

Style for Safety Line

table#sobi2FormFooter {
    float: left;
    clear: left;
}
table#sobi2FormFooter td {
    vertical-align: bottom;
}
img#seccode {
}

Style for Send and Cancel Button

input#sobi2SendButton {
    float: right;
}
input#sobi2CancelButton {
    float: right;
}

Style for Payment Info

Style for upload info

p.sobi2msg {
    padding-top: 15px;
    padding-left: 5px;
    font-size: 12px;
}

Container for all payment info

div.sobi2PaymentContainer {
    width: 98%;
}

Style for Summary of Costs

table#sobi2Payment {
    width: 50%;
    margin-left: 5px;
    padding-right: 5px;
}
table#sobi2Payment td,
td.sobi2PayOption {
    width: 70%;
    text-align: right;
}
td.sobi2PayFees {
    width: 30%;
    text-align: right;
}
td#sobi2PayTotal {
    width: 30%;
    text-align: right;
    border-top: solid 1px #606060;
    font-weight: bold;
    color: red;
}

Style for Payment Methods

table#sobi2PaymentMethod {
    width: 70%;
    margin-top: 30px;
    margin-left: 5px;
}
table#sobi2PaymentMethod img {
    border-style: none;
}
table#sobi2PaymentMethod a:hover {
    font-style: normal;
    text-decoration: none;
}
td#sobi2PaymentMethodBank,
td#sobi2PaymentMethodPayPal {
    width: 60%;
    margin-top: 15px;
    border-style: none;
}
td#sobi2PaymentMethodBank b {
    padding-bottom: 3px;
    display: block;
}

Style for Searching

table.sobi2eSearchForm {
    width: 95%;
    margin-left: 5px;
}
span#sobi2SearchResultsSerchingString {
    font-weight: bold;
}
div#sobiSearchResponseContainer table {
    width:95%;
}

Styles for the new extended search function

Height of the Div ^container of the category chooser

div#sobiSearchFormCatsSelection { } 

Select boxes with categories

.catChooseBox { }
#sobiSearchFormExtOptToggle {
    display: inline;
}
div#SobiSearchForm2dropsy { margin-left: 10px; }
td#sobi2eSearchEmptyCell { width: 50%; } 

Style for the Menu Module

div.sobi2MenuMod {
    margin-bottom: 8px;
    margin-top: 10px;
}

Style for the Search & Add Entry Links

a.sobi2MenuModA {
    margin-left: 20px;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
}

Style of dTree 2.05

dtree Copyright (c) 2002-2003 Geir Landrï

.dtree {
    font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
    font-size: 11px;
    color: #666;
    white-space: nowrap;
    overflow: auto;
}
.dtree img {
    border: 0px;
    vertical-align: middle;
}
.dtree a {
    color: #333;
    text-decoration: none;
    font-weight: normal;
}
.dtree a.node,
.dtree a.nodeSel {
    white-space: nowrap;
    padding: 1px 2px 1px 2px;
}
.dtree a.node:hover,
.dtree a.nodeSel:hover {
    color: #333;
    text-decoration: underline;
}
.dtree a.nodeSel {
    background-color: #c0d2ec;
}
.dtree .clip { overflow: hidden; }

Styles for SigsiuTree

.sigsiuTree {
    font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
    font-size: 11px;
    color: #666;
    white-space: nowrap;
    overflow: auto;
}
.sigsiuTree img {
    border: 0px;
    vertical-align: middle;
}
.sigsiuTree a {
    color: #333;
    text-decoration: none;
    font-weight: normal;
}
.sigsiuTree a.node,
.sigsiuTree a.nodeSel {
    white-space: nowrap;
    padding: 1px 2px 1px 2px;
}
.sigsiuTree a.node:hover,
.sigsiuTree a.nodeSel:hover {
    color: #333333;
    text-decoration: underline;
}
.sigsiuTree a.nodeSel {
    background-color: #c0d2ec;
}
.sigsiuTree .clip {
    overflow: hidden;
}
div.sigsiuTree a,
.sigsiuTree a,
a.treeNode:hover,
a.treeNode,
a.treeNode:visited {
    color: #333333 !important;
    text-decoration: none !important;
    font-weight: normal !important;
}
a.treeNode:active,
a.treeNode:focus {
    color: #333333;
    text-decoration: none;
    font-weight: normal;
    background-color: #c0d2ec;
}

Styles for custom listings

div.sobi2CustomListingCatsHeader,
div.sobi2CustomListingItemsHeader {
    padding-left: 5px;
    margin-top: 5px;
    margin-bottom: 10px;
}
div.sobi2CustomListingHeader {
    padding-left: 5px;
    font-size: 15px;
    margin-bottom: 15px;
    margin-top: 5px;
}
div#sobi2AlphaLinks {
    width: 98%;
    text-align: center;
    padding: 5px;
    padding-bottom: 15px;
}

Style for the plugin container

table.sobi2Listing_plugins {
    border-style:none;
    width: 98%;
    padding-left: 8px;
}
div.sobi2FormTabHeader {
    padding: 5px 2px 2px 5px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
}
div.sobi2FormtabContent {
    overflow: hidden;
    margin-left: 5px;
    margin-top: 5px;
}