# Ui\_list design css template help

**URL:** <https://discourse.nodered.org/t/ui-list-design-css-template-help/64235>\
**Category:** Dashboard\
**Created:** [22 June 2022 12:30 UTC](https://discourse.nodered.org/t/ui-list-design-css-template-help/64235 "2022-06-22T12:30:01Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![nachoislas](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nachoislas/32/62937_2.png) [@nachoislas](https://discourse.nodered.org/u/nachoislas)\
**Post date:** [22 June 2022 12:30 UTC](https://discourse.nodered.org/t/ui-list-design-css-template-help/64235/1 "2022-06-22T12:30:01Z")

</div>

Hi, i am wondering if it's posible to give some good designs to ui\_list.  
This is my current flow:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/5/e5d1d452720e8d6b244f19b52d7ee52e7eafd0ee.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/1/91c374cd33220401d8b73f74f7d9d01be9d0cc70.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/6/06fa988acf7364e4ff93423f242c0e75bfa06e4e.png)  
I've tried to use a template with different designs but i cant get what i want.

```auto
<style>
/*.md-secondary-container
{
    background-color:#074ea7!important;
    color:#074ea7!important;
    border-color:#074ea7!important;
    border-radius: 12px!important;
}

.md-3-line ._md-button-wrap ._md .md-clickable 
{
    background-color:#074ea7!important;
    color:#074ea7!important;
    border-color:#074ea7!important;
    border-radius: 12px!important;
}

.md-button .md-no-style
{
    background-color:#074ea7!important;
    color:#074ea7!important;
    border-color:#074ea7!important;
    border-radius: 12px!important;  
}

.md-list-item-inner 
{
    background-color:#074ea7!important;
    color:#074ea7!important;
    border-color:#074ea7!important;
    border-radius: 12px!important;
}
 
.h3 .md-list-item-text 
{
    background-color:#074ea7!important;
    color:#074ea7!important;
    border-color:#074ea7!important;
    border-radius: 12px!important;
}

.md-no-style .md-button .md-ink-ripple 
{
    background-color:#074ea7!important;
    color:#074ea7!important;
    border-color:#074ea7!important;
    border-radius: 12px!important;
}
*/
</style>

```

Whit this template i was able to get this:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/3/c316343bfc04cb19b574f4c1879e8b89d114ac5b.png)  
The idea is to center the text in the list, give a little more space between the title and description and also change the background color of the list.  
Thanks!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [22 July 2022 12:30 UTC](https://discourse.nodered.org/t/ui-list-design-css-template-help/64235/2 "2022-07-22T12:30:13Z")

</div>

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