Attribute Text Font Changes

[Esther]

Hello
For my first post, I would like help in changing the font family and size in the attribute drop down list.
I followed the instructions in a previous thread posted by Simon Bridges back in March but have not had success. Can anyone help me with this? I am confident changing the templates and using html (I have already altered and saved Act_VariantHeader.html) but I have never worked with css before - I don't know how style sheets work - so would require precise instructions if anyone is patient enough. I know that I am editing the correct actinic.css. I suspect it matters where in the css I put the
.myclass, but hopefully someone out there can put me right.
Thank you

[Krithika]

Hi Esther

Welcome to the forum. To define your own font class in the CSS file, please follow these steps :

1. In actinic.css, copy one of the existing font classes block, i.e, starting from
.actsmaller
{
font-size: smaller;
color:NETQUOTEVAR:FGCOLORCSS;
}
and paste into an empty line.

2. Change .actsmaller to read .myclass, for example.

3. Replace smaller with a size of your choice, i.e, 10px, 12px, etc

4. Insert a new line after the size as font-family:xyz, where xyz is to be replaced by the font of your choice

5. Finally if you wish to change the color, please remember to use hexadecimal codes, for e.g, #59000F instead of NETQUOTEVAR:FGCOLORCSS

N.B, all individual lines, except the class name should be terminated with a semi-colon (; ).

Once this is done, save the CSS, and use the font class in Act_VariantListHeader.html, as
<SELECT CLASS="myclass" NAME="NETQUOTEVAR:ATTRIBUTEREF">

Save changes and you should now see the drop-down list in a font of your choice.

Hope this helps.

[Esther]

Still not working

Thank you Krithika, I followed your instructions, but it's still not working. Have you any idea what I am doing wrong or what might be happening to prevent my changes happening?
Cheers
Esther

[fergusw]

Hi Esther,
Do you have a link or web site address that shows a page with the drop down in question. That would help the forum members see your problem 'live' and assist with getting a solution to you.

[Esther]

Thanks Fergus
I attatch a screen grab as my site isn't online yet. It seems that the font is very nearly the same but it isn't quite. I want the text in the drop down to be the same as "Which one would you like?"
That is verdana, arial, helvetica, sans-serif size 2
Thanks for any help you can give

[fergusw]

Hi Esther,
You can try the following:

1. Find and edit your Act_VariantListChoice.html in your site1 folder e.g. in Notepad
2. Amend the HTML to include a CSS style class for the drop down choices

<!-- VariantListChoice HTML begin -->
<!-- This template is used for a product variant list box choice. -->

<OPTION VALUE=NETQUOTEVAR:CHOICESELVALUE NETQUOTEVAR:ITEMSELECTED class="dropdown">NETQUOTEVAR:CHOICENAME

<!-- This template is used for a product variant list box choice. -->
<!-- VariantListChoice HTML end -->

Note the class="dropdown" in the <option> tag

3. In actinic.css file add the styles that you require

.dropdown{
font-family: times new roman;
color:#F00;
}

Please note that this should work in most browsers. I think, however, Firefox may hande the selected option differently than those in the drop down area. You would have to check that though.

[Esther]

Thanks Fergus
Does it matter where in my css file I put it? Might there be something else in my css that is over-riding the command? Because it has made no difference! I think I'll jst have to be satidfied with what I've got.

[fergusw]

Hi Esther,

Can you also amend Act_VariantListHeader.html

e.g.

<!-- VariantListHeader HTML begin -->
<!-- This template is used for a product variant list box header. -->

<SELECT NAME="NETQUOTEVAR:ATTRIBUTEREF" class="dropdown">

<!-- This template is used for a product variant list box header. -->
<!-- VariantListHeader HTML end -->

Perhaps your earlier CSS attempt is overriding the last change you made.

If this is still not working then there may be another issue like your actinic.css not updating in preview or something.

I have tested the above 2 amendments and they do work on a test site.

Untill you can publish to a test area for example, it will be difficult for anyone on the forum to identify what is causing this problem.

[Esther]

Thanks again
Still no joy!
I can't upload to the web because I have an existing site and I'm working on the relaunch. You've been really helpful and what I'll do is get back to you once the site is live so you can check it out.
Really appreciate it.
Cheers
Esther

[fergusw]

Hi Esther,

If you are using actinic V7 then I would recommend you switch actinic into test mode. This allows you to upload your website to a sub-folder on your website without impacting on your current live site.

e.g. your current web site address
http://www.domainname.co.uk/acatalog/

in test mode it would be

http://www.domainname.co.uk/acatalog/test/acatalog/

Also the script ID is prefixed witha 9 to ensure no cross-over with active cgi scripts.

FYI: In V7 to switch to test mode you go to "Web | Switch to Test Mode" and update as normal.

[Esther]

Hi Fergus
Thanks for telling me about that - I didn't realise there was a test mode - I'm used to workign with V3
Something wierd has happened to the images in the upload but you can see the drop downs at

http://www.thespicebazaar.com/acatal...og/spices.html

Cheers

[fergusw]

Hi Esther,

Staight away I can see you problem.
The CSS in your HTML for the page you specified is

<LINK REL=STYLESHEET HREF="../../../../Documents%20and%20Settings/Owner/My%20Documents/Business/My%20Webs/New%20Website/actinic.css">

When it should be

<LINK REL=STYLESHEET HREF="http://www.thespicebazaar.com/acatalog/test/acatalog/actinic.css">

You will need to fix your Primary template so that the CSS assignment looks more like

<LINK REL=STYLESHEET HREF="actinic.css">

This should fix your problem.

This will be whyyour preview would most likely not be working either as actinic amends the links to include the "/previewHTML/" in the paths.

[Esther]

Bingo!
I can't thnk you enough Fergus.
It would have taken me a while to have come across that.
You have really made my day.
All the best
Esther