Help - Search - Members - Calendar
Full Version: Conditional formatting by category
Movable Type Community Forum > Additional Resources > Tips and Tricks
heinzelman
I'd like to be able to display an entry along with the category label (which I figured out) and then format the cell that the label appears in based on the actual label.

For instance:

if:
Category = A, then cell is red
Category = B, then cell is yellow

and so on...

A good example is fazed.org (warning on content) they have formatted the box based on the category.

Any help is appreciated, I did read before I posted but can't find anything specific to this.
Thanks!
kadyellebee
You could set up styles in your stylesheet.
CODE
.category_one {background-color:red; padding: 5px; }
.category_two {background-color:yellow; padding: 5px; }

and then in your template:
CODE
<div class="<$MTEntryCategory dirify="1"$>"> ... content here ... </div>

or something like that. smile.gif

Kristine
heinzelman
Kadyellebee-

Thanks for the response, could I ask for some clarification?

QUOTE
.category_one {background-color:red; padding: 5px; }
.category_two {background-color:yellow; padding: 5px; }


should the one, two etc. be changed to match the actual names of my categories?

and...

CODE
<div class="<$MTEntryCategory dirify="1"$>"> ... content here ... </div>


Does the "1" in the code correspond in anyway to the "one" on the style sheet?

I tried the code on my site with no luck:

CODE
<MTEntryCategories><span class="<$MTEntryCategory dirify="1"$>">blah!</span></MTEntryCategories>


I'm sorry if I'm missing the obvious, but there is a learning curve here for me.

I'd appreciate any help you could provide.

Thanks

Jeff
TweezerMan
CODE
.category_one {background-color:red; padding: 5px; }
.category_two {background-color:yellow; padding: 5px; }
QUOTE
should the one, two etc. be changed to match the actual names of my categories?

Sort of. Keep reading...

CODE
<div class="<$MTEntryCategory dirify="1"$>"> ... content here ... </div>
QUOTE
Does the "1" in the code correspond in any way to the "one" on the style sheet?

No. The dirify="1" here means (basically) to take the category name and 1) convert all letters to lower case, and 2) replace all spaces with "_" (underscore) characters. If you have a category called "My Favorites", the dirify="1" will change that into "my_favorites".

The "dirified" category name is what needs to be used in your style sheet. "category_one" is the dirified name of your first category, and "category_two" is the dirified name of your second category. For a category named "My Favorites", this is what you would have in your style sheet:
CODE
.my_favorites {background-color:red; padding: 5px; }

Hope this helps...
heinzelman
I think I understand, I tried to apply this quickly before work starts but it didn't work out. I'll have to fool with it tonight but here's what I did:

CSS
CODE
.fun {
    background-color:#000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    color: #FFFFFF;

}


Tags in HTML
CODE
<MTEntryCategories><span class="$MTEntryCategory dirify="1"$>">blah!</span></MTEntryCategories>


Here's the output (please don't laugh at my site, I'm just trying to get the formatting to work for now...)

HeinzelNet
TweezerMan
The MTEntryCategory tag in your span tag is not quite correct:
CODE
<span class="$MTEntryCategory dirify="1"$>">

You're missing the leading "<" on the MTEntryCategory tag. Your code should be like this:
CODE
<MTEntryCategories><span class="<$MTEntryCategory dirify="1"$>">blah!</span></MTEntryCategories>
heinzelman
Tried it at lunch time...

Awesome! It works, thank you very much for your help.

If I could pose one more question, really and CSS versus MT question...

How could I get the background color to fill up the entire cell as opposed to wrapping just the text?

THANKS AGAIN!!

Jeff
noelgreen
I think by far the easiest way to do this is using the MTIfCategory tags from Brad Choate's extra category tags plug in.

It's how we're redoing this site we're working on.

Each page is made by selecting a category when posting a new thing. Then the code has things like this:

CODE
<MTIfCategory pattern="m/(First Friday|Whats Hot|Participating Artists|Arts Sampler Pass|Arts Sampler Baskets|Artsfest)/i">


And when someone goes to one of those pages, the site will show the "tool-bar" on the side for those pages. That bar could easily be the background image, the header image, even the style sheet the page uses.

Make sense? smile.gif
TweezerMan
This is one way I got to work - by no means the only way:

In the .fun style in your stylesheet -
CODE
.fun {
    background-color:#000000;
    padding: 5px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    color: #FFFFFF;
    border: thin solid;
    margin: 5px;
}

...delete the "border: thin solid;".

Then in your template, apply the style to the <td> (table cell) instead of the text span. Your template code would look something like this:
CODE
<MTEntryCategories><td width="99" class="<$MTEntryCategory dirify="1"$>"><center>
blah!</center></td></MTEntryCategories>
heinzelman
Works great, thanks again!

Jeff
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.