CSS styles and classes

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,

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>

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,

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

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!

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