# Multiple CSS class in visualisation builder markdown

**URL:** <https://discuss.elastic.co/t/multiple-css-class-in-visualisation-builder-markdown/189165>\
**Category:** Kibana\
**Created:** [July 5, 2019, 8:57pm UTC](https://discuss.elastic.co/t/multiple-css-class-in-visualisation-builder-markdown/189165 "2019-07-05T20:57:39Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![pisxx](https://avatars.discourse-cdn.com/v4/letter/p/e9a140/32.png) [@pisxx](https://discuss.elastic.co/u/pisxx)\
**Post date:** [July 5, 2019, 8:57pm UTC](https://discuss.elastic.co/t/multiple-css-class-in-visualisation-builder-markdown/189165/1 "2019-07-05T20:57:39Z")

</div>

Hi,

I wanted to setup visualisation with multiple metric each with other color and if possible do some logic on them, like if metric \< 0, use different CSS class.

So far I was able to do it using something like that

```auto
h5:nth-of-type(1) {
    background-color: blue; 
    display: table-cell;
    padding: 0.5em 0.5em ;
    text-align: left;
    color: black
}

```

this allows me to format each heading differently but if I would need to move them then this will fall apart.

I wanted to use something like this

`.sev_low { background-color: red }`

and access that in markdown later.

With conditionlas I was wondering if there's an option to check for example if metric is below 10 if so use different CSS class.  
With handlebars I was only able to do

```auto
{{#if metric}}
        do_stuff
{{/if}}

```

{{gt}} or {{compare}} helpers do not work for me.

Is it possible to do what I am trying to using what's in Kibana now?

Best Regards,

---

<div class="post-metadata">

**Author:** ![Marius\_Dragomir](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marius_dragomir/32/42087_2.png) [@Marius\_Dragomir](https://discuss.elastic.co/u/Marius_Dragomir)\
**Post date:** [July 12, 2019, 9:46am UTC](https://discuss.elastic.co/t/multiple-css-class-in-visualisation-builder-markdown/189165/2 "2019-07-12T09:46:02Z")

</div>

Hello,

Wouldn't the Color option in the field formatting in Kibana solve your problem without having to resort to changing CSS?  
You can find it in the "Management - Index patterns" page. Next to each field there's an edit button and there you have the Format option.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [August 9, 2019, 9:46am UTC](https://discuss.elastic.co/t/multiple-css-class-in-visualisation-builder-markdown/189165/3 "2019-08-09T09:46:05Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.