Creating a snippet for different body classes

21 Posts

TikaL13 Reply #1, 17 years, 10 months ago

Hello guys,

I don’t know if this has already been brought to the forum. I did a search and didn’t see anything.

So let me get into what I’m trying to do and maybe someone out there has an idea as to how to execute this.

What I would like to do is add an include and or a snippet that has code in it that will check for the current URL and based on the current URL will give the body tag a class.

This is what I’m thinking it should look like <body class"[Some type of Modx Include Code Goes here]">

And this is what I’m thinking the include should have within it

IF

[~[*id*]~]

= some/path/URL.HTML

Then

a variable or class is passed back into the body tag so that when that is done running you get something like this:

<body class="WIDE">

Something to those regards is what i was thinking.

I just need a jump start and or a good resource or an example of what I’m trying to accomplish.

We are currently using a CMS system that has it’s own language code to accomplish this but there are so many other things wrong with this system that I am experimenting with ModX.

I hope there is a quick and simple solution to this. Any help would do.

Thanks in advance,

Matt

5,888 Posts

Bruno17 Reply #2, 17 years, 10 months ago

I think we need more information about your folder-structure and in which case you want to change the body-class. Do you have all documents with the same class in one folder, so you can use the getfield-snippet perhaps in combination with ultimateparent, so you can get a field from parent or one of the ultimateparents. Or is the class depending of the level in your document-hirarchie? Then you need a snippet which checks the level. Or do you want to set the class for each document manualy. Then you need perhaps a dropdown TV which sets the wanted class. Its not easy to give the right answer, before we haven’t more informaton about your situation.

Bruno

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

21 Posts

TikaL13 Reply #3, 17 years, 10 months ago

Quote from: Bruno17 at Nov 24, 2008, 03:59 PM

I think we need more information about your folder-structure and in which case you want to change the body-class. Do you have all documents with the same class in one folder, so you can use the getfield-snippet perhaps in combination with ultimateparent, so you can get a field from parent or one of the ultimateparents. Or is the class depending of the level in your document-hirarchie? Then you need a snippet which checks the level. Or do you want to set the class for each document manualy. Then you need perhaps a dropdown TV which sets the wanted class. Its not easy to give the right answer, before we haven’t more informaton about your situation.

Bruno

Bruno,

Thanks for getting back to me so promptly. I guess the best answer would the level based approach.

My Home Page would get a class of WIDE then if someone where to navigate to an interior page they would get a class of INNER but this is where is might get tricky is that some interior pages require a three column layout and those pages would get a class name of INNER_3 or something like that.

The current CMS system that we are using checks for the URL and based on the URL will pass the variable or class name to the body tag. This is an example of out current code within our system.

[?[[S8]]::inner/pages/about.html::WIDE]]

Where [[S8]] is the smarty code if you will for current URL

[? - is the IF statment

:: - is equal to

::WIDE - then pass this variable

Thanks Bruno i’m all ears right now!

Matt

5,888 Posts

Bruno17 Reply #4, 17 years, 10 months ago

in the example above you can use PHx with:
[*pagetitle:is=`about`:then=`WIDE`*] or with a snippet:
new snippet: isequal

return ($value1==$value2)?$truevalue:$falsevalue;

call it with:

[!isequal?&value1=`[*pagetitle*]`&value2=`about`&truevalue=`WIDE`&falsevalue=``!]

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

24,544 Posts

BobRay Reply #5, 17 years, 10 months ago

Is there some reason not to just use different templates for the different pages? Each template could have whatever you want in the <body> tag. That would certainly be the quickest and easiest way to do it, IMO.

Pages created below a container (folder) will default to having the template of the parent.

If that won’t work, I think another way might be to put a placeholder in your template’s body tag and set its value with a snippet.

You could also use Javascript.

Or, another easy way -- you could use the same class in every body tag, but have your snippet register a different css file for each page using regClientCSS().

As is common with MODx, there are a bunch of different ways to do what you want.

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

21 Posts

TikaL13 Reply #6, 17 years, 10 months ago

Quote from: BobRay at Nov 25, 2008, 01:53 AM

Is there some reason not to just use different templates for the different pages? Each template could have whatever you want in the <body> tag. That would certainly be the quickest and easiest way to do it, IMO.

Pages created below a container (folder) will default to having the template of the parent.

If that won’t work, I think another way might be to put a placeholder in your template’s body tag and set its value with a snippet.

You could also use Javascript.

Or, another easy way -- you could use the same class in every body tag, but have your snippet register a different css file for each page using regClientCSS().

As is common with MODx, there are a bunch of different ways to do what you want.

Thanks BobRay,

I have no doubt in my mind that are many ways to achieve what I’m trying to do. it’s just that I’m new to ModX and wanted to get a small jump start in the right direction so that I’m not poking in the dark and wasting time. The reason I don’t want to use different templates is that by using only one it will reduce the time in maintaining more than one template and more than one CSS file.

The only challenge I see with using certain templates with a parent is that certain interior pages my have a 3 column layout and some may have a two column layout.

Now i guess the next question would be is how would the IF / THEN statement look like? I know that I’m going to have to build this knowledge in a snippet but can I attach a call out to a snippet to the body tag?

Thanks guys!

Matt

If current URL is THIS... THAN place THIS CSS property to the body tag.

5,888 Posts

Bruno17 Reply #7, 17 years, 10 months ago

Did you had a look to my post above? There are two ways to get what you need for your given example!

1. the PHx-way(you must first install the PHx-Plugin):

<body class="[*pagetitle:is=`about`:then=`WIDE`*]">

2. the snippet way(you must first create the snippet isequal, see above post!):

<body class="[!isequal?&value1=`[*pagetitle*]`&value2=`about`&truevalue=`WIDE`&falsevalue=``!]">

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

1,390 Posts

kongondo Reply #8, 17 years, 10 months ago

@TikaL13

.....in addition to what bruno has said, here’s the wiki for the plugin PHx

http://wiki.modxcms.com/index.php/PHx

cheers/k

Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

21 Posts

TikaL13 Reply #9, 17 years, 10 months ago

Quote from: Bruno17 at Nov 25, 2008, 09:41 AM

Did you had a look to my post above? There are two ways to get what you need for your given example!

1. the PHx-way(you must first install the PHx-Plugin):
<body class="[*pagetitle:is=`about`:then=`WIDE`*]">
2. the snippet way(you must first create the snippet isequal, see above post!):
<body class="[!isequal?&value1=`[*pagetitle*]`&value2=`about`&truevalue=`WIDE`&falsevalue=``!]">

Thanks Bruno,

Two replies must have come thru at the same time because I didn’t see yours. I will try this and see if this works out for me.

So let me get this straight. I want to use the snippet way and lets say there are three types of body classes, do I have to use pagetitle? can I do the same thing using URL?

This is what my thought process is and please let me know if this can be done this way.

1. I have a page that has all these IF / THEN statements - Example: IF current URL is THIS than pass this class to the body tag
2. I have whatever code is nessesary to apply the snippet to the body tag which will look for that URL call out and apply that class to the Body Tag.

Is this how this is going to or would work?

Am I being difficult? and or confusing? I just want to make this easy as possable to maintain if i’m not being clear or not wording something wrong sorry guys. embarrassed

kongondo - I will look into that link you sent!

Thanks,

Matt

956 Posts

ganeshXL Reply #10, 17 years, 10 months ago

The easiest way is to simply include a template variable (input type dropdown, checkbox or radio-buttons): The editor would simply select a CSS class for each page and that’s it. You can even define a default value to make sure the class is not left empty by accident. Your template would then look something like:

<body class="[*bodyClass*]">

See http://modxcms.com/template-variables.html for more infos about TVs.

http://www.fantastique.ch/
http://www.dnik.ch/
http://www.flickr.com/photos/dnik/