Add Dynamic Body Class or ID?

Is there any way to add a dynamic class or ID to the body tag? Or any other tag for that matter?



I find this cart incredibly limiting in the fact that you can’t use different page templates and the cart doesn’t assign dynamic classes or ID to anything aside from products.

I guess I'll answer my own question.



This isn't exactly what I wanted but it's enough to do the trick for now. This will add a class to the html element based on the first word of the page name. So if your page is called “about-our-company.html” It will add “about” as a class to the html element.



Add this to your head.


```php

{literal}


{/literal}

```

Hi @Pablo

You can edit skins/[SKIN_NAME]/customer/index.tpl



[color=#ff0000]replace:[/color]



[color=#008000]1. with:[/color]

ex:



[color=#006400]2. or even more advanced:[/color]

ex:

ex:



PS: in case of update you need to edit again



I hope that helps,





Valentin

Thanks. That doesn’t actually add the name of the specific page or even the ID.



This is what I get on a page now.



[color=#881280][font=monospace][size=1]<body [/size][/font][/color][font=monospace][size=1]id[/size][/font][color=#881280][font=monospace][size=1]=“[/size][/font][/color][font=monospace][size=1]pages[/size][/font][color=#881280][font=monospace][size=1]” [/size][/font][/color][font=monospace][size=1]class[/size][/font][color=#881280][font=monospace][size=1]=“[/size][/font][/color][font=monospace][size=1]view page[/size][/font][color=#881280][font=monospace][size=1]”>[/size][/font][/color]





But it does work on categories pages now :) So if I use both I can now target pretty much any page I want now with CSS.



Thanks for your help.

I change

[color=#006400]2. or even more advanced:[/color]

please try now

Updated for cd-cart v4.x

```php


```


[ Tested on CS-Cart: version 4.0.1 ULTIMATE (rc) ]

I hope that helps,

---
Valentin

Works perfect on cs-cart 4.0.x and 4.1.x



After adding code you can add css styles to any page from the website ;)



#homepage

<br />
body#index.index{}<br />

```<br />
#all categories```php
<br />
body#categories{}<br />

```#specific category (ex:for category_id=1)```php
<br />
body#categories.category1{}<br />

```<br />
#all pages```php
<br />
body#pages{}<br />

```#specific page(ex:for page_id=1)```php
<br />
body#pages.page1{}<br />

```<br />
<br />
I hope that helps,<br />
<br />
---<br />
Valentin<br />
[color=#808080][size=2]part of hungryweb.net[/size][/color]

Vali, thanks a lot! I wonder why this little but very useful improvement is not yet suggested as default markup.



Anybody from CS-Cart team would like to lobby it to include into next version?

[quote name='Zahhar' timestamp='1419193104' post='200510']

Vali, thanks a lot! I wonder why this little but very useful improvement is not yet suggested as default markup.



Anybody from CS-Cart team would like to lobby it to include into next version?

[/quote]



It will be better if you post this to the bug tracker as a feature request. I am afraid they do not monitor all themes on this forum

Right now is a better solution and upgrade ready, using of hook index:content for you please follow:



#add file

design/themes/[THEME_NAME]/templates/addons/my_changes/hooks/index/content.pre.tpl



#with content





#add file

design/themes/[THEME_NAME]/templates/addons/my_changes/hooks/index/content.post.tpl



#with content





The only difference now is that you don't need to use body selector, the new css selectors are:



#homepage div#index.index{}

#all categories div#categories{}

#specific category by category_id div#categories.category1{}

#all products div#products{}

#specific products by product_id div#products.product1{}

#all pagesdiv#pages{}

#specific page by page_id div#pages.page1{}



PS: You will need to have My Changes add-on active.



I hope that helps,





Valentin

[color=#808080][size=2]part of hungryweb.net[/size][/color]

Is it also possible to show the category class when you are on a product page?

Example

Category: Books > Aladin

Body class on product page = Aladin

Use the following code