it may not be the most elegant way to do it but this is how I have done it.

You have an Attribute in the BO called Gender which will be either Male or Female.

You have two css classes....

.genderMale{
background-color: blue; (add your desired color code)
}
.genderFemale{
background-color: pink; (add your desired color code)
}

In your custom query html

<div class="gender{Gender}"> blah blah... Where Gender is the Attribute name.

So, depending on the data of each record, it will translate to either...

<div class="genderFemale"> blah blah...
or
<div class="genderMale"> blah blah...

In fact, Mark's way might be the most elegant way as it results in less CQ Template script, with the only compromise being that you might (but most likely not) need to use Class Name's which might not be consistent with your Class naming convention.

Another way to achieve it is to use a Kendo UI Hash Template in the CQ Template, which exist for exactly this purpose, which provide If, Else If, Else output control as detailed in the below post:

https://www.awareim.com/forum/viewtopic.php?p=42455#p42455

I'd say that a hybrid of Mark's way in conjunction with a Kendo Ui Hash Template will be best - use the Hash Template to resolve the appropriate Class Name based on the Value in the Gender field ..

if gender = male then class_name_if_male
else class_name_if_female

..this way your class names can be consistent with your class naming convention.

AND .. you can use the Hash Template to "cheat" and not create classes just for this minor output pattern, by using the Hash Template to specify the different background colors for male and female in the CQ Template directly.

I do something similar to this for a custom query that displays some time slots that can be booked. I have an attribute (color) which is set when the booking status is changed. This attribute is a color name (blue/pink). In my custom query I have added to the div style background:{color};

What I'd suggest is add to your staff member an attribute that is set when gender is changed and has the value of the color you want the background to be.

I'm having a different issue, so perhaps rather than making a new topic I can ask here since it's related:

I'd like a background color to be different if this time slot is booked by a logged in user. Can this be done?

I've tried <<IF LoggedInRegularUser IN TimeSlot.RegUser Then SHOW SECTION START>> some text here <<SECTION_END>> and this doesn't seem to be working at all. I figured if I could get it to work with some random text in the section I'd be able to put some background stuff there and it should work too. It doesn't matter what I make the parameters in the IF statement it doesn't work. (ie. IF TimeSlot.StartTime='10:00' doesn't work either.)

steve
1) i'd say you need to check the log and see if
..a) the expression is being checked
..b) what the result of the LIRU condition

at least know that the code being checked and see if one of the operands is not what you expect.

I spent HOURS on this issue here 6 months ago in v7:
►Howto◄ Custom Query Template Bug/Section Start/BSV>

jaymer...

You can use Javascript in your custom query templates. Javascript code must be enclosed in hashtag symbols and you can reference data using the following expression data["AttributeName"].

So if your query displays attributes of the Staff object and one of the attributes is Gender and another is Name you can do this:

if(data["Gender") == "M") {

<div class="Male">{Name}</div>

} else {

<div class="Female">{Name}</div>

}

<div class="freshQuotesFlex" >

if( data["daysOld"] > 14 ) {

<span class="redBold">

}

if ( data["daysOld"] > 6 && data["daysOld"] <= 14 ) {

<span class="yellowBold">

}

if ( data["daysOld"] <= 6 ) {

<span class="greenBold">

}

<div class="freshQuotesAge">{age}</div>
</span>