Add CSS class based on CMS conditional value

Would be great if we could add CSS classes to a dynamic item based upon a conditional value of a Collection Field value

  • Jason Leocata
  • Jan 17 2017
CMS
  • Maithe van Luijk commented
    22 Jan 01:23pm

    I've been trying every which way from friday to add a different font to headers + body based on which CMS item is featured.

    I've tried a script that would add a class (many ways)
    I've tried Shahroze Mirza's suggestion (so smart).

    One of these should work, right?? I don't understand what I'm doing wrong. Is there anyone who'd be able to take a look with me?

    It's a project for a foundation, I'm doing this because I believe in the cause, but I"m getting ready to pull my hear out... :(

  • Shahroze Mirza commented
    4 May, 2023 07:23am

    This is possible if you use CMS with some custom code. Here is how I achieved it.

    1. Create a global class for the style you want.

    2. Create a CMS field and add that class name inside it. You can also create a separate CMS for all the classes in the project as well if you want more than one class. Using multiple classes will require a multi-reference field.

    3. Add an embed field in your page and in the class attribute you can add the class CMS field you made.

    4. You can then apply a condition using a switch or by the status of any field and based on that status you can add or remove the class you want.

    Example:

    bg-black:{ background-color: black; }

    CMS Field name: Bg Color
    CMS Field value: bg-black

    <div class="Bg Color">Lorem Ipsum</div>

    NOTE: This will work for a CMS collection page, not for a static page. For static page you might be able to something similar inside a collection list but I have not implemented it yet.

  • IT Services commented
    4 May, 2023 07:13am

    This is possible if you use CMS with some custom code. Here is how you I achieved it.

    1. Create a global class for the style you want.

    2. Create a CMS field and add that class name inside it. You can also create a separate CMS for all the classes in the project as well if you want more than one class. Using multiple classes will require a multi-reference field.

    3. Add an embed field in your page and in the class attribute you can add the class CMS field you made.

    4. You can then apply a condition using a switch or by the status of any field and based on that status you can add or remove the class you want.

    Example:
    bg-black:{
    background-color: black;
    }

    CMS Field name: Bg Color
    CMS Field value: bg-black

    <div class="Bg Color">Lorem Ipsum</div>

    NOTE: This will work for a CMS collection page, not for a static page. For static page you might be able to something similar inside a collection list but I have not implemented it yet.

  • Sean Tubridy commented
    15 Apr, 2022 07:06pm

    Really could use this to style different classes of items differently. Surprised Finsweet or someone else hasn't come up with a workaround.

  • Hans Gijsbers commented
    29 Mar, 2022 08:17pm

    Still missing, why?

  • Timothy Luke commented
    22 Jul, 2020 10:12pm

    This seems so obviously integral, am I missing something?

  • Derrick Threatt commented
    20 Jul, 2019 05:55pm

    Upvote

  • Den Up commented
    16 Jun, 2019 01:03am
    Yes, it is very important
  • Nick Merrigan commented
    28 Mar, 2019 06:17pm

    Yes please!

  • Josh Chamberlain commented
    2 Nov, 2018 11:12pm

    Yes. For example, a CMS-powered list of features, and ones with the "Important" label get a different color background and a drop shadow.

  • Jon So commented
    21 May, 2018 10:09pm

    We need this very badly to use to show/hide content on multi-language sites.

  • Diarmuid Sexton commented
    18 Jan, 2017 11:10am

    This would be great for styling different objects by their category. It would also be great for the mix-it-up plugin - as well as many other plugins i'm sure

  • +66