Skip to main content
Skip table of contents

Custom CSS To Highlight Particularly High/Low Values

Now let us extend the default template. Create a new template in the administration, let’s call it HighlightThePeaks. We want to start with the default template, so click "Add default template" to insert the code, then save it.

Next, go to your MinMaxPopulation query and associate it with our new template:

If you refresh your macro the result will still be the same because we only added the default template code by hand. But we intended to enhance it. We specified a population range for our query like [55.000.000,85.000.000] (which includes countries like Germany, UK, France, etc.). In our new template, we will mark the peaks by setting two classes on the peak rows and add some styles depending on the value of $row.Population. The peaks are either “low” (lower than 60m) or “high” (higher than 80m). To visualize this we set two background colors on the table rows with the respective classes.

Our new template looks like this. (Note that for the CSS styles we included the table's class "pocketquery-table". We need this to override the default aui table style - alternatively you could remove the class "aui" and style the table completely on your own.)

CODE
<style>
    table.pocketquery-table tr.high { background: yellow; }
    table.pocketquery-table tr.low { background: lightblue; }
</style>
 
<table class="aui pocketquery-table">
    <thead>
        <tr>
            #foreach ($column in $columns)
            <th>$!column</th>
            #end
        </tr>
    </thead>
    <tbody>
        #foreach ($row in $result)
        <tr class="#if($row.Population < 60000000)low#elseif($row.Population > 80000000)high#end">
            #foreach ($column in $row)
            <td>$!column</td>
            #end
        </tr>
        #end
    </tbody>
</table>

And the result will be this. The “high” rows now have a yellow background, the “low” ones are light blue.

Continue the Continuous Text And Lists

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.