CSS styles and classes

8 posts by 2 authors in: Forums > CMS Builder
Last Post: August 2, 2021   (RSS)

Hi, I have a list that displays with a title, some text and an image. I have it so that the first item in the list has the image on the right and the text on the left, then the second item has the image on the left and the text on the right and so on and also each alternate row has a grey background. Each element sits in a div so you can apply a style and class to the div. How can I have it so that these styles are options in a dropdown list in a textfield, I have done it so they are just text fields now so you can manually type the style/class in but I need to have them so you can just select the style from the list? Can anyone help?

By daniel - July 14, 2021

Hi MercerDesign,

If you have a class that handles the styling, you could fairly simply set up a list field that uses the class names as values:

class_left|Align Left

class_right|Align Right

Then within the page just use the value from that field as the classname.

If you need something a bit more complex, you could then also use if statements to check which class is selected to modify other HTML or styles:

if ($exampleRecord['class_field:value'] == 'class_left') {
 // your custom left-align code here

Let me know if that gives you some ideas on how to proceed, or if you have any other questions!


Technical Lead

By daniel - July 28, 2021 - edited: July 28, 2021

Hi MercerDesign,

Thanks for the additional details - since it looks like you just need to enter the float values this should be fairly simple to create.

Your first step would be to turn the text_align and image_align fields into lists with the options as:


Then where you have the HTML to output the field:

<div class="col-lg-6 text-container" style="float:<?php echo htmlencode($record['text_align']) ?>">

You would change this to:

<div class="col-lg-6 text-container" style="float:<?php echo htmlencode($record['text_align:value']) ?>">

And similarly, add ":value" to the image_align field output as well.

If you want to add any additional conditional HTML based on the selections, you can use if statements along the lines of this:

<?php if ($record['text_align:value'] == 'right'): ?>
  This text will display if the text is aligned right
<?php endif; ?>

<?php if ($record['text_align:value'] == 'left'): ?>
  This text will display if the text is aligned left
<?php endif; ?>

I hope that makes sense! Let me know if you have any more questions.


Technical Lead

Perfect, thank you

Actually I thought it had worked but it does not recgonise the value. It says Notice: Undefined index:

By daniel - July 29, 2021 - edited: July 29, 2021

Hi MercerDesign,

Could you copy and paste 1) the entire error message being displayed, and 2) the sections of your code that you changed so that I can have a look?


Technical Lead

Hi, sorry I got it to work by using label instead of value and it has worked.