Post by dizarter » Mon Feb 20, 2012 3:50 am

Every serious themer will sooner or later want to apply different style to the same element rendered accross various pages.

Default OpenCart theme doesn't provide means to do this because header.tpl outputs <body> tag wihout any classes, making the previous task impossible to accomplish.

But, cry no more! :) After making the changes described below you will have <body> tag with various classes appended, all in relation to the page being viewed (product pages, category pages, account pages, information pages, current language, SEO and nonSEO URLs, everything is covered).

So, here is how to make it work

Open catalog/controller/common/header.php

Find

Code: Select all

$this->data['title'] = $this->document->getTitle();
Paste after

Code: Select all

    // start body_class code
    
    $current_path = $this->request->get;
    if (empty($current_path) || $current_path['route'] == 'common/home') {
      $body_class = 'home';
    }
    else {
      $body_class = explode('/', str_replace('product/', '', $current_path['route']));
      unset($current_path['route']);
      if (isset($current_path['_route_'])) {
        $body_class = array_merge($body_class, explode('/', str_replace('-', '_', $current_path['_route_'])));
        unset($current_path['_route_']);
      }
      foreach ($current_path as $key => $value) {
        $body_class[] = $key . "_" . $value;
      }
      $body_class = 'page_' . implode(" page_", array_unique($body_class));
    }
    $body_class .= ' lang_' . $this->language->get('code');
    $this->data['body_class'] = $body_class;
		
    // end body_class code
Open

catalog/view/theme/YOUR_THEME_NAME/template/common/header.tpl

Replace

Code: Select all

<body>
With

Code: Select all

<body class="<?php echo $body_class; ?>">
Voila, now you get body tag with various classes appended.

Theme ahead, OpenCarters :)

New member

Posts

Joined
Tue Oct 11, 2011 7:33 am

Post by er777 » Tue Mar 27, 2012 2:25 pm

So awesome of you!

Thanks!


Eddie R. :)

New member

Posts

Joined
Fri Mar 09, 2012 2:17 pm

Post by kjp » Wed Mar 28, 2012 10:24 pm

This was really helpful. Thank you!

kjp
Newbie

Posts

Joined
Fri Feb 25, 2011 3:02 am

Post by dantheman50_98 » Wed Mar 28, 2012 10:39 pm

Nice!

Could you please tell me how you'd go about doing this, only with just one class added - for example:

Code: Select all

<body class="page_shop">
instead of what I have now, which is:

Code: Select all

<body class="page_product page_shop page_Whey Protein page_path_20 page_product_id_42">
I've tried removing parts of the code, but I can't seem to achieve the desired effect.

Thank you,
Dan

Active Member

Posts

Joined
Sat Sep 18, 2010 2:18 am

Post by dizarter » Thu Mar 29, 2012 2:35 am

Could you please tell me how you'd go about doing this, only with just one class added
Well, the goal was to make this universal and appliable in variety of situations.

Why would you bother removing the rest of the classes as long as you have the one you need added correctly everywhere?

And, eventually, you may want to style specific category differently then others (for example, "promo" or similar).

This was my scenario, and having all those other specific CSS classes comes to the rescue in that situation.

New member

Posts

Joined
Tue Oct 11, 2011 7:33 am

Post by dantheman50_98 » Thu Mar 29, 2012 4:42 am

Sorry for the misunderstanding, but I don't mean having the same class added to all pages; it would be a page-specific class, so e.g. on the category page it could be .category, on a specific product page it could be .exampleproduct, and on the about page it could be .about, etc etc.

This would just be cleaner, and would mean not having a bunch of classes that I, and no doubt many others, wouldn't always use.

I'd appreciate it very much if you were able to post some code that might achieve this.

Thank you,
Dan

Active Member

Posts

Joined
Sat Sep 18, 2010 2:18 am

Post by jimiscript » Wed Jan 08, 2014 11:40 pm

I have written a vQmod Extension based on the code posted by dizarter.
The Extension is compatible with all 1.5 versions of OpenCart and is available as a free download.

Add Body Class <vQmod>: http://www.opencart.com/index.php?route ... n_id=15379

User avatar
Newbie

Posts

Joined
Wed Jan 08, 2014 2:06 am

Post by DeFenestrated » Thu May 08, 2014 11:19 am

This should really be added to the DEFAULT templates :)

User avatar
Newbie

Posts

Joined
Mon Feb 24, 2014 4:39 am
Location - Brooklyn
Who is online

Users browsing this forum: No registered users and 14 guests