I made some adjustments in the menu, hope you like

Helo.

I made some adjustments in the menu css,

Basically I modified the size and spacing of the text.
I liked it because I have more options available without the need to scroll.
Another problem I faced was that in my language some texts did not fit and that bothered me.

My amendments are commented

The modified file was “dashboard.css” that is in the “\theme\default\css

hope you like :slight_smile:

/*
* Base structure
*/

/* Base */
html {
  overflow-y: scroll;
}
body {
  background: #f3f3f3;
  color: #333333 !important;
}
.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.row > div {
  margin-bottom: 15px;
}
.alerts-container .alert:last-child {
  margin-bottom: 0px;
}
#page-wrapper {
  padding-left: 70px;
  height: 100%
}
#sidebar-wrapper {
  margin-left: -150px;
  left: -30px;
  width: 180px;
  position: fixed;
  height: 100%;
}
.green {
  background: #23ae89 !important;
}
.blue {
  background: #2361ae !important;
}
.orange {
  background: #d3a938 !important;
}
.red {
  background: #ae2323 !important;
}
.form-group .help-block.form-group-inline-message {
  padding-top: 5px;
}
div.input-mask {
  padding-top: 7px;
}

/* Sidebar */
ul.sidebar {
  position: absolute;
  top: 0;
  bottom: 45px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-indent: 20px;
  overflow-x: hidden;
  overflow-y: auto;
}
#page-wrapper:not(.active) ul.sidebar {
  bottom: 0;
}
ul.sidebar li a {
  color: #fff;
  display: block;
/*  float: left;  */  /*Removed by Guilherme Delai*/
  text-decoration: none;
  width: 180px;
}
ul.sidebar .sidebar-main {
  height: 65px;
}
ul.sidebar .sidebar-main a {
  font-size: 28px;
  line-height: 60px;
}
ul.sidebar .sidebar-main .menu-icon {
  float: right;
  font-size: 18px;
  padding-right: 28px;
  line-height: 60px;
}
ul.sidebar .sidebar-title {
  font-size: 15px;	/*Changed by Guilherme Delai*/
  height: 35px;
  line-height: 50px;
  text-transform: uppercase;
}
#page-wrapper:not(.active) ul.sidebar .sidebar-title {
  display: none;
}
#page-wrapper:not(.active) ul.sidebar .sidebar-title.separator {
  display: block;
  height: 2px;
  margin: 13px 0;
}
ul.sidebar .sidebar-list {
  height: 30px;   /*Changed by Guilherme Delai*/
}
ul.sidebar .sidebar-list a {
  text-indent: 18px;  /*Changed by Guilherme Delai*/
  font-size: 13px;   /*Changed by Guilherme Delai*/
  color: #b2bfdc;
  line-height: 30px;   /*Changed by Guilherme Delai*/
}
ul.sidebar .sidebar-list a:hover {
  color: #fff;
  border-left: 3px solid #e99d1a;
  text-indent: 18px;  /*Changed by Guilherme Delai*/
}
#page-wrapper:not(.active) ul.sidebar .sidebar-list a:hover span {
  border-left: 3px solid #e99d1a;
  text-indent: 22px;
}
ul.sidebar .sidebar-list .menu-icon {
  float: right;
  padding-right: 29px;
  line-height: 40px;
  width: 70px;
}
ul.sidebar .sidebar-list a:hover .menu-icon {
  text-indent: 25px;
}
.sidebar-footer {
  position: absolute;
  height: 40px;
  bottom: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  text-align: center;
}
#page-wrapper:not(.active) .sidebar-footer {
  display: none;
}
.sidebar-footer div a {
  color: #b2bfdc;
  font-size: 12px;
  line-height: 43px;
}
.sidebar-footer div a:hover {
  color: #ffffff;
  text-decoration: none;
}

/* Main Content */
#content-wrapper {
  padding-left: 0;
  margin-left: 0;
  width: 100%;
  height: auto;
}
@media only screen and (min-width:561px){
  #page-wrapper.active {
    padding-left: 180px;
  }
}
@media only screen and (max-width:560px){
  #page-wrapper.active {
    padding-left: 70px;
  }
}
#page-wrapper.active #sidebar-wrapper {
  left: 150px;
}

/* Header */
.row.header {
  height: 60px;
  background: #273759;
  margin-bottom: 15px;
}
.row.header > div:last-child {
  padding-right: 0;
}
.row.header .meta .page {
  font-size: 17px;
  padding-top: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media only screen and (min-width : 993px) {
  .row.header .meta .page {
    width: 380px;
  }
}
@media only screen and (max-width : 992px) {
  .row header .meta .page {
    width: 180px;
  }
}
.row.header .meta .breadcrumb-links {
  font-size: 10px;
}
.row.header .login a {
  padding: 18px;
  display: block;
}
.row.header .user > .item {
  width: 65px;
  height: 60px;
  float: right;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}
.row.header .user > .item a {
  color: #919191;
  display: block;
}
.row.header .user > .item i {
  font-size: 20px;
  line-height: 55px;
}
.row.header .user > .item img {
  width: 40px;
  height: 40px;
  margin-top: 10px;
  border-radius: 2px;
}
.row.header .user > .item ul.dropdown-menu {
  border-radius: 2px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.05);
  box-shadow: 0 6px 12px rgba(0,0,0,.05);
}
.row.header .user > .item ul.dropdown-menu:before {
  position: absolute;
  top: -7px;
  right: 23px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}
.row.header .user > .item ul.dropdown-menu:after {
  position: absolute;
  top: -6px;
  right: 24px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: '';
}
.row.header .user > .item ul.dropdown-menu .dropdown-header {
  text-align: center;
}
.row.header .user > .item ul.dropdown-menu li.link {
  text-align: left;
}
.row.header .user > .item ul.dropdown-menu li.link a {
  padding-left: 7px;
  padding-right: 7px;
}
.row.header .user > .item ul.dropdown-menu div {
  padding: 15px;
}

/* Widgets */
.widget {
  background: #ffffff;
  border: 1px solid transparent;
  border-radius: 2px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  border-color: #e9e9e9;
}
.widget .widget-title {
  color: #767676;
  background-color: #f6f6f6;
  padding: 10px 15px;
  border-bottom: 1px solid #e9e9e9;
  line-height: 30px;
}
.widget .widget-title i {
  margin-right: 5px;
}
.widget .widget-title input {
  width: 25%;
}
/* Reset */
.widget .widget-title .bootstrap-select-searchbox input {
  width: 100%;
}

.widget .widget-body {
  padding: 20px;
}
.widget .widget-body table thead * {
  font-size: 14px !important;
}
.widget .widget-body table tbody * {
  font-size: 13px !important;
}
.widget .widget-body.no-padding .error, .widget .widget-body.no-padding .message {
  padding: 20px;
}
.widget .widget-body .error {
  color: #ff0000;
}
.widget .widget-body table thead {
  background: #fafafa;
}
.widget .widget-body.large {
  height: 350px;
  overflow-y: auto;
}
.widget .widget-body.medium {
  height: 250px;
  overflow-y: auto;
}
.widget .widget-body.small {
  height: 150px;
  overflow-y: auto;
}
.widget .widget-body.no-padding {
  padding: 0;
}
.widget .widget-body button {
  margin-left: 5px;
}
.widget .widget-body div.alert {
  margin-bottom: 10px;
}
.widget .widget-icon {
  background: #30426a;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  margin-right: 15px;
}
.widget .widget-icon i {
  line-height: 66px;
  color: #ffffff;
  font-size: 30px;
}
.widget .widget-content .title {
  font-size: 28px;
  display: block;
}

/* Blue */
ul.sidebar .sidebar-main a,
.sidebar-footer, 
ul.sidebar .sidebar-list a:hover,
#page-wrapper:not(.active) ul.sidebar .sidebar-title.separator {
  /* Sidebar header and footer color */
  background: #273759;
}
#sidebar-wrapper {
  /* Sidebar background color */
  background: #30426a;
}
ul.sidebar .sidebar-title {
  /* Sidebar title text colour */
  color: #627cb7;
}

.news-widget div.article {
  padding-top: 15px;
}
1 Like

Thank you for submitting your changes! We like changes :smile:

Have you tried the “compact” theme that comes with the application - I think it might already do this.

Thanks,
Dan

1 Like

Dear Dan,
A suggestion if there is a drop down to choose the theme from would be highly appreciated…
just to know available themes…

just a thought…

thanks

Dan,
That careless, I had not testato this topic it was much smaller than the change I made.
Thank you for showing me.

1.8 already has that:


You are welcome - it’s still nice to see your contribution, thank you :slight_smile:

1 Like