Author |
Message |
Christina
Newbie - One Blade
Joined: 28 May 2005
Posts: 15
Location: Middleport, Ohio
|
 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
|
Sun Jun 05, 05 10:41 pm |
|
 |
Dan
Guest
|
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
|
Mon Jun 06, 05 12:59 am |
|
 |
Christina
Newbie - One Blade
Joined: 28 May 2005
Posts: 15
Location: Middleport, Ohio
|
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
|
Sat Jun 11, 05 3:38 pm |
|
 |
Dan
Guest
|
hell-o
could you provide a link to your store? thanks.
regards,
dan
|
Sat Jun 11, 05 10:08 pm |
|
 |
Christina
Newbie - One Blade
Joined: 28 May 2005
Posts: 15
Location: Middleport, Ohio
|
Hi,
Yes I can. Thanks for asking. Not much of a store yet!
http://www.karengriffith.com/scripts_3/store/agora.cgi
Chris
|
Sun Jun 12, 05 2:03 pm |
|
 |
scottcrew
Moderator
Joined: 13 Feb 2004
Posts: 7516
Location: The West Side of MI USA
|
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!
_________________ God Bless!
Bonnie - AgoraCart Moderator
Get a Gold Membership
|
Sun Jun 12, 05 2:41 pm |
 |
 |
Christina
Newbie - One Blade
Joined: 28 May 2005
Posts: 15
Location: Middleport, Ohio
|
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 " <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> /ig;
# take make links underlined
$cartlinks =~ s/style=\"text-decoration: none\"//ig;
# to layout horizontally with 3 spaces
# $cartlinks =~ s/<br>/ /ig;
# to layout horizontally with | dividers spaces
# $cartlinks =~ s/<br>/ | /ig;
print " ";
print $cartlinks;
print "</font>";
&uncapture_STDOUT; -->
<br>
<br>
</TD><TD WIDTH="620" bgcolor="#FFFFCC" valign=top>
<!--END HEADER TABLE-->
|
Sun Jun 12, 05 3:42 pm |
|
 |
scottcrew
Moderator
Joined: 13 Feb 2004
Posts: 7516
Location: The West Side of MI USA
|
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 " <a href=\"$sc_store_url?cart_id=%%cart_id%%&product=",
So, it would look something like:
Code: print " <a class=\"nav\" href=\"$sc_store_url?cart_id=%%cart_id%%&product=",
HTH!
_________________ God Bless!
Bonnie - AgoraCart Moderator
Get a Gold Membership
|
Sun Jun 12, 05 3:58 pm |
 |
 |
Christina
Newbie - One Blade
Joined: 28 May 2005
Posts: 15
Location: Middleport, Ohio
|
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
|
Mon Jun 13, 05 7:59 am |
|
 |
Christina
Newbie - One Blade
Joined: 28 May 2005
Posts: 15
Location: Middleport, Ohio
|
Yes! It did work.
Thank you Dan. Thank you Bonnie!
Chris
|
Wed Jun 15, 05 3:00 pm |
|
 |
Christina
Newbie - One Blade
Joined: 28 May 2005
Posts: 15
Location: Middleport, Ohio
|
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 " <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
|
Wed Jun 15, 05 4:20 pm |
|
 |
Dan
Guest
|
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
|
Wed Jun 15, 05 11:27 pm |
|
 |
Christina
Newbie - One Blade
Joined: 28 May 2005
Posts: 15
Location: Middleport, Ohio
|
Thank you Dan!
I did get the links in the offline order form working. Slowly inching along...
Now, for the bottom links...
Chris
|
Thu Jun 16, 05 5:45 am |
|
 |
scottcrew
Moderator
Joined: 13 Feb 2004
Posts: 7516
Location: The West Side of MI USA
|
Chris,
Which bottom links?
_________________ God Bless!
Bonnie - AgoraCart Moderator
Get a Gold Membership
|
Thu Jun 16, 05 6:16 am |
 |
 |
Christina
Newbie - One Blade
Joined: 28 May 2005
Posts: 15
Location: Middleport, Ohio
|
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
|
Thu Jun 16, 05 7:34 am |
|
 |
scottcrew
Moderator
Joined: 13 Feb 2004
Posts: 7516
Location: The West Side of MI USA
|
Chris,
The cartlinks are handled in the agora.cgi file about line 1602.
HTH!
_________________ God Bless!
Bonnie - AgoraCart Moderator
Get a Gold Membership
|
Thu Jun 16, 05 8:36 am |
 |
 |
Christina
Newbie - One Blade
Joined: 28 May 2005
Posts: 15
Location: Middleport, Ohio
|
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.
Chris
|
Thu Jun 16, 05 8:34 pm |
|
 |
scottcrew
Moderator
Joined: 13 Feb 2004
Posts: 7516
Location: The West Side of MI USA
|
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
|
Fri Jun 17, 05 5:41 am |
 |
 |
Christina
Newbie - One Blade
Joined: 28 May 2005
Posts: 15
Location: Middleport, Ohio
|
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
|
Sat Jun 18, 05 7:55 pm |
|
 |
|