CSS Buttons

[theodin]

Hi All,
I'm working on a CSS buttons example. (I'm tired of constantly recreating buttons as its a long and arduous job, for all in the site!) I'm learning how to do this from this site: http://sophie-g.net/jobs/css/e_buttons.htm

(WARNING: Blatant plaigarism of the example code given in the tutorial in the link above follows. This is for educational benefit of ZC'ers! You can see i really am a beginner, but in this moment I'm learning by doing too.)

I've had some success with a little luck, but with a learning curve. If you follow the exmaple, (this is for fixed width buttons) it wont exactly work in ZC. (Here i explain my successes for other learners, then ask a question. Hope you dont mind!) First, switched on CSS Buttons in the admin area. Then made me a new CSS file for the button information. Then looked at the source code and found the cssButton tags.

Success 1:
.cssButton, .cssButton:hover {
display: block;
border: none;
background-color: transparent;
background-image: url(path/to/buttonbackground.gif);
background-repeat: no-repeat;
width: 132px;
height: 28px;
margin: 5px auto;
padding: 5px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

.cssButton {
color: #002577;
}

.cssButton:hover {
background-position: 0 -36px;
color: #FF7200;
}

this didnt work for the hover, the buttons started jumping all over the place. The :hover tag was completely ignored!

Success 2:
I accidentally came across this other tag then changed to the following:
.cssButton, .cssButtonHover {
display: block;
border: none;
background-color: transparent;
background-image: url(path/to/buttonbackground.gif);
background-repeat: no-repeat;
width: 132px;
height: 28px;
margin: 5px auto;
padding: 5px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

.cssButton {
color: #002577;
}

.cssButtonHover {
background-position: 0 -36px;
color: #FF7200;
}

So my buttons (without icons) work as expected. I already see that there are individual other tags you can trap for every button possible. YAY! my possibilities are not ENDLESS!!! EXCEPT... Now I'm left wondering:

QUESTION: what are all the ZC css button tags that are possible? I couldnt see where cssButtonHover came from, and I am looking for an equivalent to .cssButton:visited. (this is because my CSS buttons turn into nothing after clicking them.) I dont really wanna edit any html_output file if i can help it. I wanna end up with the icon implementation as shown on the site I've linked above.

Eventually I would like to post a submission for a ZC variable width css buttons, using a sliding door implementation, for other users like myself. Ive got the idea, method, code etc, already in mind, i'm just having trouble connecting my css code to the buttons. Any help would be greatly appreciated. Cheers!

[kobra]

Did you or have you looked at the code in includes/templates/template_default/css/stylesheet_css_buttons.css ?

Much of what you appear to be attempting is outlined there and you could base off of this for your additional styling.

[theodin]

Hey thanks for your reply kobra. I never looked there! I now have:

/* css buttons */
.cssButton, .cssButtonHover {
display: block;
border: none;
background-color: transparent;
background-image: url(includes/templates/MY_TEMPLATE/buttons/cb_mid.gif);
background-repeat: repeat-x;
width : 20em;
background-color: #F4F4F4;
color : #000000;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 1.1em;
text-align:center;
white-space: nowrap;
text-decoration: none;
font-weight: bold;
padding: 0.3em;
}

.cssButtonHover {
color: #616161;
text-decoration: none;
background-position: 0 -36px;
color: #FF7200;
}

(also having removed some irrelevant material)

Problem for me is the same as before. I cant find any workable reference for the buttons that qualify for these, like :visited and :active. So, my buttons misbehave after they have been clicked. They just turn to white space. So while the web browser is whirring away bringing me my next page, the background image of the button is completely gone. i have had a look in the html_output file, and see only methods relating to .cssButton, .cssButtonHover. I'm wondering if this is some mod i'll have to fix??

If anyone has any suggested ideas please write!
Thanks!!!!

[kobra]

Try this file as provided first..remove any other css for buttons to prevent cascading.

Get & use FireFox and the Web Developers extention and you can interactively adjust the css for the buttons and than if happy save it locally.
The disappering act might be colors on click that match the surrounding color.

Not sure of your confusion with

I cant find any workable reference for the buttons that qualify for these, like :visited and :active.

these refer to the color etc of the listing after you have visited it or the color etc of the link that is currently active(where you are at). Can you explain what you need here in more depth?

[theodin]

Firstly, thanks for your reply kobra!

Your tip of copying the original CSS file from the default template into my templates' CSS folder (also renaming all others to some other extension) works as expected, and creates working buttons. I get grey buttons, which rise and fall when hovering etc. When they are clicked and afterwards the mouse moves away (mouseout) all works ok, the button is still there, and just appears to raise again. No problem.

My original desire is to have the same thing with a custom background. (so two state gif, painted with UP or DOWN effects as required.) I'm aiming for a button function as written in the link on the first post of this thread. The mouseover and mouseout events work already (roughly) using the code I've supplied. EXCEPT:

After clicking the button, it 'disappears'. As soon as you click and hold, the background is completely lost. My first guess of the cause is that i have the wrong CSS information. I extensively use firefox and the web tookit - thanks for the tip, to anyone else reading this, TRY IT OUT! You wont be sorry!!

So I looked aroud the css data, and i read about four possible states for these buttons. my first guess is that the html_output.php does not contain the code to manage all button states. the state im concerned most with is the one that happens after being clicked. (as this is where my trouble is.)

Through all my looking so far, it would seem to me that there is no way to reference the buttons with 'clicked state' to apply a look to them. we have the link state (unclicked) and the hover state. But the third is missing. When i attempt "cssButton:visited" tags for example, these do not work.


Thanks again for your thoughts on this...

[kobra]

I am pretty terrible at coding, but see if you have an onclick statement similar to

<img id="myimage" onclick="changeimage()" 
border="0" src="newimage.gif" 
width="100" height="180" />

BTW; are you using css, dhtml, js or what for these functionl?

[seethrou]

@ theodin

In the archive there is a topic about the mod of CSS Buttons. Although its for previous version of Zen Cart, think that it will give you more basic informations about the CSS Buttons.

Continue Shopping and Checkout buttons css style?

.

[theodin]

Hi Seethru / Kobra, I was away in these last days and havent had a chance to get back to it until now.

so - from this code example on the link you provided seethru, i see the following:
<div class="buttonRow forward"><a href="http://192.168.1.14/shop/index.php?main_page=checkout_shipping"><span class="cssButton button_checkout" onmouseover="this.className='cssButtonHover button_checkout button_checkoutHover'" onmouseout="this.className='cssButton button_checkout'" style="width: 80px;" >&nbsp;Checkout&nbsp;</span></a></div>

<div class="buttonRow back"><a href="http://192.168.1.14/shop/index.php?main_page=product_info&amp;products_id=3&amp;number_of_uploads=0"><spa n class="cssButton button_continue_shopping" onmouseover="this.className='cssButtonHover button_continue_shopping button_continue_shoppingHover'" onmouseout="this.className='cssButton button_continue_shopping'" style="width: 97px;" >&nbsp;Continue shopping&nbsp;</span></a></div>

My understanding is now that raw css is being supplemented/effected/decided by client script calls, (onmouseout, for example, sets the css class this.className='cssButton button_continue_shopping'). I stress again, I'm not a seasoned CSS programmer, however, it looks like these then force what classes the browser ends up selecting from the CSS to render. I guess, the client script call "onmouseout" changes the CSS qualification/event/thing is then set manually.

So, I think the next things Im gonna try, are is to modify the html_output to see if I can prevent these client script calls (assuming they are there), in order to make them not specify these, or to specify a 'onlostselection' or something (which i hope to find later) to also force a class change when something is clicked. I'll keep you posted how I go.

@ Kobra
The link at in my first post should take you to another site explaining the principle I'm trying to do. in summary, the idea is that you have a gif with three visual button states in it, one = normal, one = hover, one = selected. Using px measurements, you specify in the CSS to use the part of the normal gif as your background for your button. The css is triggered when you hover your mouse. The css code says then to use a different area of the same gif, ie one just a little lower. For background buttons this is a much faster way instead of the browser having to make another call to the web server to change the background image. Sometimes there is inherent delay in this.

My whole problem so far is that when the button is clicked (and we are waiting for the next page to load) the background disappears altogether. Both the onmouseover and onmouseout seem to be completely ignored. There is no CSS class forced by script events, to cope with the "selected" look. I guessed first that i wasnt putting the right thing into my css...

I hope this is useful!!

[theodin]

If anyone is following this thread, I've learned a couple more things in my last experimenting.

In Zen, the buttons are defined with INPUTS's, not on the ANCHOR element. I suspect this is by design, as (also learned by trial and error, and subsequent searching) IE applies :hover ONLY to anchor elements. So, while Zen doesnt use Anchor elements for the buttons, the way Zen was already doing it is the only way.

Problem still remained. Whenever my buttons recieved focus, my background images would disappear and they would go to some plain background colour from the original template. Then I thought, that colour must have come from somewhere.... as these are INPUT elements, not ANCHORS I had been looking in the wrong places and assuming things all along.

The answer is that there was an overriding statement in stylesheet.css:

input:focus, select:focus, textarea:focus {
background: #F0F8FF;
}

GRRRR! But an answer. I took this out, and my buttony backgrounds dont disappear. YAY. I will finish messing and post my final code here.

[theodin]

SO everything is working. my css buttons code is now:

/* css buttons */
.cssButton, .cssButtonHover, .cssButtonDown {
color: #000000;
display: block;
border: none;
width: 20em;
background-color: transparent;
background-image: url(includes/templates/st/buttons/buttonbackground.gif);
background-repeat: repeat-x;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 1.1em;
font-weight: bold;
text-align: center;
text-decoration: none;
white-space: nowrap;
padding: 0.3em;
}

.cssButtonHover {
text-decoration: none;
background-position: 0 -36px;
color: #FF7200;
}

.cssButtonDown {
text-decoration: none;
background-position: 0 -72px;
color: #5f5f5f;
}

The mousedown is implemented by an (unnecessary) mod to \includes\functions\HTML_OUTPUT.PHP

Add a new line after 315 and put this in it:
$mouse_down_class = 'cssButtonDown' . $sec_class . $sec_class . 'Down';

Line 319 (previously 318) needs to become:
$css_button_js .= 'onmouseover="this.className=\''. $mouse_over_class . '\'" onmouseout="this.className=\'' . $mouse_out_class . '\'" onmousedown="this.className=\'' . $mouse_down_class . '\'" ';

When used with the GIF at the beginning of this post, the button immediately turns grey when it is clicked. This is completley unnecessary, but I like this as it provides immediate feedback.


Except now i have a problem in IE. No button backgrounds work at all. I'll post when I've fixed it.