modifying the checkout look/feel

[Perfect Eye]

Hi there,

I am currently modifying the look/feel of a clients website for Actinic v.7 - we have changed the majority of templates so it looks very nice and professional. There are a couple of problems i just cant solve which i need a solution for. Can anyone comment on the following issues:

1) I want to make the checkout buttons images instead of text links
2) changing the style sheet of the "class of service delivery" dropdown
3) editing the look/feel of any error message output on checkout pages

If anyone can help with these 3 issues that'd be awesome. Thanks a lot.

[Perfect Eye]

Or if anyone can shed light on just 1 of the issues, if they dont know the solution to all 3 - these things were easily done in a site we did in v.6 but it seems that v.7 is a bit different so clarification or a point in the right direction would help greatly. We could probably pick it up easily when we're looking at the right files.

[wjcampbe]

Can you clarify

1) are you talking about the top navigation link 'checkout' on all pages or the options in the shopping cart?
2) there is only one stylesheet in actinic unless you have added a second (its called actinic.css) - without knowing what you want to do its difficult to answer.
3) again - without knowing what you want to do, it's hard to advise you where you should do it.

Have you used the forum search to see if what you want has already been asked?

[Kermy]

1) If you're talking about the links while checking out, the answer is on page 29 of the Advanced User Guide.

2) The template for the shipping options is Act_ShippingSelectTemplate.htm, found in Advanced > Template Manager > Ordering > Adv. Shipping (I'm guessing thats what you meant).

3) The code which builds the error message box is in Design > Text. The opening table code is at ID 2178, the closing code block at ID 2180.

Hope that helps

[pinbrook]

I think for number 2 you just need to add

input,textarea,select
{
font-family: Verdana, Arial, "MS Sans Serif";
font-size: xx-small;

to the style sheet

[Perfect Eye]

Hey Kermy, thanks for the page ref. in the user guide - that is what i was referring too. I have since been working on that area (changing links in checkout to buttons).

I've also taken a look at the stylesheet to try and make the text look different in the drop down menu i mentioned.

As far as the error text goes -

"The code which builds the error message box is in Design > Text. The opening table code is at ID 2178, the closing code block at ID 2180."

I know how to find the text and change what it says but i want to actually be able to change the size/colour of the output of the error message's in the checkout on the screen. I can change the wording but not format its look. Does anyone know where to go to do this?

Thanks a lot for your feedback so far.

[Perfect Eye]

I think for number 2 you just need to add

input,textarea,select
{
font-family: Verdana, Arial, "MS Sans Serif";
font-size: xx-small;

to the style sheet

I've given this a try but the appearance of the text in the drop down menu for the "class of service" in the checkout page remains the same. Any other alternative solutions?

We've cracked the 1st query - just 2 and 3 are still causing us trouble to solve.

[Kermy]

I can change the wording but not format its look

All I did was go to Design > Text, and wrap the error text inside a <div>...</div> and apply a class to it.

I checked the template I mentioned and realised the <SELECT> field is generated seperately, I think from ID 1204. Try applying a class directly to this, although just setting the styles to all select boxes should work too (double check your syntax, I noticed a missing } in the quoted text!)

[Perfect Eye]

We managed to change the drop down menu appearance by going into the Pearl files and adding classes to them in there. This will probably work for the error messages too.