Changing ONLY Shopping Cart & Checkout Links

Hi all,

I want to change the color of only the "Shopping Cart" and "Checkout" links found in the header...but leave the other links (Home, Log In) the same color.

Can anyone help with this? I assume it involves creating a declaration for those two links, then specifying their new colors in the stylesheet. Just need a little guidance!

Thanks,

Dave

You will need to add a class to these links in tpl_header.php, and then style that class in your stylesheet.

<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
    <ul class="back">
    <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
<?php } } ?>

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php }?>
</ul>
</div>
<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
<br class="clearBoth" />
</div>
<!--eof-navigation display-->
```add
class="headCartLink" to the lines:```php
    <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>" class="headCartLink"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>" class="headCartLink"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>

Thanks for the quick reply! I did both and am able to change the size of the links, but the color won't change...any ideas?

This is what I added to the CSS file:

.headCartLink {
font-size: 1.1em;
font-weight: bold;
color: #ff9933;
}

dave_nextexit:

Thanks for the quick reply! I did both and am able to change the size of the links, but the color won't change...any ideas?

This is what I added to the CSS file:

.headCartLink {
font-size: 1.1em;
font-weight: bold;
color: #ff9933;
}

G,
I dont want to step on your thread, but I think this is right:

Add the following declaration right below the above:

.headCartLink a {color: #ff9933}

Hey, whoever's there first with the answer gets it to the asker sooner... especially if a previous responder is away from the computer.

... though in this case, the headCartLink class is applied to the link itself, so you wouldn't say

.headCartLink a {

but

a.headCartLink {

and if more weight is needed

#navMain a.headCartLink {

haredo:

G,
I dont want to step on your thread, but I think this is right:

Add the following declaration right below the above:

.headCartLink a {color: #ff9933}

Thanks haredo, but they arent changing color still. Here's what I have:

.headCartLink {
font-size: 1.1em;
font-weight: bold;
color: #ff9933;
}

.headCartLink a {color: #ff9933}

You can put all of those properties in the one declaration - tidier that way.

a.headCartLink {
font-size: 1.1em;
font-weight: bold;
color: #ff9933}

Thank you both for the help! I got it!

This was the winning combo in CSS:

#navMain a.headCartLink {
font-size: 1em;
font-weight: bold;
color: #fb7e02;
}

FYI, the color wouldnt change until I added the #navMain in front of it

While we're all here, do you guys know how I could right align just those two links on the header? I'd like to keep the rest on the left side of the header

You would have to move the class to the <li> for each of those, to affect the position. Then it would be

#navMain .headCartLink {float: right;}

and

#navMain .headCartLink a {
font-size: 1em;
font-weight: bold;
color: #fb7e02;
}