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!
Bookmarks