Flexible Attributes addon support

[hockey2112]

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:



Thanks!

[hockey2112]

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:



Thanks!

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!

[gjh42]

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:

/*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;
	}

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.

[hockey2112]

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:

/*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;
	}

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.

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!

[gjh42]

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.

[hockey2112]

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

[sports guy]

Black Belt,

I have these css rules in my stylesheet:

/*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*/

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.

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:

#wAttrib-5 h4.optionName {float: right;} /*text to right of input*/

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.

[gjh42]

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*/

[gjh42]

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*/

[sports guy]

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:

#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*/

You can see it in action here: http://www.framesforlife.com/copy-ex...example-1-p-11

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:

Frame Example 3"

    Frame Width - 13
    Width Fraction - 5/16
    Frame Height - 18
    Height Fraction - 11/16

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?