Announcement

Collapse
No announcement yet.

Changing a href links with stylesheet

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    Changing a href links with stylesheet

    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!!!!!


    Regards
    Peter
    Tags: None
    #2
    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...

    Comment

      #3
      Hi
      Thanks for a quick reply, but sadly it still does not work.

      Comment

        #4
        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....

        Comment

          #5
          Here is an extract of a style sheet I customised to have two different types of navigation link:

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

          Code:
          <A class="nav" HREF="NETQUOTEVAR:SECTIONLINK">
<I><B>
NETQUOTEVAR:SECTIONNAME
</B></I>
</A>
          It does work, honest. Maybe you could attach your stylesheet.

          Comment

            #6
            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;}

            Comment

              #7
              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='.

              Comment

                #8
                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

                Comment

                  #9
                  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
                  -----------------------------------------

                  First Tackle - Fly Fishing and Game Angling

                  -----------------------------------------

                  Comment

                    #10
                    You are missing a semi colon after the color

                    hth.
                    Ian

                    Comment

                      #11
                      ARRRRRGGGGHHHHHHHHHHHHHHHHH

                      ARRRRRGGGGHHHHHHHHHHHHHHHHH
                      Yes folks thats it!!! a ,missing semi-colon.
                      It works ok now. Thanks Ian, well spotted.
                      Thank you to everyone who replied.

                      Comment

                      Previous template Next
                      Working...
                      X