HOW TO: Add CSS class to BODY tag (must have for themers)

Quote

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 :)
dizarter
New member
Posts
60
Joined
Tue Oct 11, 2011 7:33 am
Top

Re: HOW TO: Add CSS class to BODY tag (must have for themers

Quote

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

So awesome of you!

Thanks!


Eddie R. :)
er777
New member
Posts
25
Joined
Fri Mar 09, 2012 2:17 pm
Top

Re: HOW TO: Add CSS class to BODY tag (must have for themers

Quote

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

This was really helpful. Thank you!
kjp
Newbie
Posts
3
Joined
Fri Feb 25, 2011 3:02 am
Top

Re: HOW TO: Add CSS class to BODY tag (must have for themers

Quote

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
dantheman50_98
Active Member
Posts
100
Joined
Sat Sep 18, 2010 2:18 am
Top

Re: HOW TO: Add CSS class to BODY tag (must have for themers

Quote

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.
dizarter
New member
Posts
60
Joined
Tue Oct 11, 2011 7:33 am
Top

Re: HOW TO: Add CSS class to BODY tag (must have for themers

Quote

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
dantheman50_98
Active Member
Posts
100
Joined
Sat Sep 18, 2010 2:18 am
Top

Re: HOW TO: Add CSS class to BODY tag (must have for themers

Quote

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
jimiscript
Newbie
Posts
1
Joined
Wed Jan 08, 2014 2:06 am
Top

Re: HOW TO: Add CSS class to BODY tag (must have for themers

Quote

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

This should really be added to the DEFAULT templates :)
User avatar
DeFenestrated
Newbie
Posts
5
Joined
Mon Feb 24, 2014 4:39 am
Location - Brooklyn
Top

Re: HOW TO: Add CSS class to BODY tag (must have for themers)

Quote

Post by hardgamer » Sun Apr 14, 2024 10:35 pm

You can use my code, in which I added also User Agent and Mobile detection:

Code: Select all


        if (isset($this->request->get['route'])) {
            $class = explode('/', $this->request->get['route']);
            $id = $class[1];
            $class = implode(' ', array_splice($class, 1));

            if (isset($this->request->get['information_id'])) {
                $this->load->model('catalog/information');
                $information_id = '_' . $this->request->get['information_id'];
                $class .= str_replace('/', '-', $information_id);
            } else if (isset($this->request->get['product_id'])) {
                $product_id = '_' . $this->request->get['product_id'];
                $class .= ' ' . str_replace('/', '-', $id . $product_id);
            } else {
                $class .= ' ' . str_replace('/', '-', $this->request->get['route']);
            }
            if (isset($this->request->get['path'])) {
                $this->load->model('catalog/category');
                $cats = explode('_', $this->request->get['path']);
                $cats = !is_array($cats) ? array($cats) : $cats;
                foreach ($cats as $cat) {
                    $model = $this->model_catalog_category->getCategory($cat);
                    $class .= ' ' . str_replace(' ', '-', preg_replace('/[^a-z0-9\s]/', '', strtolower($model['name'])));
                }
            }
        } else {
            $class = 'home common-home';
            $id = 'home';
        }

        // Detect user agent and add appropriate classes
        $user_agent = $_SERVER['HTTP_USER_AGENT'];

        // Detect browser
        if (strpos($user_agent, 'MSIE') !== false || strpos($user_agent, 'Trident') !== false) {
            $browser_class = 'ie';
        } elseif (strpos($user_agent, 'Firefox') !== false) {
            $browser_class = 'firefox';
        } elseif (strpos($user_agent, 'Chrome') !== false) {
            $browser_class = 'chrome';
        } elseif (strpos($user_agent, 'Safari') !== false) {
            $browser_class = 'safari';
        } elseif (strpos($user_agent, 'Opera') !== false || strpos($user_agent, 'OPR') !== false) {
            $browser_class = 'opera';
        } else {
            $browser_class = 'unknown-browser';
        }

        // Detect OS
        if (strpos($user_agent, 'Windows') !== false) {
            $os_class = 'windows';
        } elseif (strpos($user_agent, 'Macintosh') !== false) {
            $os_class = 'mac';
        } elseif (strpos($user_agent, 'Linux') !== false) {
            $os_class = 'linux';
        } elseif (strpos($user_agent, 'iPhone') !== false || strpos($user_agent, 'iPad') !== false) {
            $os_class = 'ios';
        } else {
            $os_class = 'unknown-os';
        }

        // Detect device (mobile or desktop)
        if (strpos($user_agent, 'Mobile') !== false) {
            $device_class = 'mobile';
        } else {
            $device_class = 'desktop';
        }

        // Concatenate all classes
        $class .= ' ' . $browser_class . ' ' . $os_class . ' ' . $device_class;
        $data['customstyle'] = ' id="' . $id . '" class="' . $class . '" ';
Put this in HEADER.PHP right before:

Code: Select all

        return $this->load->view('common/header', $data);
Then visualize in Twig with this:

Code: Select all

{{customstyle}}
For example - replace <body> with:

Code: Select all

<body {{customstyle}}>

------------------------------
Still a Noobie...
My page: http://designninja.net Graphic designer services made easy!

User avatar
hardgamer
Newbie
Posts
16
Joined
Sat Sep 06, 2014 1:21 pm
Location - Bulgaria
Top
Post Reply
Return to “Template Support”
Who is online

Users browsing this forum: No registered users and 23 guests