Board Logo

styles problem
mhunter - 8/12/2005 at 04:01 PM

Hello

I am trying to apply different styles but can not figure out why they are not rendering in browser.

In my tree_tpl.js I have:

// styles - leaf
'style_0':'t1io', // normal leaf caption style
'style_4':'t1io', // selected leaf caption style
'style_64':'t1ic', // mouseovered normal leaf caption style
'style_68':'t1ic' // mouseovered selected leaf caption style
***********
In my tree.css I have:
.t1io {
font-family: arial, helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #7D7D7D;
text-decoration:none;
font-style: normal;
font-variant: normal;
background-color: #F4F4F4;
background-image: url(../../common/images/nav_local/icon_2nd_off.gif);
background-repeat: no-repeat;
display: block;
width: 158px;
background-position: 17px 6px;
padding-left: 25px;
vertical-align: middle;
padding-top: 2px;
padding-bottom: 2px;
}
a.t1io:link, a.t1io:visited, a.t1io:active, a.t1io:hover {
font-family: arial, helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #7D7D7D;
text-decoration:none;
font-style: normal;
font-variant: normal;
background-color: #F4F4F4;
background-image: url(../../common/images/nav_local/icon_2nd_off.gif);
background-repeat: no-repeat;
display: block;
width: 158px;
background-position: 17px 6px;
padding-left: 25px;
vertical-align: middle;
padding-top: 2px;
padding-bottom: 2px;
}
.t1ic {
font-family: arial, helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #7D7D7D;
text-decoration:none;
font-style: normal;
font-variant: normal;
background-color: #F4F4F4;
background-image: url(../../images/nav_local/icon_2nd_off.gif);
background-repeat: no-repeat;
display: block;
width: 158px;
background-position: 17px 6px;
padding-left: 25px;
vertical-align: middle;
padding-top: 2px;
padding-bottom: 2px;
}
a.t1ic:link, a.t1ic:visited, a.t1ic:active, a.t1ic:hover {
font-family: arial, helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #7D7D7D;
text-decoration:none;
font-style: normal;
font-variant: normal;
background-color: #F4F4F4;
background-image: url(../../images/nav_local/icon_2nd_off.gif);
background-repeat: no-repeat;
display: block;
width: 158px;
background-position: 17px 6px;
padding-left: 25px;
vertical-align: middle;
padding-top: 2px;
padding-bottom: 2px;
}
************
And finally in tree_items.js I have:

['Motors', 'http://www.yahoo.com', {'s0' : 't1io', 's4' : 't1io', 's64':'mover', 's68':'mover'}],
['Drives', 'http://www.yahoo.com', {'s0' : 't1io', 's4' : 't1io', 's64':'mover', 's68':'mover'},

**********

I have taken out all references to styles in the html file - the text is supposed to be grey and then green when moused over. But the links are defaulting to standard html hyperlink colors.

Not sure what I'm missing....


mhunter - 8/12/2005 at 07:39 PM

btw - I'm using tigra tree PRO


tigra - 8/13/2005 at 04:04 AM

In item scope settings you reassign mouseover class to 'mover' which I don't see in your CSS file.


Additionally make sure to follow the sample in the product documentation on specifying the CSS for the text of the items. It should be more like:

.t1io a:link

not

a.t1io:link


beanie - 9/30/2005 at 02:45 AM

I got my problem sorted, i forgot to add the inline css style.

my code is:

<style>
a, A:link, a:visited, a:active
{color: #ffffff; text-decoration: none; font-family: Tahoma, Verdana; font-size: 11px;}
A:hover
{color: #ff0000; text-decoration: none; font-family: Tahoma, Verdana; font-size: 11px;}
p, tr, td, ul, li
{color: #000000; font-family: Tahoma, Verdana; font-size: 11px;}
.header1, h1
{color: #ffffff; background: #4682B4; font-weight: none; font-family: Tahoma, Verdana; font-size: 13px; margin: 0px; padding: 2px;}
.header2, h2
{color: #000000; background: #DBEAF5; font-weight: bold; font-family: Tahoma, Verdana; font-size: 12px;}
.intd
{color: #000000; font-family: Tahoma, Verdana; font-size: 11px; padding-left: 15px;}

</style>


Softcomplex: http://www.softcomplex.com/
Back to forum: http://www.softcomplex.com/forum/