Jump to content

Custom Body class on CMS pages


Recommended Posts

Hello,
I was working on getting custom layouts for individual CMS pages.
What I found is you can get the body class to be the same as the friendly url.

So if your friendly URL is termsandservice the body class = termsandservice.

I needed this so the background would be different on certain cms pages.
An example is
http://www.nomas-nyc.com/content/11-lsdnono
as you can see this crazy background is different only on this page because the body class is lsdnono the same as the friendly URL. It also changes all the link colors to white instead of light grey.

To get this to work on your site

on your header.php page you need to add in the call so the smarty template knows what to use

$smarty->assign(array(
   'HOOK_HEADER' => Module::hookExec('header'),
   'HOOK_LEFT_COLUMN' => Module::hookExec('leftColumn'),
   'HOOK_TOP' => Module::hookExec('top'),
   'static_token' => Tools::getToken(false),
   'token' => Tools::getToken(),
   'priceDisplayPrecision' => _PS_PRICE_DISPLAY_PRECISION_,
   'content_only' => intval(Tools::getValue('content_only')),
   /* Hack  so cms short url  is added to the body as a class. Chnages header.tpl file also*/
   'cmslinks' =>$cms->link_rewrite
));



so by adding 'cmslinks' =>$cms->link_rewrite this makes cmslinks the friendly url

then in your
header.tpl file

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} {if $page_name =='cms'} class="{$cmslinks}"{/if}>




adding in
{if $page_name =='cms'} class="{$cmslinks}"{/if}

checks to see if the page is a cms page and if it is add the class in there.

and last you need to change your css file to change the layout

in the case of lsdnono
i needed to change the background and the link colors

.lsdnono{
background:url('../img/ACID-layer.jpg');
}
.lsdnono #header_user a:link, .lsdnono #header_user a:visited,.lsdnono #headernav a:link, .lsdnono #headernav a:visited, .lsdnono .block_various_links a:link, .lsdnono .block_various_links a:visited, .lsdnono .tree li a, .lsdnono .tree li ul li a, .lsdnono #tagline, .lsdnono #header_user ul li, .lsdnono .account a, .lsdnono .myaccount ul li a, .lsdnono a:link, .lsdnono a:visited, .lsdnono .spacer, .lsdnono #footer_copy {color:#ffffff; border-color:#ffffff;}



Hope this helps. It really opens up what you can do on the individual cms pages.

Thanks

Link to comment
Share on other sites

Thank you for sharing this. This is exactly what I am looking for.

I have a question: if I only want cms-3, and cms6 have a different background then the normal cms. What code should I enter to the tpl?

Thank you. I don't know programming at all. :red:

And can I make a particular cms has different header and footer?

Link to comment
Share on other sites

if you do this all you have to do for custom backgrounds is set up the css for the page that you want.

so if your friendly url is set for cms-3 to terms

then in your css

it would be .terms {background:red;} (or what ever you want)

then on cms-6 if your friendly url is page6

in your css
it would be

.page6 {background:blue;}

other pages dont do anything

Link to comment
Share on other sites

  • 1 month later...
if you do this all you have to do for custom backgrounds is set up the css for the page that you want.

so if your friendly url is set for cms-3 to terms

then in your css

it would be .terms {background:red;} (or what ever you want)

then on cms-6 if your friendly url is page6

in your css
it would be

.page6 {background:blue;}

other pages dont do anything


Oh, I forgot to say Thank You. Thank you, Thank You, and Thank you again
Link to comment
Share on other sites

  • 4 weeks later...
  • 1 month later...
  • 6 months later...
  • 1 year later...

I'm looking to do this on prestashop 1.4.5.1

 

There have been some changes in presta since this post was written and I'm not sure how to implement the code.

I have tried adding.

 

self::$smarty->assign(array(
    'cmslinks' =>$cms->link_rewrite
));

 

To FrontController.php (rather than header.php) at line 484.

and changing

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>

to

 

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} {if $page_name =='cms'} class="{$cmslinks}"{/if}>

 

as suggested but it white pages the site.

 

Suggestions? ideas?

 

Thanks in advance

Link to comment
Share on other sites

Never mind, after further googleing i found this solution by Anghel on this forum.

 

Open classes/FrontController.php

Find the function displayHeader()

 

After this

'logo_image_height' => Configuration::get('SHOP_LOGO_HEIGHT'),
  'priceDisplayPrecision' => _PS_PRICE_DISPLAY_PRECISION_,
  'content_only' => (int)Tools::getValue('content_only'),

 

Add this line of code

'cms_class' =>(int)Tools::getValue('id_cms')

 

Open Header.tpl

add in the body tag this line of code {if $page_name =='cms'} class="cms{$cms_class}"{/if}

like this

 

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}" {/if} {if $page_name =='cms'} class="cms{$cms_class}"{/if}>

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...