Printable View
Hey gjh42 (or anyone else)...
Can you think of an implementation of the Flexible Attributes system that would allow me to have clickable images instead of radio buttons?
For instance, I would want the four smilies below to be clickable radio buttons to choose different product colors, and not have the actual radio button itself be displayed (unless entirely necessary).
These would be my four selectable image radio buttons:
:smile: :cool: :blink: :blush:
Thanks!
Quote:
Originally Posted by hockey2112
I've gotten it pretty close to where I want it, but I am stuck on one last thing... how can I eliminate the text of the label, while allowing the background of the label to remain? I tried "font-size: 0", but that didn't work on all browsers.
http://tinyurl.com/87bxoxe
Thanks!
I like your solution of expanding the padding of the labels and giving them background images.
Since you do want the label text, only differently arranged, try substituting these two rules for the versions you have now in stylesheet_flexible_attributes.css:I think you will be able to get all of that set of attribute labels and inputs arranged as desired with the right style tweaking.Code:/*current*/#attrib-27-45 + label {
background: url("/includes/templates/kickstart/images/createprogram-4-sm.gif") no-repeat scroll 0 0 transparent;
bottom: 28px;
left: 160px;
padding: 70px 17px;
position: relative;
}
#attrib-27-45 {
left: 185px;
position: relative;
top: 28px;
z-index: 1000000;
}
/*trial*/
#attrib-27-45+label {
background: url("/includes/templates/kickstart/images/createprogram-4-sm.gif") no-repeat scroll 0 0 transparent;
padding: 110px 43px 10px 27px;
color: #0f8800;
width: 80px;
height: 30px;
position: relative;
top: -95px;
left: 160px;
display: inline-block;
}
#attrib-27-45 {
left: 185px;
position: relative;
top: -100px;
z-index: 1000000;
}
Quote:
Originally Posted by gjh42
Almost there! My one remaining issue is a ton of space just underneath the radio buttons, above the rest of the attributes. Any ideas on how I can fix that issue?
Also, I was wondering if it might be possible to change the background image of the radio button to the darker version of the image when the button is selected, and have that image remain unless a different button is selected. Thoughts on that?
Thanks again for your help!
Try this:
#wAttrib-27 .attribsOptions>.back {height: 70px;}
Highlighting the label for a selected input may not be possible, but if it is, it will take some research. I'll see if I can dig up anything, as it is of interest to me to find out.
Looks like that did the trick!! :clap:Quote:
Originally Posted by gjh42
Black Belt,
I have these css rules in my stylesheet:
Which works but the two boxes are not exactly even. You can see what I am talking about here: http://www.framesforlife.com/copy-ex...example-1-p-11 For Some reason the fraction boxes are a little higher than the width and height boxes.Code:/*My Entries*/
#wAttrib-4 {clear: left;} /*Artwork Size Text Box. This starts on a new line*/
#wAttrib-1 {clear: left; float: left;}/*Select Width Drop-down*/
#wAttrib-2 {clear: left; float: left;}/*Select Height Drop-down*/
#wAttrib-3 label, #wAttrib-5 label {display: none;} /*hide fraction text*/
This might be asking a lot but is it possible to have the inch symbol (") just barely to the right of both fraction boxes? This would show that these measurements are in inches. As of now I call theses Width Fractions and Height Fractions. I don't want to change what they are called overall, just what they are called on this page (so as not to confuse my visitors). Width fractions and height fractions are a little wordy.
When I used your recommendation of:it put the text all the way to the right instead of right next to the attribute box which is where I was hoping to place it. If I could get the text barely to the right of the box I could call these: " Wide and " High which would work for the fractions.Code:#wAttrib-5 h4.optionName {float: right;} /*text to right of input*/
For the alignment, find this
stylesheet.css (line 277)
.wrapperAttribsOptions {
margin: 0.3em 0;
}
Change to
margin: 0 0 0.6em;
which puts all the margin at the bottom.
These rules will keep the fraction text from moving too far to the right. Change the text from Width Fraction to " and adjust the measurements as required.
#wAttrib-3 , #wAttrib-5 {width: 24em;} /*limit float-right distance*/
#wAttrib-3 h4, #wAttrib-5 h4 {float: right;} /*move fraction text*/
For the alignment, find this
stylesheet.css (line 277)
.wrapperAttribsOptions {
margin: 0.3em 0;
}
Change to
margin: 0 0 0.6em;
which puts all the margin at the bottom.
These rules will keep the fraction text from moving too far to the right. Change the text from Width Fraction to " Wide and adjust the measurements as required.
#wAttrib-3 , #wAttrib-5 {width: 24em;} /*limit float-right distance*/
#wAttrib-3 h4, #wAttrib-5 h4 {float: right;} /*move fraction text*/
Thank you black belt. I decided just to remove the text after much playing and now both are lined up properly.
This is what I have for my product page:
You can see it in action here: http://www.framesforlife.com/copy-ex...example-1-p-11Code:#wAttrib-4 {clear: left;} /*Artwork Size Text Box. This starts on a new line*/
#wAttrib-1 {clear: left; float: left;}/*Select Width Drop-down*/
#wAttrib-2 {clear: left; float: left;}/*Select Height Drop-down*/
#wAttrib-3 label, #wAttrib-5 label {float: left; display: none;} /*hide fraction text*/
Now, is it possible to apply this look to the shopping cart page and the orders area as well?
The 3 attribute is called: Width Fraction and the 5 attribute is called: Height Fraction, that's why I wanted to hide these from the product page.
As of now the cart page and order confirmation page looks like this:
I am assuming the order e-mail will do the same. (I don't care about the internal order area that we look at). Can I apply these attributes in my stylesheet_flexible_attributes.css across the whole system?Code:Frame Example 3"
Frame Width - 13
Width Fraction - 5/16
Frame Height - 18
Height Fraction - 11/16