Hi Mike,
You can make all of those changes in the projects SASS files.
For list view changes follow this path
theme/styles/sass/lib/components/_listviews.scss
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) */
.mx-button.mx-listview-clear-button {
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;
}
&:focus,
&: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.
theme/styles/sass/lib/components/_variables.scss
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.
theme/styles/sass/lib/buildingblocks/pageheader.scss
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!