Customizing my attribute's box !

[alhakeem2001]

I need help to set up the lay out of my attribute's box for my products as it shows in the attached image, I know where and how to upload the attribute's image but I'm not quite good with css files ! Can anybody advice me how to do that ?

[Ajeh]

If you edit the Option Name in the Catalog ... Option Name Manager ... and have the settings on:

Rows: 1 Display Size: 32 Maximum length: 32

Attribute Images per Row: 1 Attribute Style for Radio Buttons/Checkbox: 1

does this accomplish what you are looking for?

[alhakeem2001]

If you edit the Option Name in the Catalog ... Option Name Manager ... and have the settings on:


does this accomplish what you are looking for?

No Ajeh, It's default by me 32 X 32 ! It should be in the css file of the template_default folder , I'm sure about it but I don't know how to set it as want!

[Ajeh]

Weird ... I set 1 per Row with Style 1 and my pictures look like yours ...

[alhakeem2001]

This is what I came with so far although I still prefer the layout to be like first image on my first thread, wider raws and the green buttons at left side of the attribute's name, the other thing the green button of the Quantity Discounts Available is for some reason on the right side of the attribute box, how to get it back to left side of phrase Quantity Discounts Available ?

In general : I want to have a <br> after Stuffing and Components

[alhakeem2001]

and also I would like to have the Quantity Discounts Available in red color ! where to do that ? in the default_template's css or my template's css file ?

[Ajeh]

In general : I want to have a <br> after Stuffing and Components

I am not positive if this is correct as I am not good with css stuff ...

I added:

.back {
    float: left;
clear:both;
    }

in the stylesheet.css ... see if that does it for you ...

NOTE: these changes are always made in your templates and overrides files never in the default files ...

[alhakeem2001]

I am not positive if this is correct as I am not good with css stuff ...

I added:

.back {
    float: left;
clear:both;
    }

in the stylesheet.css ... see if that does it for you ...

NOTE: these changes are always made in your templates and overrides files never in the default files ...

We are almost close to what I want ! except a few adjustments as it shows in the attachment ! I still believe that the Quantity Discounts Availableshould be in red or in other color ! Thanks Ajeh for your help

[Ajeh]

The better way to do this is to add these to your stylesheet:

.back2 {
clear:both;
    }

a.wrapperAttribsQtyPrices {
  color: #FF0000;
}

Then, using your templates and overrides, copy the file:
tpl_modules_attributes.php

to your templates and overrides directory:
/includes/templates/your_template_dir/templates/tpl_modules_attributes.php

Then change the code to include the code in RED:

<h4 class="optionName back2"><?php echo $options_name[$i]; ?></h4>
<div class="back2"><?php echo "\n" . $options_menu[$i]; ?></div>

    <div class="wrapperAttribsQtyPrices"><?php echo zen_image(DIR_WS_TEMPLATE_ICONS . 'icon_status_green.gif', TEXT_ATTRIBUTES_QTY_PRICE_HELP_LINK, 10, 10) . '&nbsp;' . '<a class="wrapperAttribsQtyPrices" href="javascript:popupWindowPrice(\'' . zen_href_link(FILENAME_POPUP_ATTRIBUTES_QTY_PRICES, 'products_id=' . $_GET['products_id'] . '&products_tax_class_id=' . $products_tax_class_id) . '\')">' . TEXT_ATTRIBUTES_QTY_PRICE_HELP_LINK . '</a>'; ?></div>

This way, you do not change the settings for other things with these changes ...

[alhakeem2001]

The better way to do this is to add these to your stylesheet:

.back2 {
clear:both;
    }

a.wrapperAttribsQtyPrices {
  color: #FF0000;
}

Then, using your templates and overrides, copy the file:
tpl_modules_attributes.php

to your templates and overrides directory:
/includes/templates/your_template_dir/templates/tpl_modules_attributes.php

Then change the code to include the code in RED:

<h4 class="optionName back2"><?php echo $options_name[$i]; ?></h4>
<div class="back2"><?php echo "\n" . $options_menu[$i]; ?></div>

    <div class="wrapperAttribsQtyPrices"><?php echo zen_image(DIR_WS_TEMPLATE_ICONS . 'icon_status_green.gif', TEXT_ATTRIBUTES_QTY_PRICE_HELP_LINK, 10, 10) . '##' . '<a class="wrapperAttribsQtyPrices" href="javascript:popupWindowPrice(\'' . zen_href_link(FILENAME_POPUP_ATTRIBUTES_QTY_PRICES, 'products_id=' . $_GET['products_id'] . '&products_tax_class_id=' . $products_tax_class_id) . '\')">' . TEXT_ATTRIBUTES_QTY_PRICE_HELP_LINK . '</a>'; ?></div>

This way, you do not change the settings for other things with these changes ...

I'm sorry Ajeh, I didn't understand what you mean ! the first line of code it doesn't exist on my tpl_modules_attributes.php file :
<h4 class="optionName back2"><?php echo $options_name[$i]; ?></h4>
<div class="back2"><?php echo "\n" . $options_menu[$i]; ?></div>

The other line of the code exist up to

<div class="wrapperAttribsQtyPrices"><?php echo zen_image(DIR_WS_TEMPLATE_ICONS . 'icon_status_green.gif', TEXT_ATTRIBUTES_QTY_PRICE_HELP_LINK, 10, 10) ........... the rest is deferent !!

One more thing, That my sound stupid! Do you want me to copy the tpl_modules_attributes.php file from the default_template and overwrite the one on my template ? are they not equal ?

I'm sorry to bother you again, I just need to clarify those things ! Thnaks