TinyPortal

Development => Support => Topic started by: Atheo on June 04, 2008, 10:46:20 PM

Title: Nav Block without Global CSS
Post 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.
Title: Re: Nav Block without Global CSS
Post by: IchBin on June 05, 2008, 12:09:08 AM
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.
Title: Re: Nav Block without Global CSS
Post by: Atheo on June 05, 2008, 02:11:23 AM
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">&nbsp;&nbsp;Home</a></td>
        </tr>
        <tr>
            <td bordercolor="#e0dfdd" bgcolor="#666666"><a title="Fit-Hub Forum" href="http://XXX.xxx/index.php?action=forum">&nbsp;&nbsp;Forum</a></td>
        </tr>
        <tr>
            <td bgcolor="#666666"><span class="style19">&nbsp;&nbsp;Articles</span></td>
        </tr>
        <tr>
            <td bgcolor="#666666"><span class="style19">&nbsp;&nbsp;Calendar</span></td>
        </tr>
        <tr>
            <td bgcolor="#666666"><span class="style19">&nbsp;&nbsp;Memebers</span></td>
        </tr>
        <tr>
            <td bgcolor="#666666"><span class="style19">&nbsp;&nbsp;Profile</span></td>
        </tr>
        <tr>
            <td bgcolor="#666666"><span class="style19">&nbsp;&nbsp;Blog</span></td>
        </tr>
        <tr>
            <td bgcolor="#666666"><span class="style19">&nbsp;&nbsp;Messages</span></td>
        </tr>
        <tr>
            <td bgcolor="#666666"><span class="style19">&nbsp;&nbsp;Store</span></td>
        </tr>
        <tr>
            <td bgcolor="#666666"><span class="style19">&nbsp;&nbsp;Help</span></td>
        </tr>
        <tr>
            <td bgcolor="#666666"><span class="style19">&nbsp;&nbsp;Contact</span></td>
        </tr>
        <tr>
            <td bgcolor="#666666"><span class="style19">&nbsp;&nbsp;Search</span></td>
        </tr>
    </tbody>
</table>


If I can not...any suggestions?
Title: Re: Nav Block without Global CSS
Post by: IchBin on June 05, 2008, 05:56:09 AM
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.