Jump to content

Setting different CSS for each shop of a multistore site


Recommended Posts

Hello, 
I'm working on a multistore PS (version 1.5.6.2)

I'd need to have the same theme (already installed) for all the stores but they must have different css combinations. Any suggestion on how to proceed?
Is it possible to assign a different css (eg: override-global-1.css, override-global-2.cc, etc...) to each  of them?

I've tried to search the forum for an answer but I could not find anything.

Thanks in advance.

Edited by eFrancesco (see edit history)
Link to comment
Share on other sites

Hello,

 

Try this solution :

It works only if you have different  shop name for each shop

You can do this by going to ( Preferences > Stores Contacts ), select  each shop and change the "Shop name" in the Contact details.

 

For example you get 2 shops names : Shop A , Shop B

 

Now go to your theme folder and open the header.tpl and find this line :

 

         <body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if isset($page_name)}{$page_name|escape:'htmlall':'UTF-8'}{/if}{if $hide_left_column} hide-left-column{/if}{if $hide_right_column} hide-right-column{/if}{if $content_only} content_only{/if}">

 

 

And add this : {$shop_css=preg_replace('/\s+/', '_', $shop_name)} {$shop_css|escape:'htmlall':'UTF-8'} 

in the beginning of class dont forget to add a space!

 

Now it must looks like this : 

 

         <body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class=" {$shop_css=preg_replace('/\s+/', '_', $shop_name)} {$shop_css|escape:'htmlall':'UTF-8'} {if isset($page_name)}{$page_name|escape:'htmlall':'UTF-8'}{/if}{if $hide_left_column} hide-left-column{/if}{if $hide_right_column} hide-right-column{/if}{if $content_only} content_only{/if}">
 
If you load the Shop A : you will see a class="Shop_A"
 
If you load the Shop B : you will see a class="Shop_B"
 
Now if you want to assign only a style for the Shop A : (example to the header)
Open your global.css and add : Begin with the class Shop_A or Shop_B to assign the desired shop
.Shop_A  #header {
       width : 900px;
       background-color : #F00
}
 
Now it changes the header width and color for only the Shop A but not the shop B.
 
Best :-)
xlynx 
Edited by xlynx (see edit history)
  • Like 3
Link to comment
Share on other sites

  • 1 month later...
Thanks guys, 
actually I've followed connectcase's suggested solution. For some reason I've not received a notification for the previous reply so I thought the topic wasn't answered yet... (Sorry Xlynx!! And thanks for your suggestion too)
bye

F
Link to comment
Share on other sites

  • 6 months later...
  • 2 months later...
  • 2 months later...
×
×
  • Create New...