Different backgrounds per category

Quote

Post by Pobb » Tue Jun 07, 2011 3:02 pm

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 ;D ):

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? ???
Pobb
Active Member
Posts
113
Joined
Tue May 31, 2011 2:35 pm
Top

Re: Different backgrounds per category

Quote

Post by myshadowself » Tue Jun 07, 2011 10:35 pm

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

Ronald Laughton is the worst referee in Rugby League

myshadowself
New member
Posts
22
Joined
Tue Jun 07, 2011 8:59 pm
Top

Re: Different backgrounds per category

Quote

Post by Pobb » Wed Jun 08, 2011 3:27 am

I've literally no idea what any of that means but I'll certainly have a tinker, many thanks for the reply :)
Pobb
Active Member
Posts
113
Joined
Tue May 31, 2011 2:35 pm
Top

Re: Different backgrounds per category

Quote

Post by myshadowself » Wed Jun 08, 2011 4:39 am

lol, fair enough. I am a coder by day and by night, sometimes I forget how to communicate with humans :laugh:

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.

Ronald Laughton is the worst referee in Rugby League

myshadowself
New member
Posts
22
Joined
Tue Jun 07, 2011 8:59 pm
Top

Re: Different backgrounds per category

Quote

Post by Pobb » Wed Jun 08, 2011 1:28 pm

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?!
Pobb
Active Member
Posts
113
Joined
Tue May 31, 2011 2:35 pm
Top

Re: Different backgrounds per category

Quote

Post by Johnathan » Wed Jun 08, 2011 9:29 pm

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

Image Image Image Image Image

User avatar
Johnathan
Administrator
Posts
9183
Joined
Fri Dec 18, 2009 3:08 am
Top

Re: Different backgrounds per category

Quote

Post by Pobb » Wed Jun 08, 2011 11:36 pm

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!
Pobb
Active Member
Posts
113
Joined
Tue May 31, 2011 2:35 pm
Top

Re: Different backgrounds per category

Quote

Post by Johnathan » Thu Jun 09, 2011 11:07 am

You can add additional CSS to change font colors on each page, if you want.

Image Image Image Image Image

User avatar
Johnathan
Administrator
Posts
9183
Joined
Fri Dec 18, 2009 3:08 am
Top

Re: Different backgrounds per category

Quote

Post by awaraleo » Tue Jan 03, 2012 10:05 am

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?
User avatar
awaraleo
Newbie
Posts
18
Joined
Wed Dec 21, 2011 9:19 am
Top

Re: Different backgrounds per category

Quote

Post by awaraleo » Wed Jan 04, 2012 2:19 am

any body have idea about it?
User avatar
awaraleo
Newbie
Posts
18
Joined
Wed Dec 21, 2011 9:19 am
Top

Re: Different backgrounds per category

Quote

Post by awaraleo » Wed Jan 04, 2012 6:16 am

guys! please reply. don't be so mean. :(
User avatar
awaraleo
Newbie
Posts
18
Joined
Wed Dec 21, 2011 9:19 am
Top

Re: Different backgrounds per category

Quote

Post by awaraleo » Thu Jan 05, 2012 2:30 am

commonnnnnn !!!
User avatar
awaraleo
Newbie
Posts
18
Joined
Wed Dec 21, 2011 9:19 am
Top

Re: Different backgrounds per category

Quote

Post by jty » Thu Jan 05, 2012 8:08 am

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.
jty
Active Member
Posts
1225
Joined
Sat Aug 30, 2008 8:19 am
Top

Re: Different backgrounds per category

Quote

Post by Maio » Thu Jan 05, 2012 10:10 pm

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.
Maio
New member
Posts
21
Joined
Wed Aug 04, 2010 8:35 am
Location - Indonesia
Top

Re: Different backgrounds per category

Quote

Post by qahar » Fri Jan 06, 2012 7:26 pm

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 } ?>
User avatar
qahar
Expert Member
Posts
2096
Joined
Tue Jun 29, 2010 10:24 pm
Location - Indonesia
Top

Re: Different backgrounds per category

Quote

Post by taylordsmith » Fri Feb 17, 2012 7:39 am

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
Last edited by taylordsmith on Fri Feb 17, 2012 7:43 am, edited 2 times in total.

OpenCart V1.5.1.3.1

taylordsmith
Newbie
Posts
12
Joined
Tue Jan 31, 2012 9:47 am
Top

Re: Different backgrounds per category

Quote

Post by qahar » Fri Feb 17, 2012 3:24 pm

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!
User avatar
qahar
Expert Member
Posts
2096
Joined
Tue Jun 29, 2010 10:24 pm
Location - Indonesia
Top

Re: Different backgrounds per category

Quote

Post by taylordsmith » Mon Feb 20, 2012 1:08 pm

Yeah, I'm getting the same error. Thanks a lot for the responses though, qahar and blackhalo.

Any more ideas?

-Taylor

OpenCart V1.5.1.3.1

taylordsmith
Newbie
Posts
12
Joined
Tue Jan 31, 2012 9:47 am
Top

Re: Different backgrounds per category

Quote

Post by Pobb » Thu Feb 23, 2012 6:33 pm

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 } ?>
Pobb
Active Member
Posts
113
Joined
Tue May 31, 2011 2:35 pm
Top

Re: Different backgrounds per category

Quote

Post by alikhan99 » Fri Aug 03, 2012 10:51 pm

How to continue the desired css for sub categories also?
alikhan99
Active Member
Posts
152
Joined
Fri Jun 29, 2012 4:57 pm
Top
Post Reply
Return to “Template Support”
Who is online

Users browsing this forum: No registered users and 14 guests