X-Cart: shopping cart software

X-Cart forums (https://forum.x-cart.com/index.php)
-   Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)
-   -   Changing link colours in speedbar (https://forum.x-cart.com/showthread.php?t=7714)

GM 05-22-2004 11:10 PM
Changing link colours in speedbar
 
I'm not sure how to do this? :oops:
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 05-24-2004 12:51 AM
create a new set of styles and apply them to the links in the speed bar

something like

Code:
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 05-24-2004 07:42 AM
Thanks Shan you rock! :D

But I'm not sure how to do that, I don't know how to marry
Code:
<link rel="stylesheet" href="{$SkinDir}/{#CSSFile#}">

with

Code:
<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) :oops:

adpboss 05-24-2004 09:16 AM
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 05-24-2004 09:25 AM
Quote:
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 05-24-2004 12:22 PM
That's the problem, nowhere in tab.tpl is it showing where it's pulling styles:

Code:
<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 05-24-2004 12:47 PM
Code:
<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
Code:
.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

Code:
.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 05-24-2004 05:07 PM
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! 8O I never would have got it.

adpboss 05-24-2004 05:14 PM
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! :D

Edit the subject on your first post ok? ;)

GM 05-24-2004 05:54 PM
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?

Code:
.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.

Emerson 05-24-2004 05:59 PM
What exactly is not working?
The regular font color?

try to edit
Code:
.Tab {
  BACKGROUND-COLOR: #73004E;
}

to
Code:
.Tab {
  BACKGROUND-COLOR: #73004E;
  COLOR: #color;
}

adpboss 05-24-2004 06:00 PM
Put the .tab entries back where they belong.

Regenerate your templates by running cleanup.php

Never post your entire file like that again, because I don't want to scroll for 1/2 an hour. Post what is relevant.

Emerson 05-24-2004 06:03 PM
Quote:
Originally Posted by adpboss
Put the .tab entries back where they belong.

Regenerate your templates by running cleanup.php

Never post your entire file like that again, because I don't want to scroll for 1/2 an hour. Post what is relevant.

You tell him :lol:

adpboss 05-24-2004 06:31 PM
GM,

You need to fix the thread title and never post an entire file when a snippet will do. Sorry if I sounded harsh before, but you've been around for awhile now. We expect more from you.

Copy my tab code exactly as I have it in my example.

Just change what you absolutely need, don't try to get too fancy. You need to flush your template cache either from the Summery page in the admin or via http://www.yoursite.com/xcartdirectory/cleanup.php.

Just try and get a basic mouseover (hover) change happening before trying to butcher all of the code. Your idea of moving it up the Style Sheet doesn't have any effect.

This is a rudimentary error, but we need to know that you are trying the basics first. Always make troubleshooting simple.

GM 05-24-2004 07:36 PM
I Put the Tab section back... copied and pasted your code (and colours) exactly... cleaned the template cache... STILL DOSEN'T WORK.

The reason I included the full CSS is incase there are vast differences in 3.5.7... Sorry.

adpboss 05-24-2004 07:46 PM
Can you please paste only the tab code here. Just two lines above, the code and then two lines below will do.

I'm trying to clear orders right now, but I will look at this until we get it worked out.

[EDIT] Unfortunately, I disable the speed bar in my 3.5.7 store (removed from code) so I don't have a sample to play with.

GM 05-24-2004 08:02 PM
Thanks for not bailing on me...

Code:
.SmallText {
        COLOR: #FFFFFF; TEXT-DECORATION: none; FONT-SIZE: 12px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
}
.Bottom {
        BACKGROUND-COLOR: #73004E; COLOR: #FFD44C;
}
.Tab {
        COLOR: #73004E; TEXT-DECORATION: none;
}
.Tab:link {
        COLOR: #330000; TEXT-DECORATION: none;
}
.Tab:visited {
        COLOR: #330000; TEXT-DECORATION: none;
}
.Tab:active  {
        COLOR: #330000; TEXT-DECORATION: none;
}
.CatMenuItemOff
{
    BACKGROUND-COLOR: #FFD44C;              /* like "VertMenuBox" */
    BORDER-RIGHT: #FFD44C 1px solid;        /* like "VertMenuBox" */.Tab:hover {
        COLOR: #550000; TEXT-DECORATION: underline;
}

This is the original:

Code:
.Bottom {
        BACKGROUND-COLOR: #73004E; COLOR: #FFD44C;
}
.Tab {
        BACKGROUND-COLOR: #73004E;
        FONT-WEIGHT: bold;
        TEXT-TRANSFORM: uppercase;
}
.CatMenuItemOff
{
    BACKGROUND-COLOR: #FFD44C;              /* like "VertMenuBox" */

adpboss 05-24-2004 08:08 PM
Try this

Code:
.Tab {
  BACKGROUND-COLOR: #73004E;
  FONT-WEIGHT: bold;
  TEXT-TRANSFORM: uppercase;
}
.Tab:link {
        COLOR: #330000; TEXT-DECORATION: none;
}
.Tab:visited {
        COLOR: #330000; TEXT-DECORATION: none;
}
.Tab:active  {
        COLOR: #330000; TEXT-DECORATION: none;
}

GM 05-24-2004 08:15 PM
That was the first thing I tried.

GM 05-24-2004 08:19 PM
For some reason the A Link styles are over riding everything...?

[EDIT] Tried it again to be sure... NOPE

adpboss 05-24-2004 08:25 PM
This is my last suggestion. I gotta get back to work. Good luck, I hope this gets your imagination going. You can figure this out for yourself I am sure!

Work from the original code. Add this after the TAB entry.

Code:
.Tabcustom:link {
  COLOR: Teal;
  TEXT-DECORATION: none;
}
.Tabcustom:visited {
  COLOR: Teal;
  TEXT-DECORATION: none;
}
.Tabcustom:hover {
  COLOR: Aqua;
  TEXT-DECORATION: underline;
}
.Tabcustom:active  {
  COLOR: Teal;
  TEXT-DECORATION: none;
}

Change in tab.tpl

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

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

GM 05-24-2004 08:35 PM
Thanks for your time... but it didn't work.
(If I could figure it out I wouldn't have posted it) FRIGGGGG!!

adpboss 05-24-2004 08:41 PM
If you are going to get frustrated before you get started, then you will never figure anything out.

Your launch date is September. Move on to other things and keep bumping this thread for help or maybe it will eventually come to you. Getting upset and fixated on one small cart tweak is going to ruin your whole development effort.

You have to stay positive and focused.

Good luck.

GM 05-24-2004 08:44 PM
Your right adpboss... onward... through the fog :D and thanks again for trying.

shan 05-25-2004 02:47 AM
try add the class to the link. edit top_menu.tpl if the link is in there

GM 05-25-2004 08:13 AM
That was a brilliant thought shan but it didn't work either.
I even tried a variation in styles:
Code:
A.Tab:link {
  COLOR: #FFD44C;
  TEXT-DECORATION: none;
}
A.Tab:visited {
  COLOR: #FFD44C;
  TEXT-DECORATION: none;
}
A.Tab:hover {
  COLOR: Aqua;
  TEXT-DECORATION: underline;
}
A.Tab:active  {
  COLOR: #FFD44C;
  TEXT-DECORATION: none;
}
I might have found the perfect workaround though... I'm ripping the speedbar out! :lol:

adpboss 05-25-2004 08:26 AM
Yes. Destroy the speed bar.

I hate it myself. I mean it's a cool idea, but the default look and the lack of styles you can apply make it NASTY looking IMHO.

shan 05-25-2004 08:43 AM
LOL

or try


had a few extra ` in there

GM 05-25-2004 03:02 PM
Mission Accomplished... Speedbar Destroyed! :twisted:

I am gonna' try shans variation though for future reference. The only nice thing about staying near default guidelines is upgrading... other than that... tear it down, build new, I guess by nature we all hate default "Anything" Thanks you guys for all your help. GM

(note: no speedbars were harmed during the making of this thread)

GM 05-25-2004 04:00 PM
I DON'T BELIEVE IT!!! IT WORKED!!! 8O

BRILLIANT!! ABSOLUTELY BRILLIANT!!!

Between the two of you, you could probably solve anything!
That was hard man! I never, ever, would have got it.
My highest respects to you! :D

Here's a recap for anyone who's been trying to follow this thread:

(all credit goes to shan and adpboss)

First change Tab styles in skin1/CSS to:
Code:
.Tab {
  BACKGROUND-COLOR: #73004E;
  FONT-WEIGHT: bold;
  TEXT-TRANSFORM: uppercase;
}
.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;
}

Then in skin1/customer/top_menu.tpl change:
To:

PhilJ 04-29-2005 03:17 AM
Thanks for the fix, I spent hours trying to figure this one out ](*,)

Scott DeToffol 07-28-2006 10:38 AM
I'm stuck
 
I'm stuck on this one too.

I can adjust .Tab properties in skin1.css and it works, but the link properties inherit from the A:link at the top of the .css file.

Here is my code:

top_menu.tpl
Quote:
<TD valign="top" >{include file="customer/tab.tpl" tab_title="`$speed_bar[sb].title`"}</TD>

Here is my skin1.css
Quote:
.Tab {
FONT-WEIGHT: normal;
TEXT-TRANSFORM: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666666;
font-size: 12px;
}
.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;
}

Any help is appreciated.

Scott DeToffol 08-01-2006 01:30 PM
Fixed
 
Fixed it myself ;)

Quote:
.Tab {
FONT-WEIGHT: normal;
TEXT-TRANSFORM: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.Tab A:link {
COLOR: #333333;
TEXT-DECORATION: none;
}
.Tab A:visited {
COLOR: #333333;
TEXT-DECORATION: none;
}
.Tab A:hover {
COLOR: red;
TEXT-DECORATION: underline;
}
.Tab A:active {
COLOR: #red;
TEXT-DECORATION: none;
}


All times are GMT -8. The time now is 09:55 AM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.