CSS Overwrite in Joomla!1.5::Sporter::Joomsport

So, describe the problem firstly:

this piece is the HTML output of [VIEW]HomeVsAway:

<div id="component" class="clear">
	<table style="border-width: 1px">
	<caption>
    </caption>

	<thead>
		<tr bgcolor="#FFE168">
			<th colspan="12" align="center">
				<strong>主客對賽表</strong>
			</th>
		</tr>
        <tr>
            <th colspan="12" align="left">(丁組)</th>
        </tr>
	</thead>

	<tbody>

<tr><td><strong>作客\主場</strong></td><td>(1)Vancity FC</td><td>(2)研華</td><td>(3)浩盈</td><td>(4)嘉星 FC</td><td>(5)En'joy Alliance</td><td>(6)奔騰</td><td>(7)老友記</td><td>(8)United 144</td><td>(9)CSK</td><td>(10)青聯</td><td>(11)iepaball.com</td></tr><tr><td>(1)Vancity FC</td><td bgcolor="#B0C4D7"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td></tr><tr><td>(2)研華</td><td align="center"></td><td bgcolor="#B0C4D7"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td></tr><tr><td>(3)浩盈</td><td align="center"></td><td align="center"></td><td bgcolor="#B0C4D7"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td></tr><tr><td>(4)嘉星 FC</td><td align="center"></td><td align="center"></td><td align="center"></td><td bgcolor="#B0C4D7"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td></tr><tr><td>(5)En'joy Alliance</td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td bgcolor="#B0C4D7"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td></tr><tr><td>(6)奔騰</td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td bgcolor="#B0C4D7"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td></tr><tr><td>(7)老友記</td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td bgcolor="#B0C4D7"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td></tr><tr><td>(8)United 144</td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td bgcolor="#B0C4D7"></td><td align="center"></td><td align="center"></td><td align="center"></td></tr><tr><td>(9)CSK</td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td bgcolor="#B0C4D7"></td><td align="center"></td><td align="center"></td></tr><tr><td>(10)青聯</td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td bgcolor="#B0C4D7"></td><td align="center"></td></tr><tr><td>(11)iepaball.com</td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td align="center"></td><td bgcolor="#B0C4D7"></td></tr>	</tbody>
</table>

</div>

The most outside div 'component' is generated by Joomla!, and the inside table is created by my template code: com_joomsport/views/homevsaway/tmpl/default.php

But, what does the table look like?

Inspect the css file for this element in Chrome:

So, the CSS file is 'addons.css', find it.

And now, its ready to modify the style, add one id attribute to the 'th' element with background color:

change:

	<thead>
		<tr bgcolor='#FFE168' >
			<th colspan=<?php echo '"' .($this->amt_of_team + 1) .'"'?> align='center'>
				<strong>主客對賽表</strong>
			</th>
		</tr>
        <tr>
            <th colspan=<?php echo '"' . ($this->amt_of_team + 1) .'"'?> align="left">(<?php echo $this->table_header ?>)</th>
        </tr>
	</thead>

to:

	<thead>
		<tr id='vincent'>
			<th colspan=<?php echo '"' .($this->amt_of_team + 1) .'"'?> align='center'>
				<strong>主客對賽表</strong>
			</th>
		</tr>
        <tr>
            <th colspan=<?php echo '"' . ($this->amt_of_team + 1) .'"'?> align="left">(<?php echo $this->table_header ?>)</th>
        </tr>
	</thead>

And add one style rule to 'addons.css':

/*added by Vincent 17 Nov 2011*/
#vincent { background:#FFE168; text-align:center}

Now refresh the page:

The text alignment is controlled in 'template.css'

REFs:

http://webdesignerwall.com/tutorials/cross-browser-css-gradient