Page 1 of 2
Different backgrounds per category
Posted: Tue Jun 07, 2011 3:02 pm
by Pobb
I've read various threads and I've partially got it working. On the 'resort wear' and 'accessories' categories (and their respective child pages) I want to have a different colour background that the rest of the site so I've referenced a different stylesheet (I dont really follow whats happening in the following code, I just kinda copied it
):
Code: Select all
<?php
$isHTTPS = (isset($_SERVER["HTTPS"]) && $_SERVER["HTTPS"] == "on");
$port = (isset($_SERVER["SERVER_PORT"]) && ((!$isHTTPS && $_SERVER["SERVER_PORT"] != "80") || ($isHTTPS && $_SERVER["SERVER_PORT"] != "443")));
$port = ($port) ? ':'.$_SERVER["SERVER_PORT"] : '';
$url = ($isHTTPS ? 'https://' : 'http://').$_SERVER["SERVER_NAME"].$port.$_SERVER["REQUEST_URI"];
$pagearray = explode("/", $url);
$pagename = end($pagearray);
$pagearray2 = explode("/", $url);
$pagename2 = end($pagearray2);
$pagename2 = prev($pagearray2);
?>
<?php
if ($pagename == 'resort-wear' || $pagename2 == "resort-wear") { ?>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $template; ?>/stylesheet/resort-access.css" />
<?php
} elseif ($pagename == 'accessories' || $pagename2 == "accessories") { ?>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $template; ?>/stylesheet/resort-access.css" />
<?php
} else { ?>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $template; ?>/stylesheet/stylesheet.css" />
<?php } ?>
That worked but as soon as I gave one of the products in 'resort wear' an SEO Keyword the product page reverts to the original stylesheet. What am I doing wrong?
Re: Different backgrounds per category
Posted: Tue Jun 07, 2011 10:35 pm
by myshadowself
Untested - Couldn't you use a
switch statement in header.tpl to decide which stylesheet you use?
Like so:
Code: Select all
<?php
/*eg: 123=resort wear, 456=accessories*/
switch($category_id){
case "123":
echo '<link rel="stylesheet" type="text/css" href="catalog/view/theme/'.$template.'/stylesheet/123-stylesheet.css" />';
break;
case "456":
echo '<link rel="stylesheet" type="text/css" href="catalog/view/theme/'.$template.'/stylesheet/456-stylesheet.css" />';
break;
default:
echo '<link rel="stylesheet" type="text/css" href="catalog/view/theme/'.$template.'/stylesheet/stylesheet.css" />';
break;
}
?>
Or you could modify it to only echo out a specific bit of style if you coded it below the stylesheet call. Something like:
Code: Select all
<?php
/*eg: 123=resort wear, 456=accessories*/
switch($category_id){
case "123":
echo '<style>html,body{background:blue;}</style>';
break;
case "456":
echo '<style>html,body{background:green;}</style>';
break;
}
?>
Although this would require hardcoding the affected parent and child categories.
Hope it helps
Re: Different backgrounds per category
Posted: Wed Jun 08, 2011 3:27 am
by Pobb
I've literally no idea what any of that means but I'll certainly have a tinker, many thanks for the reply
Re: Different backgrounds per category
Posted: Wed Jun 08, 2011 4:39 am
by myshadowself
lol, fair enough. I am a coder by day and by night, sometimes I forget how to communicate with humans
Basically, decide whether you want a full stylesheet per category, or just change the background.
For a full stylesheet:
in header.tpl FIND:
Code: Select all
<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $template; ?>/stylesheet/stylesheet.css" />
REPLACE with the first of the above bits of code...
For just the background:
in header.tpl FIND
Code: Select all
<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $template; ?>/stylesheet/stylesheet.css" />
ADD the second of the above bits of code directly below
Then change the numbers with the ID of the category you want to affect.
Re: Different backgrounds per category
Posted: Wed Jun 08, 2011 1:28 pm
by Pobb
Thanks for the explanation, makes perfect sense. Unfortunately it doesn't really work - primarily because I'm using SEO URL's. Additionally it only changes the parent pages not the sub pages or product pages. Any other ideas?!
Re: Different backgrounds per category
Posted: Wed Jun 08, 2011 9:29 pm
by Johnathan
For a solution that involves no coding, I've created a Dynamic Styling extension that does exactly this. You can take a look at it here:
Dynamic Styling
Re: Different backgrounds per category
Posted: Wed Jun 08, 2011 11:36 pm
by Pobb
thats pretty cool but it won't really work for me because I need to change various font colours too. I'm sure loads of others will find this useful though
Incidentally, the original way I had of changing the background is now working - I didnt change anything (not on purpose anyway!) and now its doing what I want. Utterly weird but I dont really care!
Re: Different backgrounds per category
Posted: Thu Jun 09, 2011 11:07 am
by Johnathan
You can add additional CSS to change font colors on each page, if you want.
Re: Different backgrounds per category
Posted: Tue Jan 03, 2012 10:05 am
by awaraleo
myshadowself wrote:Untested - Couldn't you use a
switch statement in header.tpl to decide which stylesheet you use?
Like so:
Code: Select all
<?php
/*eg: 123=resort wear, 456=accessories*/
switch($category_id){
case "123":
echo '<link rel="stylesheet" type="text/css" href="catalog/view/theme/'.$template.'/stylesheet/123-stylesheet.css" />';
break;
case "456":
echo '<link rel="stylesheet" type="text/css" href="catalog/view/theme/'.$template.'/stylesheet/456-stylesheet.css" />';
break;
default:
echo '<link rel="stylesheet" type="text/css" href="catalog/view/theme/'.$template.'/stylesheet/stylesheet.css" />';
break;
}
?>
Although this would require hardcoding the affected parent and child categories.
Hope it helps
Hi, I tried it but it says "undefined variable category_id". any idea about it?
Re: Different backgrounds per category
Posted: Wed Jan 04, 2012 2:19 am
by awaraleo
any body have idea about it?
Re: Different backgrounds per category
Posted: Wed Jan 04, 2012 6:16 am
by awaraleo
guys! please reply. don't be so mean.
Re: Different backgrounds per category
Posted: Thu Jan 05, 2012 2:30 am
by awaraleo
commonnnnnn !!!
Re: Different backgrounds per category
Posted: Thu Jan 05, 2012 8:08 am
by jty
awaraleo wrote:Hi, I tried it but it says "undefined variable category_id". any idea about it?
because you haven't defined "category_id" in your controller file - category.php
Looking at your other thread, what you're trying to achieve by cutting out categories and using products as categories instead is a very different approach which is going to make it difficult for you to get help.
Re: Different backgrounds per category
Posted: Thu Jan 05, 2012 10:10 pm
by Maio
i'm working this kind of function for my theme lately. i'll tell you how to make it after i fix some bug on it maybe couple days from now.
Re: Different backgrounds per category
Posted: Fri Jan 06, 2012 7:26 pm
by qahar
It should be easy to do.
I'm not test this yet, but should be work.
Open header.tpl and add code bellow after stylesheet.css
Code: Select all
<?php if (isset($this->request->get['category_id'])) { // check is Category page ?>
<?php if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/stylesheet/category-'.<?php echo $this->request->get['category_id']; ?>.'.css')) { // check if the spesific stylesheet is available. prevent 404 not found ?>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $this->config->get('config_template'); ?>/stylesheet/category-<?php echo $this->request->get['category_id']; ?>.css" />
<?php } ?>
<?php } ?>
You need to make
category-23.css assuming 23 is the Category Id. And put it on
stylesheet folder of curent active theme.
Since the category-23.css is loaded after stylesheet.css, you will able to override all aspect of stylesheet. Including but not limited to #header, #column_righr, #footer etc.
You can use the same technique for other page.
Product page use : $this->request->get['product_id']
Information page use : $this->request->get['information_id']
Or use it to certain page, based on route:
Code: Select all
<?php if (isset($this->request->get['route']) && $this->request->get['route'] == 'information/contact') { // check is Contact page ?>
<?php if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/stylesheet/style-contact.css')) { // check if the spesific stylesheet is available. prevent 404 not found ?>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $this->config->get('config_template'); ?>/stylesheet/style-contact.css" />
<?php } ?>
<?php } ?>
Re: Different backgrounds per category
Posted: Fri Feb 17, 2012 7:39 am
by taylordsmith
blackhalo wrote:qahar wrote:Open header.tpl and add code bellow after stylesheet.css
Code: Select all
<?php if (isset($this->request->get['category_id'])) { // check is Category page ?>
<?php if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/stylesheet/category-.css')) { // check if the spesific stylesheet is available. prevent 404 not found ?>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $this->config->get('config_template'); ?>/stylesheet/category-<?php echo $this->request->get['category_id']; ?>.css" />
<?php } ?>
<?php } ?>
This looks pretty simple, but it doesn't work...
it won't grab the category ID... so the CSS file never gets written to the header.
The second example works fine, I got my Contact page to change CSS files...
unfortunately, it's the Category/Product one that we need.
Anybody know why it won't capture the Category ID?
Has this been resolved? I'm running into the same problem.
I've found a few other methods of applying different stylesheets for each category, but they don't offer the same result promised in this solution (..if it worked). Here is a solution that attaches the stylesheet based on path:
http://forum.opencart.com/viewtopic.php?f=21&t=19317
I can get this to work, but only on the parent category page - it reverts to the main stylesheet once you go to a subcategory or product. Also, it applied the new style to my home..
Any advice on this would be most appreciated. Thanks for your time!
-Taylor
Re: Different backgrounds per category
Posted: Fri Feb 17, 2012 3:24 pm
by qahar
blackhalo wrote:This looks pretty simple, but it doesn't work...
it won't grab the category ID... so the CSS file never gets written to the header.
I forgot to put the category id on file_exists check. Fixed now!
Re: Different backgrounds per category
Posted: Mon Feb 20, 2012 1:08 pm
by taylordsmith
Yeah, I'm getting the same error. Thanks a lot for the responses though, qahar and blackhalo.
Any more ideas?
-Taylor
Re: Different backgrounds per category
Posted: Thu Feb 23, 2012 6:33 pm
by Pobb
Not sure if this will help and I can't remember exactly what I did because it was so long ago but I have this in my header.tpl and it works perfectly well.
Code: Select all
<?php
if ($category_id == '18') { ?>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $template; ?>/stylesheet/resort-access.css?version=8" />
<?php
} elseif ($category_id > '20') { ?>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $template; ?>/stylesheet/resort-access.css?version=8" />
<?php
} else { ?>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $template; ?>/stylesheet/stylesheet.css?version=8" />
<?php } ?>
Re: Different backgrounds per category
Posted: Fri Aug 03, 2012 10:51 pm
by alikhan99
How to continue the desired css for sub categories also?