X-Cart forums

[hoosierglass]

I am trying to change the link text color for just this menu.
I have tried all kinds of class veriations. I need only the links in this section to be different than the rest of the page. Is this even possible. Once you visit the site you will understand why that menu needs changed

www.kennedyhardware.com


Any help on this would be great.

[balinor]

That's because it is defaulting to the main link color for the site, you don't have a class assigned to the link. Create a new class of links in your stylesheet (.head for example) and call it in each individual link:

<a href="http://www.kennedyhardware.com" class="head">Home</a>

[hoosierglass]

I did create a class "HeadRightBox" here is the class:

.HeadRightBox {
	VERTICAL-ALIGN: top;
	TEXT-ALIGN: right;
    COLOR: #FFFFFF;
    A:link 
	COLOR: #FFFFFF;
	TEXT-DECORATION: none;
    A:visited 
	COLOR: #FFFFFF;
	TEXT-DECORATION: none;
    A:hover 
	COLOR: #FFFFFF;
	TEXT-DECORATION: underline;
    A:active 
	COLOR: #FFFFFF;
	TEXT-DECORATION: none;
BACKGROUND-IMAGE: http://www.kennedyhardware.com/skin1/images/headback.jpg
}

I had been trying the class before each link and now I have tried the class after each link. I have tried it at the begining of the top_head.tpl file and I have tried it before and just inside of the table. I do not have any class in the skin1.css file that makes the text red on hover so I have no idea what it is calling. So I guess my class is messed up some how.

[carpeperdiem]

what does the <td> for your header links look like?

Based on the source of your page, it appears you ned to set the class a different way.

1. Remove the <p> tags in the header links;
2. use <td class="HeadRightBox"> to call the class...
3. Dont use <a href="http://www.kennedyhardware.com">Home</a> -- instead, ALWAYS call your home page by using the EXACT SAME link: <a href="/">Home</a>
4. The <font> tag is deprecated. Make it go away. DO NOT USE the <font> tag anywhere! Use CSS!

May I suggest a site with lots of CSS info and useful tips?

http://www.highdots.com/css-editor/css_tutorial/index.html

Post a bit of your header menu <td> and we can figure out why the css isn't working...

[hoosierglass]

Here is my cleaned up top_menu:

<class="HeadRightBox">
<table border="0" width="100%" cellspacing="0" cellpadding="0" class="HeadRightBox">
	<tr>
		<td><class="HeadRightBox">
		<a href="/" class="HeadRightBox">Home</a>
		| <a href="http://www.kennedyhardware.com/help.php?section=contactus&mode=update" class="HeadRightBox">Contact Us</a> 
		| <a href="http://www.kennedyhardware.com/Pricing-amp-Shipping-sp-3.html" class="HeadRightBox">Pricing &amp; Shipping</a> 
		| <a target="_blank" href="http://www.kennedyhardware.com/Pricelist.pdf" class="HeadRightBox">Current Pricelist</a>
		| <a href="http://www.kennedyhardware.com/Order-Catalog-sp-6.html" class="HeadRightBox">Printed Catalog</a><br>
		<a href="http://www.kennedyhardware.com/Hoosier-Cabinet-Book-sp-5.html" class="HeadRightBox">Hoosier Cabinets Book</a> 
		|  <a href="http://www.kennedyhardware.com/Hoosier-Parts-sp-8.html" class="HeadRightBox">Hoosier Cabinet Parts</a> 
		|  <a href="http://www.kennedyhardware.com/Hoosier-Cabinet-Plans-sp-9.html" class="HeadRightBox">Hoosier Cabinet Plans</a>	<br>
		<a href="http://www.kennedyhardware.com/Wholesale-Package-sp-7.html" class="HeadRightBox">Wholesale Package</a>
		|  <a href="http://www.kennedyhardware.com/Monthly-Special-sp-11.html" class="HeadRightBox">Monthly Specials</a>
		</td></tr>
		</table>

and now the class in skin1.css

.HeadRightBox {
	VERTICAL-ALIGN: MIDDLE;
	TEXT-ALIGN: right;
    COLOR: #FFFFFF;
    A:link 
	TEXT-COLOR: #FFFFFF;
	TEXT-DECORATION: none;
    A:visited 
	COLOR: #FFFFFF;
	TEXT-DECORATION: none;
    A:hover 
	COLOR: #FFFFFF;
	TEXT-DECORATION: underline;
    A:active 
	COLOR: #FFFFFF;
	TEXT-DECORATION: none;
BACKGROUND-IMAGE: http://www.kennedyhardware.com/skin1/images/headback.jpg
}

I just dont understand why it is not picking up the link portion of the class because it is picking up the alignment portion.

[carpeperdiem]

Try this:

 <table border="0" width="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td class="HeadRightBox">
        <a href="/">Home</a>&nbsp;|&nbsp;
        <a href="/help.php?section=contactus&mode=update">Contact Us</a>&nbsp;|&nbsp;
        <a href="/Pricing-amp-Shipping-sp-3.html">Pricing & Shipping</a>&nbsp;|&nbsp;
        <a target="_blank" href="/Pricelist.pdf">Current Pricelist</a>&nbsp;|&nbsp;
        <a href="/Order-Catalog-sp-6.html">Printed 
        Catalog</a><br />
        <a href="/Hoosier-Cabinet-Book-sp-5.html">Hoosier Cabinets Book</a>&nbsp;|&nbsp;
        <a href="/Hoosier-Parts-sp-8.html">Hoosier Cabinet Parts</a>&nbsp;|&nbsp;
        <a href="/Hoosier-Cabinet-Plans-sp-9.html">Hoosier Cabinet Plans</a><br />
        <a href="/Wholesale-Package-sp-7.html">Wholesale Package</a>&nbsp;|&nbsp;
        <a href="/Monthly-Special-sp-11.html">Monthly Specials</a></td>
    </tr>
</table>

A few big concepts:

1. do not use http://www/kennedyhardware.com/ on every link -- relative links will work fine and are always better;
2. for your pipe separator: "&nbsp;|&nbsp;" guarantees a space before and after;
3. in xhtml, there is no "<br>" -- it is now self closing, and must be: "<br />
4. Since you're using a CSS class, no need for <font> tags anywhere.
5. If you want the "|" to be a different color or style, you should use a <span class="classname"> -- such as:

<span class="menupipecolor">&nbsp;|&nbsp;</span>

in place of

 | 

and of course, make a new class,

.menupipecolor { color: #FFFFFF; }

OK? Try this...

I'm not sure your "BACKGROUND-IMAGE: http://www.kennedyhardware.com/skin1/images/headback.jpg

will do anything... what are you trying to accomplish with this?

Please report back.

[carpeperdiem]

Your CSS is not going to do anything except make everything white.

PLEASE see the CSS tutorials and adjust your css class so that a hover or active or link will actually do something!

[carpeperdiem]

code above edited:

remove all referneces to class="HeadRightBox" EXCEPT the td.

[hoosierglass]

OK first off thanks for the help Carpeperdiem. I think I am getting the grasp and order of what calls what and where. I am a FrontPage hack at best.

Here is the top_menu.tpl I used this time:

<table border="0" width="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td class="HeadRightBox">
        <a href="/">Home</a><span class="menupipecolor">&nbsp; |&nbsp;</span>
        <a href="/help.php?section=contactus&mode=update">Contact Us</a>&nbsp; |&nbsp;
        <a href="/Pricing-amp-Shipping-sp-3.html">Pricing & Shipping</a>&nbsp; |&nbsp;
        <a target="_blank" href="/Pricelist.pdf" class="HeadRightBox">Current Pricelist</a> &nbsp;|&nbsp;
        <a href="/Order-Catalog-sp-6.html" class="HeadRightBox">Printed Catalog</a><br />
        <a href="/Hoosier-Cabinet-Book-sp-5.html">Hoosier Cabinets Book</a> &nbsp;|&nbsp;
        <a href="/Hoosier-Parts-sp-8.html">Hoosier Cabinet Parts</a> |&nbsp;
        <a href="/Hoosier-Cabinet-Plans-sp-9.html">Hoosier Cabinet Plans</a><br />
        <a href="/Wholesale-Package-sp-7.html">Wholesale Package</a> &nbsp;|&nbsp;
        <a href="/Monthly-Special-sp-11.html">Monthly Specials</a></td>
        <td class="HeadRightBox" width="8">
        &nbsp;</td>
    </tr>
</table>

I set the menupipecolor in the css and as you can see it works fine. But I still do not get the links to change to the propper color. Here is the current headrightbox class:

.HeadRightBox {
	VERTICAL-ALIGN: MIDDLE;
	TEXT-ALIGN: right;
    COLOR: #FFFFFF;
    A:link 
	TEXT-COLOR: #FFFFFF;
	TEXT-DECORATION: none;
    A:visited 
	COLOR: #FFFFFF;
	TEXT-DECORATION: none;
    A:hover 
	COLOR: #FFFFFF;
	TEXT-DECORATION: underline;
    A:active 
	COLOR: #FFFFFF;
	TEXT-DECORATION: none;
BACKGROUND-IMAGE: http://www.kennedyhardware.com/skin1/images/headback.jpg
}

The background image sets the background for the top_menu section

[hoosierglass]

Originally Posted by carpeperdiem

Your CSS is not going to do anything except make everything white.

Thats the idea. I want the links to be white always except underline when hovered.