X-Cart forums

[GM]

I'm not sure how to do this?
I set the link colours in skin1/CSS but I need the colours for the speed bar links to be diferent from the colours for the body links. Do I need to edit this in the head.tpl or can I add some code to the CSS to do this? If I do it in the head.tpl then how do I get the rollover colour?

[shan]

create a new set of styles and apply them to the links in the speed bar

something like

NewA:link {
        COLOR: #330000; TEXT-DECORATION: none;
}
NewA:visited {
        COLOR: #330000; TEXT-DECORATION: none;
}
NewA:hover {
        COLOR: #550000; TEXT-DECORATION: underline;
}
NewA:active  {
        COLOR: #330000; TEXT-DECORATION: none;
}

[GM]

Thanks Shan you rock!

But I'm not sure how to do that, I don't know how to marry

<link rel="stylesheet" href="{$SkinDir}/{#CSSFile#}">

with

<table border=0 cellpadding=0 cellspacing=0>
{if $speed_bar}
<tr>
<td valign=top align=right>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
{section name=sb loop=$speed_bar}
{if $speed_bar[sb].active eq "Y"}
<td>{include file="customer/tab.tpl" tab_title="`$speed_bar[sb].title`"}</td>
<td width=1>[img]{$ImagesDir}/spacer.gif[/img]</td>
{/if}
{/section}
</tr>
</table>
</td>
</tr>
{/if}
<tr>
<td height=35 align=center class=HeadText>
{if $config.Company.company_phone}{$lng.lbl_phone_1_title}: {$config.Company.company_phone}{/if}{if $config.Company.company_phone_2}{$lng.lbl_phone_2_title}: {$config.Company.company_phone_2}{/if}</td>
</tr>
</table>

If indeed those are to be married? I'm assuming I edit top_menu.tpl and how do i reference the new css entries? (not one of my strong points)

[adpboss]

I think you have to edit tab.tpl.

Just change whatever style it is pulling for the name of the new style you created.

[shan]

Originally Posted by adpboss

I think you have to edit tab.tpl.

Just change whatever style it is pulling for the name of the new style you created.

thats right

[GM]

That's the problem, nowhere in tab.tpl is it showing where it's pulling styles:

<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=5 background="{$ImagesDir}/tab_l.gif">[img]{$ImagesDir}/spacer.gif[/img]</td>
<td height=5 valign=bottom class=Tab>[img]{$ImagesDir}/spacer.gif[/img]</td>
<td width=5 background="{$ImagesDir}/tab_r.gif">[img]{$ImagesDir}/spacer.gif[/img]</td>
</tr>
<tr>
<td width=5 background="{$ImagesDir}/tab_l.gif">[img]{$ImagesDir}/spacer.gif[/img]</td>
<td width=85 height=30 class=Tab align=center>{$tab_title}</td>
<td width=5 background="{$ImagesDir}/tab_r.gif">[img]{$ImagesDir}/spacer.gif[/img]</td>
</tr>
<tr>
<td width=5 height=5 background="{$ImagesDir}/tab_c1.gif">[img]{$ImagesDir}/spacer.gif[/img]</td>
<td height=5 background="{$ImagesDir}/tab_b.gif">[img]{$ImagesDir}/spacer.gif[/img]</td>
<td width=5 height=5 background="{$ImagesDir}/tab_c2.gif">[img]{$ImagesDir}/spacer.gif[/img]</td>
</tr>
</table>

[adpboss]

<td width=85 height=30 class=Tab align=center>{$tab_title}</td>

You need to add link markup in the css for the "tab" class.

IE

.Tab {
        COLOR: #330000; TEXT-DECORATION: none;
}
.Tab:link {
        COLOR: #330000; TEXT-DECORATION: none;
}
.Tab:visited {
        COLOR: #330000; TEXT-DECORATION: none;
}
.Tab:hover {
        COLOR: #550000; TEXT-DECORATION: underline;
}
.Tab:active  {
        COLOR: #330000; TEXT-DECORATION: none;
}

Just add

.Tab:link {
        COLOR: #330000; TEXT-DECORATION: none;
}
.Tab:visited {
        COLOR: #330000; TEXT-DECORATION: none;
}
.Tab:hover {
        COLOR: #550000; TEXT-DECORATION: underline;
}
.Tab:active  {
        COLOR: #330000; TEXT-DECORATION: none;
}

below your .tab entry in the skin1.css.

[GM]

adpboss... You just saved me about 45 years of study to figure that out, I never would have got it man, thank you so much! That was actually the hardest thing I've had to do in Xcart! I never would have got it.

[adpboss]

ok, now fix the thread title because it is totally useless to anyone searching for help.

Try to make your titles descriptive instead of self-depractory!

Edit the subject on your first post ok?

[GM]

OK this is really annoying now... I'm not trying to frustrate you guys but it didn't work. I even tried moving the TAB section above the A link section to see if that was an issue but NO GO, what the frigg am I doin' wrong?

.Tab {
	BACKGROUND-COLOR: #73004E;
}
.Tab:link {
        COLOR: #FFD44C; TEXT-DECORATION: none; 
}
.Tab:visited {
        COLOR: #FFD44C; TEXT-DECORATION: none; 
}
.Tab:hover {
	COLOR: Aqua;
	TEXT-DECORATION: underline;
}
.Tab:active  {
        COLOR: #FFD44C; TEXT-DECORATION: none; 
}
A:link {
	COLOR: Teal;
	TEXT-DECORATION: none;
}
A:visited {
	COLOR: Teal;
	TEXT-DECORATION: none;
}
A:hover {
	COLOR: Aqua;
	TEXT-DECORATION: underline;
}
A:active  {
	COLOR: Teal;
	TEXT-DECORATION: none;
}

Sorry for the hassle.