[SOLVED] how to set a field to different colour in list

I have two fields - usually empty - that I would like to be in a different colour (red) if displayed in a list. Please advise how to do this.

Use CSS, all fields have a unique ID or class added to their field row. Right click and inspect the field on your userlist and review its classes or ID carefully. Example as follows.

Which .css file and where do I find it and how?

I tried looking in the Joomla template editor but that only has template.css within my site's adopted style file.

The change I am after is:

.cbUserListFL_FIELD_NAME {
color: red;
}

I added your code to template.css, and added the ".cbUserListFL_FIELD_NAME" to the css box in the field definition but it made no difference.

Sorry but tutorial #31 didn't show how to find the css file. Scrabbling around here.

Which .css file and where do I find it and how?

Custom CSS should be added to your Joomla template CSS file. Typically your Joomla template should have a way of supplying custom css either in custom.css or override.css, but that's entirely dependent on what template you're using.

I added your code to template.css, and added the ".cbUserListFL_FIELD_NAME" to the css box in the field definition but it made no difference.

You need to change FIELD_NAME to the name of your field. It is not a literal working example.

Thanks Kyle - that worked beautifully.

May I suggest one of Nick's brilliant tutorials to illustrate for us newbies this exact problem as a starter in .CSS field formatting.

I have to say this is a brilliant product!

There's thousands of resources online for learning CSS. We've no plans to provide one our self. CB styling, Joomla styling, etc.. it's all CSS basics. So any resources like the below can help learn CSS quite effectively.

www.w3schools.com/css/default.asp

developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started

Where you put the CSS is basically the only specific thing to the platform. For that I always recommend in your Joomla template. Especially if your template provides a parameter to supply it or supports a custom CSS file being loaded as it removes the risk of upgrades causing your changes to be lost. We can't really make a tutorial for this either as it entirely depends on your template.

Finding a CSS class or ID is done using your browsers developer console. This is typically opened by pressing F12 or right clicking an element on the page then clicking inspect in the context menu.