How to create an attributes box?

[janemeechan]

Hi, im new to the forum and also new to Zen. Can anyone tell me how to create an attributes box like the one on this site:

http://www.giftsncertificates.com/in...&products_id=7

Any help in laymans terms very appreciated.

Jane

[janemeechan]

Obviously this forum isnt as good as its claiming to be! Dont matter i will find out from elsewhere!

[Ajeh]

Sometimes, if you do not get an answer ... it helps if you add on to your original thread and it will help people to see that you question has been overlooked or missed ... it also raises the question to the top so that if it did get missed, the volunteers on our Free Forum will see it and be able to help you ...


You would go to the Option Names Manager and make Option Names ...

Name
Type: TEXT
Sort Order: 10

Date of Birth: (day)
Type: Dropdown
Sort Order: 20

Date of Birth: (month)
Type: Dropdown
Sort Order: 30

Date of Birth: (year)
Type: TEXT
Sort Order: 40

Database
Type: Dropdown
Sort Order: 50

Format(s)
Type: Checkbox
Sort Order: 60


Then go to the Option Values Manager ...

Option Name: Date of Birth: (day)
Option Value: Select Day
Sort Order: 0

Option Name: Date of Birth: (day)
Option Value: 1
Sort Order: 1

Option Name: Date of Birth: (day)
Option Value: 2
Sort Order: 2

Option Name: Date of Birth: (day)
Option Value: 3
Sort Order: 3

Repeat to 31

Option Name: Date of Birth: (month)
Option Value: Select Month
Sort Order: 0

Option Name: Date of Birth: (month)
Option Value: January
Sort Order: 1

Option Name: Date of Birth: (month)
Option Value: February
Sort Order: 2

Repeat to December

Option Name: Database
Option Value: Select Country
Sort Order: 0

Option Name: Database
Option Value: England
Sort Order: 1

Repeat for all countries


Option Name: Format(s):
Option Value: Email
Sort Order: 10

Option Name: Format(s):
Option Value: CD
Sort Order: 20

Option Name: Format(s):
Option Value: Printed
Sort Order: 20

Go to the Attributes Controller ...

Find your Category ...

Find Your Product ...

Now build the Attributes from the Option Names and Option Values ...

Add their prices (if any) ...

On the Option Values for:
Select something

Set as:
Default YES
Display Only YES

You can find more information on Attributes, Option Names and Option Values in the Tutorials ...

[janemeechan]

Hi Linda Sorry its the box which the attributes are inside im trying to work out how to create. I dont know how to create it or get the product attributes inside the box the way it is in that site.

Thanks

jane

[Ajeh]

I am not sure what you mean by "the box which the attributes are inside" ...

Do you mean the TEXT box such as for the Name?

If you go to your Catalog ... Option Name Manager ... what do you see in the dropdown where it reads:
en: Order: (dropdown here) INSERT BUTTON

[janemeechan]

No on that website all the personalisation options are all neatly surrounded by a square box. Im trying to work out how to create that box so that i can place all my options inside it.

janet

[gjh42]

That is an extremely simple CSS issue. The site you refer to uses this rule in its stylesheet.css:

#productAttributes {
    border: 1px solid #BFBFBF;
    float: left;
    margin: 5px 0 0 10px;
    padding-left: 5px;
    width: 100%;
}

Your attributes already have a "container" named #productAttributes; you just need to tell it how to be styled.

[janemeechan]

That is an extremely simple CSS issue. The site you refer to uses this rule in its stylesheet.css:

#productAttributes {
    border: 1px solid #BFBFBF;
    float: left;
    margin: 5px 0 0 10px;
    padding-left: 5px;
    width: 100%;
}

Your attributes already have a "container" named #productAttributes; you just need to tell it how to be styled.

Ok you have lost me lol. If i already have it how do i activate it if thats the right word.

jane

[gjh42]

If you are going to customize a website, you need to know something about CSS (www.w3schools.com is a good resource). Also look at the tutorials for template customizing advice.
You "activate" the box by adding a rule in /includes/templates/your_template/css/stylesheet.css. Search for #productAttributes. If it is not there, just add a new rule like the one I posted, probably at the bottom of the file to keep things organized. If it is there, add a border declaration like the one in red above.