Change the colour and position of the text

Hi

On my website I have a product which is a wedding ring, this page can be seen here, http://www.1stopjewellery.co.uk/index.php?main_page=product_info&cPath=8_19&products_id=113

Is it possible to change the colour of the text Ring Size; and maybe Please Choose; also can I move the position of the text?

A step by step explanation would be appreciated as I am just finding my way around Zencart.

Thanks, David

These are styling issues, and can be addressed in /includes/templates/your_template/css/stylesheet.css.
Add to the bottom of the stylesheet```
h3#attribsOptionsText {color: #aabbcc;}

label.attribsInput {
color: #aa00cc;
position: relative;
bottom: 0.2em;
}

There are other selectors that will let you control other aspects of the output.

You will want to get Firefox and its Web Developer and Firebug extensions to let you find and test these things for yourself.

That was quick, thank you Glenn.

Got the colour changed but what about changing the position of the words, Please Choose; or changing the wording it self, were do I go to make those changes?
I have used the admin Developers Tool kit but I get lots of possible places were the wording, Please Choose; resides.
Ideally I would like it all on one line something like, Please enter your ring size;
Thanks, David

The one you're looking for is probably at line 15 in includes/languages/english/product_info.php

You can get them on the same line by floating the h3:```
h3#attribsOptionsText {
color: #ee0304;
float: left;
position: relative;
bottom: 0.05em;
}

You might be better off hiding the h3 and just changing the wording of the label. If you use attributes anywhere else, the customization for this product type may look odd elsewhere.

Thank you both for replying to my post.
I will play around with the suggestions and see what it looks like.
Glenn I know what you mean about altering the position of the text for this attribute and it looking a bit odd, so I may go with your suggestion, even if I don’t alter the position of things at lest I have learned something and hope it is of some use to other Zencart users.

Once again thank you for your help, David

Back again!!

My question is on the same subject of ring size and that is when a customer enters a ring size in lower case letters and you look at the order in admin the letters are very small and some letters in lower case could be mistaken for another, I and L being a good example, is there anyway that no matter what case letter was entered it always shows as upper case?

Thanks, David

There is a PHP function strtoupper() which will convert text to upper case.

You can also apply CSS to output, and use the property

text-transform: uppercase;

Ok you have lost me on that one Glenn,
Where do I put the code, text-transform: uppercase; and when in place will it force the letter entered by the customer to show as upper case or will it only show as upper case when I look at the order in admin?

Which in your opinion is the best way to implement this change, css or, PHP function strtoupper()
At present I only want this to work for the text box on the ring pages, which ever option is best I would appreciate a walk through, as was done for the colour and position.

Thank you for your time, David

To make the input box show uppercase, add to your stylesheet

input#attrib-1-0 {text-transform: uppercase;}

This will have no effect elsewhere, though. If the original problem is that letters are too hard to read, you might try increasing the display size of wherever it is that you want to read them. For that the Web Developer's Information > Display Element Information button will tell you what class/id to style. You could also apply the text-transform in that location.

The strtoupper() will actually make the text uppercase permanently, but you would have to get into the code in the product info page form to apply it.

Glenn you are a star;
The code for css, **input#attrib-1-0 {text-transform: uppercase;} **works like a dream, easy when you know how.
You have got me intrigued now as to what part of the code is telling the attribute where to apply the code, is it the #attrib-1-0 that points to the text box and does the -1-0 represent the text box?
If it’s long winded and difficult to explain I will just except that it’s done the job.

Thanks again, David

That particular attribute's input has an id of #attrib-1-0; it will have the same id in any product where it is used. Another attribute's input would have a different id.