PDA

View Full Version : Changing a href links with stylesheet

peterB
17-Jun-2003, 09:07 AM
Can anybody please help me, I am editing Act_Primary.html,
I have 4 text links at the bottom of the page which look like this.

Home | Shop Front | View Basket | Checkout

Here is the html
<td height="27" colspan="3" align="center" valign="middle" background="greenBlueSpacer.gif" bgcolor="#FFFFFF">
<a href="NETQUOTEVAR:NAVBHOMELINK">Home</a> | <a href="NETQUOTEVAR:NAVBCATALOGLINK" >Shop
Front</a> | <a href="NETQUOTEVAR:NAVBCARTLINK">View Basket</a> | <a href="NETQUOTEVAR:NAVBCHECKOUTLINK">Checkout</a></td>


This is the code in the body tag
<BODY TEXT="NETQUOTEVAR:FGCOLOR" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" OnLoad="NETQUOTEVAR:ONLOAD" NETQUOTEVAR:BGIMAGE NETQUOTEVAR:BGCOLOR NETQUOTEVAR:LINKCOLOR NETQUOTEVAR:VLINKCOLOR NETQUOTEVAR:ALINKCOLOR>


ALL I want to do is change the colour of the links as they are picking up the colours set by actinic ( from the toolbar, design , colors).

I have added a new reference into the actinic style sheet as follows,
.myLink{
color: #FFCC66
font-size:x-small;
text-decoration:none;
}

.myLink:hover{
color: #FFCC66
font-size:x-small;
text-decoration:underline;
}

.myLink:visited{
color: #FFCC66
font-size:x-small;
text-decoration:underline;
}

.myLink:active{
color: #FFCC66
font-size:x-small;
text-decoration:none;
}

And have referenced the styles as follows
<a href="NETQUOTEVAR:NAVBHOMELINK" class="myLink">Home</a> | <a href="NETQUOTEVAR:NAVBCATALOGLINK" class="myLink">Shop
Front</a> | <a href="NETQUOTEVAR:NAVBCARTLINK" class="myLink">View Basket</a> | <a href="NETQUOTEVAR:NAVBCHECKOUTLINK" class="myLink">Checkout</a>

This does NOT work, I have also tried using <span class="myLink"> this does not work either.
I have phoned actinic support but they could not help me either. This is so simple its infuriating!!!!!

:mad:
Regards
Peter
I-CC
17-Jun-2003, 09:46 AM
Try changing the references in your css file from:

.myLink{

to

a..myLink{

i.e. add a "a." infront of each.

Then for each HREF of say:

<a href="NETQUOTEVAR:NAVBHOMELINK">

change it to:

<a href="NETQUOTEVAR:NAVBHOMELINK" CLASS="myLink">

Hope it helps...
peterB
17-Jun-2003, 10:19 AM
Hi
Thanks for a quick reply, but sadly it still does not work.
I-CC
17-Jun-2003, 10:52 AM
You might want to check that the H REF is not contained within some additional SPAN statements that are taking precedence maybe...

i.e. further above there could be a span=actregular or something like that which has not been closed off that is affecting it.

Hope it helps....
cdicken
18-Jun-2003, 08:53 AM
Here is an extract of a style sheet I customised to have two different types of navigation link:



a:link{
color:NETQUOTEVAR:LINKCOLORCSS;
font-size:x-small;
text-decoration:none;
}

a:visited{
color:NETQUOTEVAR:VLINKCOLORCSS;
font-size:x-small;
text-decoration:none;
}

a:hover{
color:NETQUOTEVAR:HLINKCOLORCSS;
font-size:x-small;
text-decoration:underline;
}

a:active{
color:NETQUOTEVAR:ALINKCOLORCSS;
font-size:x-small;
text-decoration:none;
}

a.nav:link{
color:black;
font-size:x-small;
text-decoration:none;
}

a.nav:visited{
color:black;
font-size:x-small;
text-decoration:none;
}

a.nav:hover{
color:red;
font-size:x-small;
text-decoration:underline;
}

a.nav:active{
color:red;
font-size:x-small;
text-decoration:none;
}



Then in the templates (I did it for parent section links) I used:


<A class="nav" HREF="NETQUOTEVAR:SECTIONLINK">
<I><B>
NETQUOTEVAR:SECTIONNAME
</B></I>
</A>


It does work, honest. Maybe you could attach your stylesheet.
peterB
18-Jun-2003, 11:08 AM
Hi Chris
Thanks for the reply, well, it nearly works, in dreamweaverMx the links show up in White as I have declared in the style sheet.

BUT when I select the Preview Catalog option within actinic the links stay blue which is the default colour set by the "Design / colours" option in actinic.

I have checked to see if the correct pages are in the preview directory and they are.

Here is a copy of the style sheet.


/*cope with inheritance bugs*/
body, table, th, td{
color:NETQUOTEVAR:FGCOLORCSS;
font-size:x-small;
font-family:CUSTOMVAR:ACTCSSFONTFAMILY;
}

/*body specific*/
body{
background-color:NETQUOTEVAR:BGCOLORCSS;
background-image:url(NETQUOTEVAR:BGIMAGECSS);
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
}

a:link{
color:NETQUOTEVAR:LINKCOLORCSS;
font-size:x-small;
text-decoration:none;
}

a:visited{
color:NETQUOTEVAR:VLINKCOLORCSS;
font-size:x-small;
text-decoration:none;
}

a:hover{
color:NETQUOTEVAR:HLINKCOLORCSS;
font-size:x-small;
text-decoration:underline;
}

a:active{
color:NETQUOTEVAR:ALINKCOLORCSS;
font-size:x-small;
text-decoration:none;
}



a.nav:link{
color:white
font-size:x-small;
text-decoration:none;
}

a.nav:hover{
color:red
font-size:x-small;
text-decoration:underline;
}

a.nav:visited{
color:white
font-size:x-small;
text-decoration:none;
}

a.nav:active{
color:red
font-size:x-small;
text-decoration:none;
}

li{
color:NETQUOTEVAR:FGCOLORCSS;
list-style-type:square;
}

ol{
color:NETQUOTEVAR:FGCOLORCSS;
}

ul{
color:NETQUOTEVAR:FGCOLORCSS;
list-style-type:square;
}

H1, H2, H3, H4, H5, H6 {
font-family:CUSTOMVAR:ACTCSSFONTFAMILY;
}

.actCHECKOUTEM {background-color:NETQUOTEVAR:CHECKOUTEMCSS;}
.actCHECKOUTBG {background-color:NETQUOTEVAR:CHECKOUTBGCSS;}

.actlarger{
font-size: larger;
color:NETQUOTEVAR:FGCOLORCSS;
}

.actsmaller{
font-size: smaller;
color:NETQUOTEVAR:FGCOLORCSS;
}

.actxxsmall{font-size:xx-small;color:NETQUOTEVAR:FGCOLORCSS;}
.actxsmall{font-size:x-small;color:NETQUOTEVAR:FGCOLORCSS;}
.actsmall{font-size:small;color:NETQUOTEVAR:FGCOLORCSS;}
.actregular{font-size:medium;color:NETQUOTEVAR:FGCOLORCSS;}
.actlarge{font-size:large;color:NETQUOTEVAR:FGCOLORCSS;}
.actxlarge{font-size:x-large;color:NETQUOTEVAR:FGCOLORCSS;}
.actxxlarge{font-size:xx-large;color:NETQUOTEVAR:FGCOLORCSS;}

.actwarningcolor{color:NETQUOTEVAR:REQUIREDCOLORCSS;}
.actrequiredcolor{color:NETQUOTEVAR:REQUIREDCOLORCSS;}
.actsearchhighlightcolor{color:NETQUOTEVAR:SEARCHHIGHLIGHTCOLORCSS;}
.actrequired{color:NETQUOTEVAR:REQUIREDCOLORCSS;}
.actwarning{color:NETQUOTEVAR:REQUIREDCOLORCSS;}
.actwelcome{color:NETQUOTEVAR:FGCOLORCSS;}

.actlogotext {font-family:CUSTOMVAR:ACTCSSFONTFAMILY; font-size: x-small; color: #D9090E; font-style: normal; font-weight: bold; text-align: center}
.actlogout{font-size:x-small;color:NETQUOTEVAR:LINKCOLORCSS;}
cdicken
18-Jun-2003, 04:33 PM
Well it looks OK a - s long as you have got

class="nav"

within the <a> tags for your links.

Try placing the 'class=' code just after the 'a' and before the 'href='.
peterB
19-Jun-2003, 09:43 AM
Hi Chris
Yep it's just after the a and before the href.
Here is a copy of the table row.

<td height="27" colspan="3" align="center" valign="middle" background="greenBlueSpacer.gif">
<a class="nav" href="NETQUOTEVAR:NAVBHOMELINK">Home</a> | <a class="nav" href="NETQUOTEVAR:NAVBCATALOGLINK">Shop
Front</a> | <a class="nav" href="NETQUOTEVAR:NAVBCARTLINK">View Basket</a>
| <a class="nav" href="NETQUOTEVAR:NAVBCHECKOUTLINK">Checkout</a></td>

Peter
Mike Hughes
19-Jun-2003, 10:56 AM
I had similar problems and if I rememebr rightly it was because the preview mode didn't pick up my CSS file.

Try manually copying the CSS file into the preview directory.

Mike
ianfleeton
20-Jun-2003, 08:59 AM
You are missing a semi colon after the color

hth.
Ian
peterB
20-Jun-2003, 01:25 PM
ARRRRRGGGGHHHHHHHHHHHHHHHHH:mad:
Yes folks thats it!!! a ,missing semi-colon.
It works ok now. Thanks Ian, well spotted.
Thank you to everyone who replied.