Jump to content
dev osCommerce
Forum
  • Checkout
  • Login
  • Contact Us
  • Get in touch

osCommerce

The e-commerce.

New Demo
Our Partners

Catagories has own stylesheet?

Tai

By Tai
in General Support

Recommended Posts

  • 2 years later...
gareth123456

gareth123456

Posted
Posted
On each page there is a reference to:
<link rel="stylesheet" type="text/css" href="stylesheet.css">

You could case that out based on category group for a different style sheet.

 

 

I would like to implement something along the same lines. Does anyone have any ideas where I start. I guess I need some sort of condition set against the stylesheet in my pages?

 

Any pointers appreciated.

 

Thanks

 

Gareth

Link to comment
Share on other sites
  • 2 months later...
Guest

Guest

Posted
Posted
I want to make each own catagories have their own style ( header colour,stylesheet) or something like this.

Anyone give me some idea to do it please.

thank for your helps

 

Only had a quick 5 minute look and have not tested, this should work.

 

In index.php insert this code after this line

 

<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">

 

<?php switch($cPath){
case 34:
	 print "<link rel=\"stylesheet\" type=\"text/css\" href=\"stylesheet_2.css\">";
	 break;
case 35:
	 print "<link rel=\"stylesheet\" type=\"text/css\" href=\"stylesheet_3.css\">";
	 break;
default:
	 print "<link rel=\"stylesheet\" type=\"text/css\" href=\"stylesheet.css\">";
	 break;
}
?>

 

and comment out the existing stylesheet line using <!-- --> html comment tags

 

<!--<link rel="stylesheet" type="text/css" href="stylesheet.css">-->

 

Each category passes an id in cPath (you should see it in your URL when you click a category link), this id is then used to determine which stylesheet to display. The default: part of the switch statement will catch any that you havent captured and just display the normal stylesheet.

 

As you are inserting this code between HTML do not forget to use <?php ?> tags, if you copy my bit code as is you should be okay.

 

Usual disclaimer, if you bugger up your site I am not responsible :-"

Link to comment
Share on other sites
  • 1 month later...
NCR2000

NCR2000

Posted
Posted

This is harder than it seems. I actually JUST finished doing the exact same thing.

 

A couple problems you will run into.

Even after you change the stylesheet, there are some images that remain static within the boxes.php file.

 

SOO in order to change all colors, including the side box images.

You have to do the following.

 

MAKE SURE TO CHANGE EVERY INSTANCE OF

<link rel="stylesheet" type="text/css" href="stylesheet.css">

 

to something like

 

<?php echo "<link rel=\"stylesheet\" type=\"text/css\" href=\""; 

if ($cPath==21)
{
echo "stylesheet21.css";
$cornerleft = 'infobox/21/corner_left.gif';
$cornerright = 'infobox/21/corner_right.gif';
$cornerrightleft = 'infobox/21/corner_right_left.gif';
}

elseif ($cPath==28)
{
echo "stylesheet28.css";
$cornerleft = 'infobox/28/corner_left.gif';
$cornerright = 'infobox/28/corner_right.gif';
$cornerrightleft = 'infobox/28/corner_right_left.gif';
}

elseif ($cPath==29)
{
echo "stylesheet29.css";
$cornerleft = 'infobox/29/corner_left.gif';
$cornerright = 'infobox/29/corner_right.gif';
$cornerrightleft = 'infobox/29/corner_right_left.gif';
}

elseif ($cPath==30)
{
echo "stylesheet30.css";
$cornerleft = 'infobox/30/corner_left.gif';
$cornerright = 'infobox/30/corner_right.gif';
$cornerrightleft = 'infobox/30/corner_right_left.gif';
}

elseif ($cPath==31)
{
echo "stylesheet31.css";
$cornerleft = 'infobox/31/corner_left.gif';
$cornerright = 'infobox/31/corner_right.gif';
$cornerrightleft = 'infobox/31/corner_right_left.gif';
}

elseif ($cPath==32)
{
echo "stylesheet32.css";
$cornerleft = 'infobox/32/corner_left.gif';
$cornerright = 'infobox/32/corner_right.gif';
$cornerrightleft = 'infobox/32/corner_right_left.gif';
}
else
{
echo "stylesheet.css";
$cornerleft = 'infobox/corner_left.gif';
$cornerright = 'infobox/corner_right.gif';
$cornerrightleft = 'infobox/corner_right_left.gif';
}

echo "\">";

?>

Notice that I have it set up to point not only to new stylesheets, I give it new infobox images too, sorted into folders by the Category ID.

NOTE: This will effect the color scheme of sub categories too.

 

Then find the

includes/classes/boxes.php

and change (around line 100-118)

class infoBoxHeading extends tableBox {
   function infoBoxHeading($contents, $left_corner = true, $right_corner = true, $right_arrow = false) {
     $this->table_cellpadding = '0';

     if ($left_corner == true) {
       $left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_left.gif');
     } else {
       $left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_right_left.gif');
     }
     if ($right_arrow == true) {
       $right_arrow = '<a href="' . $right_arrow . '">' . tep_image(DIR_WS_IMAGES . 'infobox/arrow_right.gif', ICON_ARROW_RIGHT) . '</a>';
     } else {
       $right_arrow = '';
     }
     if ($right_corner == true) {
       $right_corner = $right_arrow . tep_image(DIR_WS_IMAGES . 'infobox/corner_right.gif');
     } else {
       $right_corner = $right_arrow . tep_draw_separator('pixel_trans.gif', '11', '14');
     }

to

class infoBoxHeading extends tableBox {
   function infoBoxHeading($contents, $left_corner = true, $right_corner = true, $right_arrow = false) {
     global $cornerleft, $cornerright, $cornerrightleft;
  $this->table_cellpadding = '0';

     if ($left_corner == true) {
       $left_corner = tep_image(DIR_WS_IMAGES . $cornerleft);
     } else {
       $left_corner = tep_image(DIR_WS_IMAGES . $cornerrightleft);
     }
     if ($right_arrow == true) {
       $right_arrow = '<a href="' . $right_arrow . '">' . tep_image(DIR_WS_IMAGES . 'infobox/arrow_right.gif', ICON_ARROW_RIGHT) . '</a>';
     } else {
       $right_arrow = '';
     }
     if ($right_corner == true) {
       $right_corner = $right_arrow . tep_image(DIR_WS_IMAGES . $cornerright);
     } else {
       $right_corner = $right_arrow . tep_draw_separator('pixel_trans.gif', '11', '14');
     }

 

then on line 148-163 change 

class contentBoxHeading extends tableBox {
   function contentBoxHeading($contents) {
     $this->table_width = '100%';
     $this->table_cellpadding = '0';

     $info_box_contents = array();
     $info_box_contents[] = array(array('params' => 'height="14" class="infoBoxHeading"',
                                        'text' => tep_image(DIR_WS_IMAGES . 'infobox/corner_left.gif')),
                                  array('params' => 'height="14" class="infoBoxHeading" width="100%"',
                                        'text' => $contents[0]['text']),
                                  array('params' => 'height="14" class="infoBoxHeading"',
                                        'text' => tep_image(DIR_WS_IMAGES . 'infobox/corner_right_left.gif')));

     $this->tableBox($info_box_contents, true);
   }
 }

to 

class contentBoxHeading extends tableBox {
   function contentBoxHeading($contents) {
     global $cornerleft, $cornerright, $cornerrightleft;
  $this->table_width = '100%';
     $this->table_cellpadding = '0';

     $info_box_contents = array();
     $info_box_contents[] = array(array('params' => 'height="14" class="infoBoxHeading"',
                                        'text' => tep_image(DIR_WS_IMAGES . $cornerleft)),
                                  array('params' => 'height="14" class="infoBoxHeading" width="100%"',
                                        'text' => $contents[0]['text']),
                                  array('params' => 'height="14" class="infoBoxHeading"',
                                        'text' => tep_image(DIR_WS_IMAGES . $cornerrightleft)));

     $this->tableBox($info_box_contents, true);
   }
 }

 

Notice I Add global $cornerleft, $cornerright, $cornerrightleft;

and change the image locations like (DIR_WS_IMAGES . 'infobox/corner_left.gif') to just variables such as (DIR_WS_IMAGES . $cornerleft)

 

Then what you do is add a new folder within the infobox folder, name it by the category ID, put the images for that category color scheme in that folder.

 

 

I hope this helps someone out, took me 5 days to get it right.

If anyone has questions about it, I'll try to help them out.

Maybe someone wants to take all this info and squeeze it into a contrib? Im not that good/comfortable doing it myself though.

Link to comment
Share on other sites
  • 3 weeks later...
moisea

moisea

Posted
Posted

hello NCR2000,

 

i am really interested in your contribution shown above which i thing is really great. however, i dont really understands this part of your tutorial:

MAKE SURE TO CHANGE EVERY INSTANCE OF
<link rel="stylesheet" type="text/css" href="stylesheet.css">

the problem is i can't find them, could you please guide me through these?

 

secondly, regarding 

Then what you do is add a new folder within the infobox folder, name it by the category ID, put the images for that category color scheme in that folder.

i don't see the infobox folder.

 

by the way i am using 2.2ms2.

 

thank you very much.

Link to comment
Share on other sites
NCR2000

NCR2000

Posted
Posted

The biggest problem with this whole idea is that there are just so many files that point to the stylesheet. And if you don't take precausions you may find yourself ending up with some visual errors.

 

My advise would be to take the images found in the /images/infobox folder and make them transparent to begin with. (if you need these I have a copy)

 

 

Secondly, You don't REALLY have to change every instance of 

<link rel="stylesheet" type="text/css" href="stylesheet.css">

 

But there are some important ones to take care of..

These include the following files in the main directory (reffered to as catalog)... (but may not be limited to)

 

index.php

product_info.php

product_reviews.php

product_reviews_info.php

product_reviews_write.php

 

I personally have went through each file in the CATALOG folder and and changed the above line. But you really only need to change the files listed above. Since those are the only ones used to display products in catagories.

Link to comment
Share on other sites
moisea

moisea

Posted
Posted
The biggest problem with this whole idea is that there are just so many files that point to the stylesheet.  And if you don't take precausions  you may find yourself ending up with some visual errors.

 

My advise would be to take the images found in the /images/infobox folder and make them transparent to begin with.  (if you need these I have a copy)

Secondly, You don't REALLY have to change every instance of 

<link rel="stylesheet" type="text/css" href="stylesheet.css">

 

But there are some important ones to take care of..

These include the following files in the main directory (reffered to as catalog)... (but may not be limited to)

 

index.php

product_info.php

product_reviews.php

product_reviews_info.php

product_reviews_write.php

 

I personally have went through each file in the CATALOG folder and and changed the above line.  But you really only need to change the files listed above.  Since those are the only ones used to display products in catagories.

 

thanks travis, i am gonna give it a try again. i'll let you know how it went. :thumbsup:

Link to comment
Share on other sites
NCR2000

NCR2000

Posted
Posted

Well since I can't edit my own posts.... anyone interested... this is the easiest way that I have found.

 

 

Let me try to clear things up a little bit for anyone interested... let me know if you have any other questions.

 

The biggest problem with this whole idea is that there are just so many files that point to the stylesheet. And if you don't take precausions you may find yourself ending up with some visual errors.

 

My advise would be to take the images found in the /images/infobox folder and make them transparent to begin with. (if you need these I have a copy)

 

Secondly, Make an Individual stylesheet for each category you want to use different colors with. Name them with the category ID# for ease of remembering which goes to what. then just place them within the CATALOG folder

 

Thirdly, You don't REALLY have to change every instance of 

<link rel="stylesheet" type="text/css" href="stylesheet.css">

 

But there are some important ones to take care of..

These include the following files in the main directory (reffered to as catalog)... (but may not be limited to)

 

index.php

product_info.php

product_reviews.php

product_reviews_info.php

product_reviews_write.php

products_new.php

 

This is what you should change it to look like

 

<?php echo "<link rel=\"stylesheet\" type=\"text/css\" href=\""; 

if ($cPath==21)
{
echo "stylesheet21.css";
}

elseif ($cPath==28)
{
echo "stylesheet28.css";
}

elseif ($cPath==29)
{
echo "stylesheet29.css";
}

elseif ($cPath==30)
{
echo "stylesheet30.css";
}

elseif ($cPath==31)
{
echo "stylesheet31.css";
}

elseif ($cPath==32)
{
echo "stylesheet32.css";
}
else
{
echo "stylesheet.css";
}

echo "\">";

?>

 

I personally have went through each file in the CATALOG folder and and changed the above line. But you really only need to change the files listed above. Since those are the only ones used to display products in catagories.

 

** On a side note, if you wanted the checkout process to have its own color scheme you would edit all files within the "CATALOG" folder that has the word CHECKOUT in it. from 

<link rel="stylesheet" type="text/css" href="stylesheet.css">

to something like

<link rel="stylesheet" type="text/css" href="checkout_stylesheet.css">

then create a new stylesheet with that name and appropriate settings.

 

THIS WAY HERE SHOULD BE ALOT EASIER THAN HOW I EXPLAINED THE FIRST TIME. JUST REMEMBER TO CHANGE THOSE 4 IMAGES WITHIN THE /IMAGES/INFOBOX/ FOLDER TO HAVE TRANSPARENT BACKGROUNDS.

Link to comment
Share on other sites
moisea

moisea

Posted
Posted

hello again MCR2000,

 

My advise would be to take the images found in the /images/infobox folder and make them transparent to begin with. (if you need these I have a copy)

i found the images/infoox folder and was wondering if i could please have a copy to make them transparent.

secondly, how would i get the pictures or colors to display?

 

thanks again.

Link to comment
Share on other sites
NCR2000

NCR2000

Posted
Posted
What happens if CODE$cPath=21_23_25for example?

 

 

See that's the beauty of it.

Or for at least what I want, if the $cPath=21_23_25 for example.

If will automatically follow the same rules as $cPath=21

meaning that subcategories will automatically take apperance of there main category.

 

 

From the link you posted, using the switch statement would have been easier. But I am relatively new to PHP, or coding for that matter. And just used the way I knew how to get it to work.

Link to comment
Share on other sites
burt

burt

Posted
Posted

I have not tested your code, but I believe that if (for example) the 

$cPath=21_23_25

, the stylesheet used would be stylesheet.css as you have no if/else for 21_23_25

 

Whereas you require the stylesheet25.css (assuming of course that this was in your if/else or switch structure. The way to get this value is to use 

$current_category_id

...

 

But, I have not tested it in a live scenario. Maybe you con confirm what I believe and let us know the results.

Link to comment
Share on other sites
NCR2000

NCR2000

Posted
Posted
hello again MCR2000,

 

My advise would be to take the images found in the /images/infobox folder and make them transparent to begin with. (if you need these I have a copy)

i found the images/infoox folder and was wondering if i could please have a copy to make them transparent.

secondly, how would i get the pictures or colors to display?

 

thanks again.

 

I sent you the link to them in a private message.'

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...