Local skin modifications for certain pages - like two alternating skins in one


I didnt know how else to summarize what I want to achieve in a very short text in the title line.

Basically, we have jewellery “for her” and a small but growing selection “for him”. We work on a customized version of the “dark_whiteness” skin, quite successfully and with a lot of immensely helpful imput from the CS-Cart customer service team (many thanks, Dimitry!).

Now I want to have a “sub-site” for the “for him” pages, where certain items are being exchanged for “black” counterparts, i.e.

  • different logo (on black background)
  • generally black background

    All font colours (if not black already) would stay, but any white backgrounds for the top menu for example etc would have to switch.

    Now I can assume this could be done with an override CSS file attached to each of these pages I want to have shown in the black theme.

    Has anyone of you done this before - even for just one page?

    Let me know please.

    Many thanks in advance!

The addon would provide you an out of the box setup for the “structure” to do what you want to do (I.e. customized css). But it won’t do what you want. I would think Javascript woud be the way you want to go for doing run-time modification of class properties.

Right … where would I enter the javascript code for each page I want to appear differenly?

Find a ‘hook’ on the page you want and then put your Javascript in the “hooked” page.

See [url]http://www.ez-ms.com/docs/customizing_your_store.pdf[/url]

This might give you a better background.

I’ve been through this PDF before, thank you. Can you suggest me which command accesses the page logo and the overall page background colour please?

Sorry, if you can’t find where the logo and background classes are by using firebug or other tool, I’m not able to help you here. Too detaield and too site/skin specific. Suggest you contact with someone here on the forum to do the work for you.

I should be able to post something by end of next month (according to the plan in my head)…

another option is in top.tpl place an if statement that tests (my suggestion would be against breadcrumbs) to see if the page/category they are on is in your list of “for him” and if it is, load the css for him, otherwise load the css for her.

This could be achieved by selecting different templates for categories and products.

Thats a great idea, much appreciated! How would the if… then work? I have to read into html if clauses :wink:

don’t quote me on this, because without looking (at work right now) I don’t know if breadcrumbs is an array or not, but, let’s say your categories are setup like this:

For Her

- Rings

- Necklaces

- Diamonds

- Bracelets

For Him

- Rings

- Watches

- Bracelets

then you would do something like

{if in_array(“For Him”,$breadcrumbs)}

code for him.css


code for her.css