How to add a class to body tag

camillep · Post by **camillep** » Thu Apr 07, 2011 8:57 pm

I'm not sure if this is the correct forum. Please excuse me if it isn't.

The way our CMS was set up was with 5 different templates. The only difference between the templates is that the body tag has a different background image for each template in a css class.

Is there a way to do this without having a separate template for each instance the background image changes?

Thank you very much,
Camille

Wishbone · Post by **Wishbone** » Thu Apr 07, 2011 10:31 pm

Remove the background-image from the stylesheet and use inline styles instead. Rename the images to match the page-alias that you are on or other such scheme.

Template:

Code: Select all

</__body style="background-image:url({$page_alias}.jpg);">

Change the page, you get a different picture. If you share the same picture for several pages, you can make a one-liner content box where the content editor can type in the name of the image they want. If they don't enter one in, your template logic would use a default image.

camillep · Post by **camillep** » Fri Apr 08, 2011 12:06 am

Thank you! I will work on that tonight. How do I create a one-liner content box though?

Thanks!

Wishbone · Post by **Wishbone** » Fri Apr 08, 2011 1:04 am

The usage is documented under Extensions -> Tags -> Content

In your template:

Code: Select all

{content block="background" label="Background Image" oneline="true" assign="background_image"}

When you edit your page, you will have an entry called "Background Image".. The value will be in a Smarty variable called $background_image

I would put this content block before the <head>. This section gets processed first, then the </__body>, then the <head>. Then put:

Code: Select all

</__body style="background-image:url(uploads/images/{$background_image});">

(adjust the path above to fit the location of your images)

camillep · Post by **camillep** » Fri Apr 08, 2011 1:17 am

This is great help. I will do that tonight and see how it works out.

camillep · Post by **camillep** » Fri Apr 08, 2011 4:33 pm

Hi, this is an easy solution, and works well.

I still need to be able to add a css class to the body tag though. The background images that are being used have css position properties. Is that possible to do?

Thanks!
Camille

uniqu3 · Post by **uniqu3** » Fri Apr 08, 2011 5:41 pm

Code: Select all

</__body class="{$page_alias}">

In stylesheet

Code: Select all

body.my-page-alias { 
  my: style;
}

camillep · Post by **camillep** » Fri Apr 08, 2011 6:37 pm

I wish it could be that simple. The site has at least 100 pages, each with different page aliases.

Post by **manuel** » Wed May 02, 2012 8:24 pm

Hi Camilep,

This is the UDT i sometimes use if i want to have specific css rules for groups of pages or individual pages:
http://wiki.cmsmadesimple.org/index.php ... page_class

Just try it and you'll be pleasantly surprised!!

Greetings,
Manuel

CMS Made Simple Forums

How to add a class to body tag

How to add a class to body tag

Re: How to add a class to body tag

Re: How to add a class to body tag

Re: How to add a class to body tag

Re: How to add a class to body tag

Re: How to add a class to body tag

Re: How to add a class to body tag

Re: How to add a class to body tag

Re: How to add a class to body tag