Atlas UI Customization?

I am working with an app that uses Atlas UI and want to do things like modify the border color used in between items in ListViews modify the background color used when a grid or ListView is striped eliminate the gray gradient underneath the top menubar I have searched the Atlas site and don't see anything that describes how to do these deeper customizations to Atlas.  Also, I don't think the Web Modeler exposes customization for these types of things.  Are there articles or documentation that describe how to customize Atlas in these ways?
1 answers

Hi Mike,

You can make all of those changes in the projects SASS files.


For list view changes follow this path


Either create a custom class or edit the mx-listview class so all listviews are changed


1. Modify the border color used in between items. 

in mx-listview there is a nested class called "mx-listview-item" where you can change this. I added a comment in the below code.

.mx-listview {
    // Remove widget padding
    padding: 0;

    /* Clear search button (overrides load more button stying) */ {
        width: auto;

    // Search bar
    .mx-listview-searchbar {
        margin-bottom: $gutter-size;

    /* Load more button */
    & > .mx-button {
        width: 100%;
        margin: 10px auto;
    .mx-listview-list {
        margin: 0;
        .mx-listview-empty {
            border-style: none;
            background-color: transparent;
    .mx-listview-item {
        @include transition();
        padding: $listview-padding-top $listview-padding-right $listview-padding-bottom $listview-padding-left;
        border-width: 1px 0 0 0;
        border-style: solid;

// The border color is set right here. You can just change it to whatever color you want.
        border-color: $grid-border-color;
        background-color: $grid-bg;

        &:first-child {
            border-radius: 0; // Reset mxui listview style
        &:last-child {
            border-bottom: 1px solid $grid-border-color;
            border-radius: 0; // Reset mxui listview style
        &:nth-child(2n + 1) {
            background-color: $grid-bg;
        &:hover {
            background-color: $grid-bg;
        &:active {
            background-color: $grid-bg-hover;
        &.selected {
            background-color: $grid-bg-selected !important;
    .mx-layoutgrid {
        padding-top: 0 !important;
        padding-bottom: 0 !important;



or a custom class

.mx-listview-custom {
    .mx-listview-item {

//add whatever color you want here and just add this class to your listview
        background-color: red;



2. Modify background color used when a grid or listview is striped. 

This can be changed in the variables file. 


The variable you want to change is called "$grid-bg-striped". Or you can create a new variable and use it for a custom listview or datagrid class (that way not all striped grids are changed). There is also a custom variables file and im not too sure when custom vs default variable file is used. 


3. eliminate the grey gradient underneath the top menubar

You would want to change the pageheader classes.



The atlas default homepage uses the class "pageheader". I added a comment in the below snippet.

.pageheader {
    border-bottom: 1px solid $border-color-default;

// you can change the variable that is used right here or just change the color.
    background: $header-bg-color;


I recommend creating custom class whenever you can rather than changing the default classes. 


Hope this helps!