TinyPortal
Development => Support => Topic started by: Atheo on June 04, 2008, 10:46:20 PM
Hello,
Is there a way to cancel the global CSS for links within a single block? I have a static page that uses an HTML table with its own formatting. I would like this formatting to stick when I place it into a script box thus creating a TP Nav menu. The problem is that the default formatting for SMF takes over and changes the link styles.
TP 1.052
SMF 1-1-5
Default theme, modified only graphically
This is the code I have used to create the menu. It works fine except that it picks up the global CSS.
***CLEANED UP FOR A BETTER READ ;)***
I've yet to format all the links but you get the idea.
You don't cancel previous CSS styles. You over-ride them. If you want the links different, assign a class to your table or td tags, then set the links for that class to be different.
When I do that, the class affects the entire panel, so if I have other blocks below the one I format, they change as well.
Can I do something like this without it affecting the following blocks?
--scriptbox--
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css">
<!--
body {
background-repeat: no-repeat;
}
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
color: #FFFFFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #ff9c31;
}
a:active {
text-decoration: none;
color: #FF0000;
}
.style19 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; color: #FFFFFF; }
.style23 {
font-size: small;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style24 {font-size: small}
--></style>
<table style="BORDER-COLLAPSE: collapse" width="170" border="1">
<tbody>
<tr>
<td bgcolor="#666666"><a href="http://XXX.xxx.php"> Home</a></td>
</tr>
<tr>
<td bordercolor="#e0dfdd" bgcolor="#666666"><a title="Fit-Hub Forum" href="http://XXX.xxx/index.php?action=forum"> Forum</a></td>
</tr>
<tr>
<td bgcolor="#666666"><span class="style19"> Articles</span></td>
</tr>
<tr>
<td bgcolor="#666666"><span class="style19"> Calendar</span></td>
</tr>
<tr>
<td bgcolor="#666666"><span class="style19"> Memebers</span></td>
</tr>
<tr>
<td bgcolor="#666666"><span class="style19"> Profile</span></td>
</tr>
<tr>
<td bgcolor="#666666"><span class="style19"> Blog</span></td>
</tr>
<tr>
<td bgcolor="#666666"><span class="style19"> Messages</span></td>
</tr>
<tr>
<td bgcolor="#666666"><span class="style19"> Store</span></td>
</tr>
<tr>
<td bgcolor="#666666"><span class="style19"> Help</span></td>
</tr>
<tr>
<td bgcolor="#666666"><span class="style19"> Contact</span></td>
</tr>
<tr>
<td bgcolor="#666666"><span class="style19"> Search</span></td>
</tr>
</tbody>
</table>
If I can not...any suggestions?
You're not doing what I told you. I told you to create a class for the td or table. Then assign the link attributes to that class. So for instance, you would have something similar to this.
.myblock{
attributes in here
}
.myblock a:link {
attributes in here
}
Then you add the class myblock to your td's etc.