Page 1 of 1
HOW TO: Add CSS class to BODY tag (must have for themers)
Posted: Mon Feb 20, 2012 3:50 am
by dizarter
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
With
Code: Select all
<body class="<?php echo $body_class; ?>">
Voila, now you get body tag with various classes appended.
Theme ahead, OpenCarters
Re: HOW TO: Add CSS class to BODY tag (must have for themers
Posted: Tue Mar 27, 2012 2:25 pm
by er777
So awesome of you!
Thanks!
Eddie R.
Re: HOW TO: Add CSS class to BODY tag (must have for themers
Posted: Wed Mar 28, 2012 10:24 pm
by kjp
This was really helpful. Thank you!
Re: HOW TO: Add CSS class to BODY tag (must have for themers
Posted: Wed Mar 28, 2012 10:39 pm
by dantheman50_98
Nice!
Could you please tell me how you'd go about doing this, only with just one class added - for example:
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
Re: HOW TO: Add CSS class to BODY tag (must have for themers
Posted: Thu Mar 29, 2012 2:35 am
by dizarter
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.
Re: HOW TO: Add CSS class to BODY tag (must have for themers
Posted: Thu Mar 29, 2012 4:42 am
by dantheman50_98
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
Re: HOW TO: Add CSS class to BODY tag (must have for themers
Posted: Wed Jan 08, 2014 11:40 pm
by jimiscript
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
Re: HOW TO: Add CSS class to BODY tag (must have for themers
Posted: Thu May 08, 2014 11:19 am
by DeFenestrated
This should really be added to the DEFAULT templates
Re: HOW TO: Add CSS class to BODY tag (must have for themers)
Posted: Sun Apr 14, 2024 10:35 pm
by hardgamer
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:
For example - replace <body> with: