CSS styles and classes

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

By MercerDesign - July 12, 2021

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:

<?php
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!

Thanks,

Daniel
Technical Lead
interactivetools.com

By MercerDesign - July 15, 2021

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): ?>
<li>
<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>
<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>
</div>
</div>

<!-- 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 ?>
</div>
<!-- End Work Image -->
</div>
<!-- End About Project -->
</div>
</div>
</li>

<?php endforeach ?>
</ul>

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

</section>

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:

left|Left
right|Right

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.

Thanks,

Daniel
Technical Lead
interactivetools.com

By MercerDesign - July 29, 2021

Perfect, thank you

By MercerDesign - July 29, 2021

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?

Thanks!

Daniel
Technical Lead
interactivetools.com