How to add a class to body tag

camillep · **Joined:** Thu Sep 16, 2010 11:56 pm **Posts:** 44

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 · **Joined:** Tue Dec 23, 2008 8:39 pm **Posts:** 1321

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:

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 · **Joined:** Thu Sep 16, 2010 11:56 pm **Posts:** 44

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

Thanks!

Wishbone · **Joined:** Tue Dec 23, 2008 8:39 pm **Posts:** 1321

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

In your template:

Code:

{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:

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

camillep · **Joined:** Thu Sep 16, 2010 11:56 pm **Posts:** 44

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

camillep · **Joined:** Thu Sep 16, 2010 11:56 pm **Posts:** 44

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 · **Posted:** Fri Apr 08, 2011 5:41 pm

Code:

In stylesheet

Code:

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

camillep · **Joined:** Thu Sep 16, 2010 11:56 pm **Posts:** 44

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

manuel · **Joined:** Fri Nov 30, 2007 9:15 am **Posts:** 332

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

How to add a class to body tag

Who is online