TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome to TinyPortal. Please login or sign up.

Members
Stats
  • Total Posts: 196,004
  • Total Topics: 21,330
  • Online today: 500
  • Online ever: 8,223 (February 19, 2025, 04:35:35 AM)
Users Online
  • Users: 0
  • Guests: 434
  • Total: 434

Nav Block without Global CSS

Started by Atheo, June 04, 2008, 10:46:20 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Atheo

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.

IchBin

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.

Atheo

#2
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?

IchBin

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.

This website is proudly hosted on Crocweb Cloud Website Hosting.