Jump to content
Opentype Demos
  • Opentype’s IPS F.A.Q.:
    Pages

    Sign in to follow this  

    Multi-color Select Box Badges with Pages


    A nice way to present options with color coding. You might have seen it on the IPS providers page or bug tracker pages made with IPS 4.x. And I also use it here on my frontpage

    Bildschirmfoto 2018-03-08 um 19.39.56.png

    So how is this done?

    First, set up a Pages field with the type “select box” and also activate “Multiple Selection”. 

    Bildschirmfoto 2018-03-08 um 19.51.24.png

    Now add the options you want to offer. Add a key (used as internal identifier) and a value, which is what will be shown to the users. 

    Bildschirmfoto 2018-03-08 um 19.52.11.png

    Now head over to the Display Options tab. For “Listing View Format” and “Display View Format” we choose “Custom”. This opens a blank field to input our custom code. First, we should check if there even was a selection made for the entry. We do this by wrapping everything with:

    {{if $formValue}}
    // more to come
    {{endif}}

    By the way: $formValue is the raw field content stored for this field. 

    Now inside that IF query, we can check for specific keys and apply the color badges. But a simple IF query won’t work since we have a multi-select box field. We need to loop through all possible select entries the user might have chosen. And they are stored as comma-separed keys. So to loop through them, we do this:

    {{$items=explode(',',$formValue);}}
    {{foreach $items as $item}}
    // more to come
    {{endforeach}

    Easy enough! Now we finally check for key values, like this: 

    {{if $item=="pagestemplate"}}
    <span class='ipsBadge ipsBadge_new'>Pages database template</span>
    {{elseif $item=="pagesblocks"}}
    <span class='ipsBadge ipsBadge_style2'>Pages block template</span>
    {{endif}}

    If there is a key with the values “pagestemplate”, we output an IPS badge with the style “ipsBade_new” showing the words “Pages database template”. Then we check for the next key. In the example above that’s “pagesblocks”. 

    Now let’s put it all together. This is the final code you can put in your “Custom” box. You just need to adjust the key values and the output text.

    {{if $formValue}}
    {{$items=explode(',',$formValue);}}
    {{foreach $items as $item}}
    	{{if $item=="pagestemplate"}}
    		<span class='ipsBadge ipsBadge_positive'>Pages database template</span>
    	{{elseif $item=="pagesblocks"}}
    		<span class='ipsBadge ipsBadge_negative'>Pages block template</span>
    	{{elseif $item=="standalonewidget"}}
    		<span class='ipsBadge ipsBadge_style2'>Standalone widget</span>
    	{{elseif $item=="coreextension"}}
    		<span class='ipsBadge ipsBadge_intermediary'>Core/theme extension</span>
    	{{endif}}
    {{endforeach}}
    {{endif}}

    The example above uses four options. You can extend this easily to seven options, since there are seven pre-defined badges:

    • ipsBadge_new
    • ipsBadge_style2
    • ipsBadge_warning
    • ipsBadge_positive
    • ipsBadge_negative
    • ipsBadge_neutral
    • ipsBadge_intermediary

    If you want more than seven colors, you would have to add your own CSS classes instead or override the colors locally like this: 

    <span class='ipsBadge' style='background-color:#FF0000'>Pages database template</span>

     

    Edited by admin


    Sign in to follow this  



Content I don’t like to support

symbols.png I love seeing my Marketplace files make IPS communities more useful or engaging. However, there is also content I personally do not want to support. This includes of course all illegal or otherwise shady/immoral activities. On top of that, please don’t use my products if your site promotes conspiracy theories, guns and similar objects or ideologies causing harm to people, religion, so-called “alternative” medicine, extreme political views (from whichever political side). Thanks for understanding. 

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. You can also check out the Privacy Policy