CSS styles and classes

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

By MercerDesign - July 12

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

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 MercerDesign - July 15

Thank you but I can't get that to work, the code I have now that does work using a textfield (text_align and image_align) so you just type in left or right is below, so all I want to do is instead of having to type in you select from a dropdown or select a checkbox. I'm struggling with the if statements etc.

<section class="page-section section-padding" id="content">
<div class="container relative full-width wow fadeInUp" data-wow-delay=".3s" data-wow-duration="1.2s">

<ul class="clearlist section-nav">
<!-- STEP2: Display Records (Paste this where you want your records to be listed) -->
<?php foreach ($about_us_navigationRecords as $record): ?>
<div class="row">
<div class="col-md-12 col-lg-12 mt-md-40 mb-md-40">
<!-- About Project -->
<div class="col-lg-12 text text-center">
<div class="col-lg-6 text-container" style="float:<?php echo htmlencode($record['text_align']) ?>">
<div class="text-sub-heading serif">About Us
<div class="define-sub-hr"><img src="images/Worth-Crest-blue.svg" alt=""/></div>
<h5 class="mb-20 mb-xxs-10 serif"><?php echo htmlencode($record['name']) ?></h5>
<?php echo $record['introduction']; ?>

<div class="mt-40">
<a href="<?php echo htmlencode($record['_link']) ?>" class="btn btn-mod btn-border btn-round btn-medium">Read <em>more</em></a>

<!-- Work Image -->
<div class="col-lg-5 work-full-media mt-0" style="float:<?php echo htmlencode($record['image_align']) ?>">
<?php foreach ($record['image'] as $index => $upload): ?>
<img src="<?php echo htmlencode($upload['urlPath']) ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="<?php echo htmlencode($upload['info3']) ?>">
<?php endforeach ?>
<!-- End Work Image -->
<!-- End About Project -->

<?php endforeach ?>

<?php if (!$about_us_navigationRecords): ?><?php endif ?>


By MercerDesign - July 29

Perfect, thank you

By MercerDesign - July 29

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

By daniel - July 29 - edited: July 29

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

By MercerDesign - August 2

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