Help formatting a phx condtional for switching classes

21 Posts

lwilson Reply #1, 13 years, 11 months ago

Hello. I would realy appreciate some help.

I have one template that uses template variables. I need to alter the
colour of headings ( h2 and h4) depending on the parent section you are in.
There are 5 main sections and they each require a different colour to match the rest of
the page but the widget only allows one css class.

I would like to use phx but I am not sure of the
syntax or how to write the conditional that is required. Maybe there is an easier way?

so far I’ve figured out I need these steps

1. create a snippet called phx:sidebarClass.

2. put some php code in the snippet (unsure of how to do this)

3. put this code [*sidebarClass*] inside template varaibles class field.

4. create a phx with if else statments.(unsure of how to do this)

I am trying to do something like this:

[+phx:if `[parentid]` is=`[~10~]`:then= <h2> and <h4> tags use class "about" class+]

Or
[+phx: if [~id~] is[~6~]:then set all headings classes to books class+]
else: if [~id~] is[~14~]:then set all headings classes to authors class]
else: if [~id~] is[~18~]:then set all headings classes to media class]
end if;

Does someone have a tutorial or similar example I can look at? I am a desinger with minimal php skills.

561 Posts

samba Reply #2, 13 years, 11 months ago

Hi!
I’m not a PHP genius either, so I do this in several very simple ways. PHx is awesome, but to me it’s just easier to do these....

Say I want to do this for h2 tags. I make a TV. I’ll call it "WilsonColour". I make that TV available to whatever template is being used for the page in question. I have some default content CSS set up for h2 color (and so on) in the regular CSS file.

Then I stick this code in the HEAD section of my template. This will override whatever I have in my flat file CSS! If I have nothing in the TV, then the default displays.

<style type="text/css">
#content H2 {color: [*WilsonColour*];}
</style>

Then I edit my page, and in the "WilsonColour" spot, I put in #666666 or whatever value looks good.

Another very simple way, no TV’s at all...

In your template you make a BODY tag like so:

<body id="doc[*id*]">

This gives you an instant unique ID that you can style with anything you want. (The "doc" part is there because CSS names don’t begin with numbers). So you save, make a page, look at its code, and let’s say your document is number 76....

So you write a bit of CSS styling in the regular CSS file like so:

#doc76 h2  {
  color: blue;
}

Slightly cruder than the first way, but works a treat (unless you delete and remake the doc, you’ll need to alter the CSS). Or you can use the awesome PHx if you want to. MODx has massive flexibility.

Cheers, Dave

MODx and Wordpress development
Linux, PHP 5.2, MySQL 5.0, Evo 1.05, Revo 2.08-pl, Firefox 4

21 Posts

lwilson Reply #3, 13 years, 11 months ago

Hi Samba. Thank you for your answer. I tried to implement one of your solutions but ran into another problem.

I am seeking a solution that avoids having to put the CSS code in every page I create.
This is important because editors will also create pages and they have
no html/css ability.

A bit more detail:
The <h2> and <h4> tags I am using are specific the right side menu.
I wanted to use the widget class in the TV.
Your method of using a place holder works well in this field.

So instead of <body id="doc[*id*]">
I used class=sidebar[*parent*]. In the css I specify the
the id of the 5 parents:

.sidebar6 {colour:#333,padding:10px}
.sidebar12 {colour:#6c9,padding:10px}
.sidebar22 {colour:#649,padding:10px}
...ETC

The problem occurs if the page is the parent.
If the page is the parent it returns the id as O.
I need a way to always get the unique id of the parent in the menu even
if the page itself is the parent.

Any suggestions?

[/img]

24,544 Posts

BobRay Reply #4, 13 years, 11 months ago

Maybe I’m misunderstanding what you want, but you may be making it too complicated, and if you’re doing a snippet, you shouldn’t need PHX, which will just slow things down.

If you know the class names you want ahead of time, you can just style all of them in your CSS file and us a template variable to set the class.

Create a TV called HeadingClass where you’ll enter or select the class name you want (you can make it a drop-down list or radio options).

Then in your template (or doc content), do the headings like this::

<h2 class="[*HeadingClass*]">Some Heading</h2>
<h3 class="[*HeadingClass*]">Some Heading</h3>
//etc.

Here’s a second method.

If you want to do it dynamically, you can do the headers with placeholders and use a snippet like this:

Put the snippet tag at the top of the page:

[!SetHeadingClasses!]

Use this code for the headers:

<h2 class="[+HeadingClass+]">Some Heading</h2>
<h3 class="[+HeadingClass+]">Some Heading</h3>
//etc.

<?php

/* SetHeading Class Snippet */

switch $modx->documentIdentifier {
  case 6:
       $class = "books"
  break;

  case 14:
       $class = "authors"
  break

  case 18:
       $class = "media"
  break;

  default:
       $class = ""

}

$modx->setPlaceholder('HeaderClass',$class);

return;
?>

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

561 Posts

samba Reply #5, 13 years, 11 months ago

L,
You’re quite an advanced thinker... you’ve got a promising future here! You’ve thought of a method that I haven’t seen. And I think at some point you will become an expert at PHx as a result!

Yes, the "non-parent parent" thing is a conundrum in many situations. I would approach this in a somewhat different way. I don’t use widgets much at all (not that it’s bad, by any means, I just find it dirt-simple not to). I think I would do something like this instead: I would just use a TV, Input Type maybe DropDown List Menu (or several other good alternatives there), a series of input options separated by pipes (|). This would give me several colours/styles or what-have-you, including a non-parenty ([*id*]) choice. And maybe, depending on what’s efficient, having a Default Value below those, say, if you have a typical colour that goes mostly everywhere.

This way somebody is choosing from a dropdown rather than coding any nasty CSS code or anything, and there could be a sensible default. I hope that stimulates some ideas.

And I always take BobRay quite seriously, too, he’s one of the smartest people around here.

Cheers, Dave

MODx and Wordpress development
Linux, PHP 5.2, MySQL 5.0, Evo 1.05, Revo 2.08-pl, Firefox 4

21 Posts

lwilson Reply #6, 13 years, 11 months ago

Thanks Bob and Dave for your advice. It gave me the opportunity to learn a new
way to use TV’s by making drop down’s. In the end I choose to use a list box
to make all the selections visible. I dropped the PHx snippet idea.

@Bob: I read your blog regularly for Modx tips!
I liked your dynamic solution but I wasn’t sure how it
resolved the problem of finding the parent ID when the resource page is the parent.
Could you explain that a bit? The client needs to beable to control the text in the
h2 and I need to be able to control the class assigned to the h2.

So based on your suggestions the solution looks like:

1. In the template I have all the TV’s in a chunk. for
cleaner code.

like so:

 {{sideFeaturesArea}}

2. and all of my TV in the chunk
<div id="sidebar">
[*side_Feature*]
[*side_Feature_Img*]
[*side_Caption*]



</div>

I changed that Chunk to:

<div id="sidebar">

<h2 class=[*section*]>[*side_Feature*]</h2>
[*side_Feature_Img*]
<h4 class=[*section*]>[*side_Caption*]</h4>

<!-- and a few more TV's here etc.--->
</div>

3.created Tv called [*section*]
Created a list box in the TV called [*section*]

4. choose the appropriate colour from the listbox in the resource page.

This solves the problem. It leaves the choice of the
colours in the hands of the client and I was hoping to avoid that.
Perhaps as I learn more I’ll be able to change that.

thank you,
Lisa

24,544 Posts

BobRay Reply #7, 13 years, 11 months ago

Lisa, maybe I just need more sleep, but I’m having trouble understanding this:

The problem occurs if the page is the parent.
If the page is the parent it returns the id as O.
I need a way to always get the unique id of the parent in the menu even
if the page itself is the parent.

No page is its own parent. Do you mean that the parent of top-level pages is 0? It definitely is.

If you want to set the colors based on the ID of the parent of the current document (rather than the id of the current document), just change the top of the switch statement to

switch $modx->documentObject['parent'] {

If you have to also set the colors for pages with a parent of 0, you’d need a case 0: in your switch statement with another switch statement inside it like the one in my previous post.

To set the colors, just put this at the bottom of your CSS file.

.books {color:red}
.authors {color:blue}
.media {color:green}

Hope this makes sense.

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

lwilson Reply #8, 13 years, 10 months ago

Hi Bob. Sorry for rudely disappearing. I’ve been putting out other fires on this project. Yes. This does make sense.
My question, though it no longer relates to phx, is How do I get the value (the id) of a parent level document?

For instance Authors and Illustrators is the top level resource page. It’s ID is 17. When I want to control the class of the
children I can use [*parent*] placeholder to find the id (in this case 17) of the parent.

I also need to set the same class on the parent or top level resource page, but it’s value is returned as 0 and not 17.
This would be fine if there was only one section. But I have 5 sections with parents and children. Using this method they will all return a value of 0 for the top level resource page. There will be no way to distinguish them.

Is there a placeholder (or another way) to get the value of the top level resource document that will also set the same id (17) for the children?

Hope that makes sense,
Lisa

Authors and Illustrators (17)
+ Author Detail (38)
+ Illustrator Detail (40)
+ Author Index (167)
+ Illustrator Index (168)
+ Submission Guidelines (21)

Awards (10)
+2005-2010 (12)
+Awards Index (11)

☆ A M B ☆
24,524 Posts

sottwell Reply #9, 13 years, 10 months ago

Do you mean the [*id*] resource variable? Of course the [*parent*] of a top-level resource will be 0; it actually has no parent since it is in the top level.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

24,544 Posts

BobRay Reply #10, 13 years, 10 months ago

I think I might be getting it. You want a tag that will output the parent’s ID, unless it’s 0, in which case you want the document’s own id?

Here’s a one-line snippet that would do that:

<?php
return $modx->documentObject['parent'] ? $modx->documentObject['parent'] : $modx->documentObject['id']';
?>

You could also do it with a PHX conditional but the snippet would be much faster.

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