The Official Website of AgoraCart and Agora.cgi
AgoraCart.com Demos Download AgoraCart User Manuals & Wiki Gold Members Forum Go Gold Now! Gold Version Memberships

AgoraCart.com

About
Features
Download
Payment Gateways
Send a Donation
Founders Club
BLOG: News & Updates

Showcases & Demos

AgoraCart Demos
Shop Live Stores

Downloads & Add-ons

Gold Version Downloads
DBwizz Database Mgr.
AgoraCart.com Store

Help & Support

User Manuals
Gold Version Users Forum
Gold Version Chat
Tech Support
Certified Agora Pros
Certified Designers
Hire a Freelancer

Gold Version Members

Member Benefits
Join Today!
Gold Members Home
Gold Version Users Forum
Gold Version Chat Rooms
Gold Version Downloads

For Store Owners

Merchant Accounts
Cool Resources
Advertise Here
"Powered by" Logos
Web Hosting Search

Misc.

Contact Us
MEET's Talking Guide
The Ancient Greek Agora






AgoraCart Free User Forums

This is the official FAQ and Cool Tips guide For the AgoraCart shopping Cart software


Official Sponsors of the AgoraCart Project:

       


RegisterSearchFAQLog in
Reply to topic Page 1 of 1
How to Make Different Link Colors
Author Message
Reply with quote
Post How to Make Different Link Colors 
Hi,

I am wondering how to have separate link colors. Example, I want a dark green background on my navigation bar and so need a light colored link. But, for the background color of my page body, I want a light color and so need a darker color link - much the same way agora.com is set up.

Thank you,

Chris

View user's profile Send private message MSN Messenger
Reply with quote
Post  
hell-o
be sure to read this post concerning how and where to add css to the head tag for store dynamic and html pages...
http://www.agoraguide.com/faq/viewtopic.php?t=358
you can either use a remote file which is cool for global settings or you can add the css directly into the head tag.

based on the example in the link above i'll demonstrate one method to handle multiple nav attributes.

it's best to test new stuff on the storefront page (store/html/index.html) then impliment the final results into the freeform logic.

referreing to the example in the link above (a condensed version) the required container for css is...

<style type="text/css">
<!--
your css stuff here
-->
</style>

to designate the basic link attributes you will add this...
Code:
<style type="text/css">
<!--

A:link {
    COLOR: #cc0000; TEXT-DECORATION: none
}
A:visited {
    COLOR: #cc0000; TEXT-DECORATION: none
}
A:hover {
    COLOR: #cc0000; TEXT-DECORATION: underline
}

-->
</style>

this will set up the colors for all text links for the page(s). the only one you really need is the "A:link" the rest are preference only and not required.

to define a sub set of link attributes you might add something like this...
Code:
<style type="text/css">
<!--
/*general link attributes*/

A:link {
    COLOR: #cc0000; TEXT-DECORATION: none
}
A:visited {
    COLOR: #cc0000; TEXT-DECORATION: none
}
A:hover {
    COLOR: #cc0000; TEXT-DECORATION: underline
}

/*nav link attributes*/

A.nav:link {
     color: #00f; background-color: transparent;
}

A.nav:visited {
     color: #00c; background-color: transparent;
}

A.nav:hover {
     color: #fff; background-color: #00f; text-decoration: none;
}

a.nav:active {
     color: #00f; background-color: transparent;
}

-->
</style>

add the above to the head tag in your html file between the /title and the /head tags. all links on the page will use the A:link set until you selectively call the A.nav:link set. to call the A.nav:link set in the contents of the body tag, one method to use would be...
Code:
<font face="Arial" size="1">Technical Assistance Provided By <A HREF="http://www.cartsolutions.net" TITLE="E-Commerce Solutions That Work!" TARGET="_blank" class="nav">CartSolutions.net</A>


notice the
class="nav"
added to the href tag!

if you don't want the background color in the hover and elsewhere then just remove the background-color: #xxx; and text decorations are limited but can add underlines and other stuff. you can also add margins and a whole bunch of thingies to spiff up the results.

regards,
dan

Reply with quote
Post  
Hi,

This was all very helpful because I know how to change the body of my pages now and I know where they are all kept. It all seemed a mystery before. But, I am still having trouble. I can't understand how to change the link colors on the navigation bar on the left hand side (such as the agoracart.com site which has yellow links on a green background.

Which file or control panel has a place to change the link color for this nav bar? I can't seem to find it.

Is there a place where I can get more info on free-form logic?

Thank you once again.

Chris

View user's profile Send private message MSN Messenger
Reply with quote
Post  
hell-o
could you provide a link to your store? thanks.
regards,
dan

Reply with quote
Post  
Hi,

Yes I can. Thanks for asking. Not much of a store yet!

http://www.karengriffith.com/scripts_3/store/agora.cgi

Chris

View user's profile Send private message MSN Messenger
Reply with quote
Post  
Chris,
In the manager -> Store Layout
you can change the color of the links in the first settings on the page.
This is a global variable...
To have different color links in the nav area than the product area of the page, you will need to employ the use of CSS and edit the store_header.inc, secure_store_header.inc, store_footer.inc & secure_store_footer.inc files to apply the CSS styles, as Dan was mentioning above.

HTH! Very Happy


_________________
God Bless!
Bonnie - AgoraCart Moderator

Get a Gold Membership
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger ICQ Number
Reply with quote
Post  
Hi,

Thank you for your reply. I am looking at the code for secure store_header.inc and I do not see where I can add in CSS for the links.

Can you show me where to do it in the code. I understand HTML and CSS but Perl is a little bit over my head. Since there is no HTML HEAD tag here, I can't add in the CSS in the HEAD and I can't really see a place where the links are in the body of this code.

Chris
Code:
<!--BEGIN HEADER TABLE-->
<table WIDTH=765 HEIGHT=28 BORDER=0 CELLPADDING=0 CELLSPACING=0>
  <tr>
    <td HEIGHT=40 BGCOLOR="#003333" ALIGN=CENTER width="495"> <font face="Verdana, Arial" size=+1 color="#FFFF99"><b>Karen
      Griffith Farms</b><br>
      </font><font face="Verdana, Arial" size=2 color="#FFFF99"><i>Thanks for Visiting
      my Store!</i></font> </td>
    <td HEIGHT=40 BGCOLOR="#003333" ALIGN=right width="270"><font face="Verdana, Arial" color="#ffffff" size=2>
      <form METHOD="POST" ACTION="
<!--agorascript-post { &capture_STDOUT;
print "$sc_store_url";
&uncapture_STDOUT;
} -->
         
        <input TYPE="hidden" NAME="cart_id" VALUE="%%cart_id%%">
        <input TYPE="text" NAME="keywords" SIZE=20 MAXLENGTH=40>
        <input TYPE="hidden" NAME="ppinc" VALUE="search">
        <input TYPE="submit" NAME="search_request_button" VALUE=" Search ">
      </form>
      </font> </td>
  </tr>
</TABLE>
<TABLE WIDTH=765 BORDER=0 CELLSPACING=0 CELLPADDING=0 align=top>
<TR><TD WIDTH=145 valign=top BGCOLOR="#003333" height=100%><br>
<b><font face="Arial,Helvetica" color="#CC6600" size=2><CENTER>Shopping Categories:</CENTER></font><font face="Arial,Helvetica" color="#FF0000" size=1>
<!--agorascript-pre { # code to count up the CART contents
local(%db_ele,$sku,$category,%category_list);
if (!($sc_db_lib_was_loaded =~ /yes/i))
 { &require_supporting_libraries (__FILE__, __LINE__, "$sc_db_lib_path"); }
&capture_STDOUT;
&get_prod_db_element($db{"product"},*db_ele);
foreach $sku (keys %db_ele) {
  $category = $db_ele{$sku};
  $category_list{$category}++;
}
foreach $category (sort(keys %category_list)) {
   $category2 = $category;
  $category2=~s/_/ /g;
  print "&nbsp;&nbsp;<a href=\"$sc_store_url?cart_id=%%cart_id%%&product=",
    "$category\"> $category2 </a><br>\n";
}
&uncapture_STDOUT; }
--></font></b>
<BR><HR><BR>
<CENTER><font face="Arial,Helvetica" color="#CC6600" size=2><B>Look For Gifts under this Price:</B></font>
<form METHOD="POST" ACTION="<!--agorascript-post { &capture_STDOUT;
print "$sc_store_url";
&uncapture_STDOUT;
} -->
          <input
TYPE="hidden" NAME="cart_id" VALUE="%%cart_id%%">
          <font color="#CC6600">$</font>
          <input TYPE="text" NAME="query_price_high_range" SIZE=7 MAXLENGTH=10><BR>
<input TYPE="hidden" NAME="ppinc=search" VALUE="search">
  <input TYPE="submit" NAME="search_request_button" VALUE=" Search "></form></CENTER><br><br>
<font face="Arial,Helvetica" color="#CC6600" size=2><CENTER><b>Company Info:</b></CENTER></font>
<!--agorascript-pre
&capture_STDOUT;
&cartlinks;
  print "<font face=\"Arial\" size=\"2\">";
$cartlinks =~ s/<br>/<br>&nbsp;&nbsp;/ig;
# take make links underlined
$cartlinks =~ s/style=\"text-decoration: none\"//ig;
# to layout horizontally with 3 spaces
# $cartlinks =~ s/<br>/&nbsp;&nbsp;&nbsp;/ig;
# to layout horizontally with | dividers spaces
# $cartlinks =~ s/<br>/&nbsp;&nbsp;|&nbsp;&nbsp;/ig;
print "&nbsp;&nbsp;";
print $cartlinks;
  print "</font>";
&uncapture_STDOUT;  -->
<br>
<br>
</TD><TD WIDTH="620" bgcolor="#FFFFCC" valign=top>

<!--END HEADER TABLE-->


View user's profile Send private message MSN Messenger
Reply with quote
Post  
Chris,
Have you got the CSS defined in the free form logic as Dan describes?
You first have to have that done, then you will add the class to the following line:
Code:
  print "&nbsp;&nbsp;<a href=\"$sc_store_url?cart_id=%%cart_id%%&product=",


So, it would look something like:
Code:
  print "&nbsp;&nbsp;<a class=\"nav\" href=\"$sc_store_url?cart_id=%%cart_id%%&product=",


HTH! Very Happy


_________________
God Bless!
Bonnie - AgoraCart Moderator

Get a Gold Membership
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger ICQ Number
Reply with quote
Post  
Oh,

Thank you for pointing that out. I think it all makes since now. I will give it a whirl and let you know!

Chris

View user's profile Send private message MSN Messenger
Reply with quote
Post  
Yes! It did work.

Thank you Dan. Thank you Bonnie!

Chris

View user's profile Send private message MSN Messenger
Reply with quote
Post  
OOPS, Guess I spoke too soon. I got the Free Form Logic to work for the store_header.inc but not for secure_store_header.inc. For some reason, I can't get it to work on that file. This is what my code looks like for that file:

print "&nbsp;&nbsp;<a class=\"nav\" href=\"$sc_store_url?cart_id=%%cart_id%%&product=",
"$category\"> $category2 </a><br>\n";

If you go to the site - you will see what I mean.

http://www.karengriffith.com/scripts_3/store/agora.cgi

Also, have not figured out how to do the index page or the bottom links on any page.

Are there any step by steps describing this?

Thank you,

Chris

View user's profile Send private message MSN Messenger
Reply with quote
Post  
hell-o
edit the store/html/forms/offline orderform.html file. add the css under the title tag in the header.
this will fix step one. step two is covered by the freeform logic automatically.
regards,
dan

Reply with quote
Post  
Thank you Dan!

I did get the links in the offline order form working. Slowly inching along...

Now, for the bottom links...

Chris

View user's profile Send private message MSN Messenger
Reply with quote
Post  
Chris,
Which bottom links?


_________________
God Bless!
Bonnie - AgoraCart Moderator

Get a Gold Membership
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger ICQ Number
Reply with quote
Post  
Bonnie,

Thank you for asking. I am talking about the links on the left hand navigation bar beneath where it says Company Info:

Also, the links at the bottom of the page where it says Home - About Us - Contact Us - Return Policy. I want to change those out of the blue color.

Chris

View user's profile Send private message MSN Messenger
Reply with quote
Post  
Chris,
The cartlinks are handled in the agora.cgi file about line 1602.

HTH!


_________________
God Bless!
Bonnie - AgoraCart Moderator

Get a Gold Membership
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger ICQ Number
Reply with quote
Post  
YIDH!

That most certainly did do the trick. Inching along to success. Thanks. I'll be back shortly I am sure with more questions. But, then I guess it is about time for me to switch over to AgoraCart Pro. Since I'm almost a pro now. Lol.

I'm so happy now.

I guess my next question will be how to change the nav links on the index page then I will be out of your hair about link colors. Smile

Chris

View user's profile Send private message MSN Messenger
Reply with quote
Post  
Chris,
The index page is a static page that you can edit directly.
The file is found in the 'html' directory of the store and is called,
index.html .

HTH!


_________________
God Bless!
Bonnie - AgoraCart Moderator

Get a Gold Membership
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger ICQ Number
Reply with quote
Post  
Thank you.

Finally, I have the links colors changed and they are looking good. Everything is hunky dorey now!

Need to move on to the next step - what ever that may be!

Thanks again for getting me through this. Couldn't have done it without you all!

Chris Wink

View user's profile Send private message MSN Messenger
Display posts from previous:
Reply to topic Page 1 of 1
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum