Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / define main page--hover style

define main page--hover style

Locked

Views: 1,598

Results 1 to 4 of 4
This thread is locked. New replies are disabled.
26 Sep 2008, 3:29 AM
#1
jerry5763837 avatar

jerry5763837

Zen Follower

Join Date:
May 2008
Posts:
261
Plugin Contributions:
0

define main page--hover style

hi, everyone,

a hover problem neeeds your help, thanks.

i am writing main page through Admin->Tools->Define Pages Editor->define_main_page.php

for example,i wrote down following words, and it links to www.example.com:

more information, please click here

the question is:
i want it to change color when mouse hovers on above words?

can you please help??
your reply would be appreciated.

26 Sep 2008, 10:32 AM
#2
scriptjunkie avatar

scriptjunkie

Totally Zenned

Join Date:
Jul 2008
Posts:
772
Plugin Contributions:
0

Re: define main page--hover style

Hi Jerry,

First, in case you don't know, begin by making a back up of the file before you edit it.

Second, in case you don't know, set up your file override system before you make any changes to your Zen Cart. Info on that can be found here:

https://www.zen-cart.com/tutorials/index.php?article=230

https://www.zen-cart.com/tutorials/index.php?article=143

Next - Just write your main page content and links normally, as you have been, using your define page editor in the admin without worrying about link color. You'll customize the link appearance and behavior in the CSS file.

Next - Locate this file:

/includes/templates/YOUR_CUSTOM_TEMPLATE/css/stylesheet.css

If there is no CSS file in YOUR_CUSTOM_TEMPLATE yet, you'll need to copy it from /includes/templates/template_default/css/stylesheet.css

If there is no YOUR_CUSTOM_TEMPLATE folder yet, go back and read the first two links at the top of this post.

NOTE: the colors codes shown are mine, yours will be different

body {
margin: 0;
font-family: verdana;
font-size: 80%;
line-height: 160%;
color: #111;
background-color: #ffffff;
}

a img {border: none; }

a {
color: #0033CC;
text-decoration: none;
}
a:visited {
color: #0033CC;
text-decoration: none;
}
a:hover {
color: #000060;
text-decoration: underline;
}Change the color code (bold/red) in the **section that's **bold/green to whatever you want it to be.

**NOTE: this change affects the links on every page in your cart.

Hope this helps :smile:
**

28 Sep 2008, 2:26 AM
#3
jerry5763837 avatar

jerry5763837

Zen Follower

Join Date:
May 2008
Posts:
261
Plugin Contributions:
0

Re: define main page--hover style

ScriptJunkie:

Hi Jerry,

First, in case you don't know, begin by making a back up of the file before you edit it.

Second, in case you don't know, set up your file override system before you make any changes to your Zen Cart. Info on that can be found here:

https://www.zen-cart.com/tutorials/index.php?article=230

https://www.zen-cart.com/tutorials/index.php?article=143

Next - Just write your main page content and links normally, as you have been, using your define page editor in the admin without worrying about link color. You'll customize the link appearance and behavior in the CSS file.

Next - Locate this file:

/includes/templates/YOUR_CUSTOM_TEMPLATE/css/stylesheet.css

If there is no CSS file in YOUR_CUSTOM_TEMPLATE yet, you'll need to copy it from /includes/templates/template_default/css/stylesheet.css

If there is no YOUR_CUSTOM_TEMPLATE folder yet, go back and read the first two links at the top of this post.

NOTE: the colors codes shown are mine, yours will be different

Change the color code (bold/red) in the **section that's **bold/green to whatever you want it to be.

**NOTE: this change affects the links on every page in your cart.

Hope this helps :smile:
**

HI, ScriptJunkie
Thanks for your reply.
Found where the problem is, and fixed it.

Whoops.:clap::clap:

29 Sep 2008, 3:38 AM
#4
scriptjunkie avatar

scriptjunkie

Totally Zenned

Join Date:
Jul 2008
Posts:
772
Plugin Contributions:
0

Re: define main page--hover style

Good deal!