Translations of this page?:

:-) 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.

change_xbtit_logo.txt · Last modified: 2009/09/15 11:51 by peace_maker
 
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 3.0 Unported
Recent changes RSS feed Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki