Hello, this is a quick tutorial on how to change the default logo that comes in Xbtit Default style “xbtit_default”.
First lets take a look at the HTML for the logo to know what CSS code we have to modify.
If you open any of the main templates ( main.tpl, main.no_colums.tpl or main.left_colums.tpl ) you'll see the same HTML to display the logo, which is.
<div id="logo"> <table width="750" cellspacing="0" cellpadding="0" border="0" align="center"> <tbody> <tr> <td class="tracker_logo" valign="top"/> </tr> </tbody> </table> </div>
Here we have 1 CSS Classes & 1 CSS ID, the DIV container ID named logo and a style class called tracker_logo for the TD tag.
Lets open the main.css and take a look at them.
logo
#logo { background: url("images/logo_bg.jpg"); background-repeat: repeat-x; border-top: solid 1px #FFFFFF; height:100px; width:100%; }
tracker_logo
.tracker_logo { background: url("images/logo.jpg") no-repeat; align:center; height:100px; width:750px; }
The logo id is the main container for the logo, and as you see it has a background image (that gives it that gradient look), a border along with height and width. I you want the container to have no back ground pattern or color just remove them, Also you could change the height to your choice.
The tracker_logo class is the actual logo itself. In the tracker_logo class you could change the image just remember to change the size to match the image size in both the tracker_logo class and the logo id.