SuiteCRM SuiteP Theme Readability Solutions

Facebooktwittergoogle_pluspinterestby feather

Those that upgrade or simply download and install SuiteCRM Version 7.9.7 are in for a shocking surprise. It's hard as heck to use. At least for people who don't have hawk-eye vision and/or don't want to struggle trying to see different shades of gray, or light colored red on a gray background. SuiteCRM is for the most part a great product and base to build a CRM with, albeit with the latest theme, it feels as if the adults left just long enough to allow the kids to run wild for just a little too long.

I downloaded the SuitePImproved theme which helps a lot with all the wasted space, albeit it wasn't enough to make it totally usable. I then went into the style CSS (which is updated/created by the SCSS files I believe) and manually edited a "bunch" of font sizes and colors. I didn't spend a week on this, and there's a lot to be desired, albeit if someone wants a quick fix to keep the ship steaming, or if I need the file again because the style.css file was recreated by the system, I have it here.

Be sure to copy and retain your first unedited file in case the belong does "something wrong" to your system. That should go unsaid because if you're edited files and not backing up first, you really have no business under the hood in the first place, albeit I feel compelled to say so and to be sure, I will bear zero, nada, none responsibility if you use or even look at the below code.

I still want to make edits and improvements, so if you're also facing the same problem and want to share the work to make it better together, please reach out to me.

 

The file is located in themes/SuitePImproved/css/style.css

 

/**Style**/

/*** MAIN ***/

html {

  height: 100%; }

body {

  font-family: "Lato", Lato, Arial, sans-serif;

  font-size: 16px;

  background: #FFFFFF;

  color: #000000;

  margin: 0;

  overflow: auto;

  height: 100%; }

img, svg {

  image-rendering: auto; }

h3 {

  font-size: 16px;

  font-weight: bold; }

a {

  color: #B40101; }

a:hover {

  color: #ff0000; }

h4 {

  padding-left: 4px;

  margin-bottom: 2px; }

h5 {

  padding-left: 4px;

  margin-bottom: 2px; }

hr {

  background-color: #FFFFFF;

  color: #F8F5F5;

  border: 0;

  border-top: 1px solid #f6f2f2;

  clear: both;

  height: 1px; }

a:link {

  text-decoration: underline; }

a:visited {

  text-decoration: underline; }

a:hover {

  text-decoration: underline; }

.studiolink svg, .studiolink img {

  width: 30px;

  height: auto; }

#ajaxHeader {

  float: left; }

.bootstrap-container.col-sm-offset-3 {

  background-color: #FFFFFF;

  margin-top: 110px; }

.bootstrap-container {

  background-color: #FFFFFF;

  margin-top: 110px; }

  .bootstrap-container .dropdown-menu em {

    padding: 0 10px 0 10px; }

  .bootstrap-container .dropdown-menu em a {

    color: #ff0000; }

/* ??? */

.mask {

  z-index: 3 !important; }

#ajaxloading_c {

  z-index: 11 !important; }

::selection {

  background: #ff0000;

  color: #FFFFFF; }

/* Safari */

::-moz-selection {

  background: #ff0000;

  color: #FFFFFF; }

/* Firefox */

@media (max-width: 750px) {

  .bootstrap-container.col-sm-offset-3 {

    margin-top: 110px; }

  .bootstrap-container {

    margin-top: 110px; } }

@media (max-width: 1130px) {

  .bootstrap-container.col-md-offset-2 {

    margin-left: 0; }

  .col-md-10, .bootstrap-container {

    width: 100%; } }

.content {

  margin: 0 0 0 0; }

@media (max-width: 750px) {

  .content {

    margin: 0 0 0 0;

    width: 100%; } }

/**** SIDEBAR ****/

.sidebar {

  display: block;

  position: fixed;

  top: 90px;

  bottom: 0;

  left: 0;

  background-color: #272829;

  overflow-x: hidden;

  overflow-y: auto;

  z-index: 1000; }

  .sidebar .actionMenuSidebar {

    margin-bottom: 24px; }

  .sidebar .actionMenuSidebar_top {

    display: none; }

  .sidebar .actionMenuSidebar .recent_h3 {

    display: none; }

  .sidebar .actionMenuSidebar ul {

    list-style-type: none; }

  .sidebar .actionMenuSidebar li a .side-bar-Create, .sidebar .actionMenuSidebar li a .side-bar-Add {

    background-image: url("../../../../themes/SuiteP/images/sidebar/Add.png");

    background-image: url("../../../../themes/SuiteP/images/sidebar/Add.svg"); }

  .sidebar .actionMenuSidebar li a .side-bar-Create_Contact_Vcard, .sidebar .actionMenuSidebar li a .side-bar-Create_Lead_Vcard {

    background-image: url("../../../../themes/SuiteP/images/sidebar/Create_Contact_Vcard.png");

    background-image: url("../../../../themes/SuiteP/images/sidebar/Create_Contact_Vcard.svg"); }

  .sidebar .actionMenuSidebar li a .side-bar-Create_Group_User {

    background-image: url("../../../../themes/SuiteP/images/sidebar/Create_Group_User.png");

    background-image: url("../../../../themes/SuiteP/images/sidebar/Create_Group_User.svg"); }

  .sidebar .actionMenuSidebar li a .side-bar-Create_Person_Form {

    background-image: url("../../../../themes/SuiteP/images/sidebar/Create_Person_Form.png");

    background-image: url("../../../../themes/SuiteP/images/sidebar/Create_Person_Form.svg"); }

  .sidebar .actionMenuSidebar li a .side-bar-Create_Security_Group {

    background-image: url("../../../../themes/SuiteP/images/sidebar/Create_Security_Group.png");

    background-image: url("../../../../themes/SuiteP/images/sidebar/Create_Security_Group.svg"); }

  .sidebar .actionMenuSidebar li a .side-bar-Import {

    background-image: url("../../../../themes/SuiteP/images/sidebar/Import.png");

    background-image: url("../../../../themes/SuiteP/images/sidebar/Import.svg"); }

  .sidebar .actionMenuSidebar li a .side-bar-Import_Line_Item {

    background-image: url("../../../../themes/SuiteP/images/sidebar/Import_Line_Item.png");

    background-image: url("../../../../themes/SuiteP/images/sidebar/Import_Line_Item.svg"); }

  .sidebar .actionMenuSidebar li a .side-bar-List_Maps {

    background-image: url("../../../../themes/SuiteP/images/sidebar/List_Maps.png");

    background-image: url("../../../../themes/SuiteP/images/sidebar/List_Maps.svg"); }

  .sidebar .actionMenuSidebar li a .side-bar-Quick_Radius_Map {

    background-image: url("../../../../themes/SuiteP/images/sidebar/Quick_Radius_Map.png");

    background-image: url("../../../../themes/SuiteP/images/sidebar/Quick_Radius_Map.svg"); }

  .sidebar .actionMenuSidebar li a .side-bar-Resource_Chart {

    background-image: url("../../../../themes/SuiteP/images/sidebar/Resource_Chart.png");

    background-image: url("../../../../themes/SuiteP/images/sidebar/Resource_Chart.svg"); }

  .sidebar .actionMenuSidebar li a .side-bar-Role_Management {

    background-image: url("../../../../themes/SuiteP/images/sidebar/Role_Management.png");

    background-image: url("../../../../themes/SuiteP/images/sidebar/Role_Management.svg"); }

  .sidebar .actionMenuSidebar li a .side-bar-Schedule_Call {

    background-image: url("../../../../themes/SuiteP/images/sidebar/Schedule_Call.png");

    background-image: url("../../../../themes/SuiteP/images/sidebar/Schedule_Call.svg"); }

  .sidebar .actionMenuSidebar li a .side-bar-Schedule_Meeting {

    background-image: url("../../../../themes/SuiteP/images/sidebar/Schedule_Meeting.png");

    background-image: url("../../../../themes/SuiteP/images/sidebar/Schedule_Meeting.svg"); }

  .sidebar .actionMenuSidebar li a .side-bar-Security_Groups {

    background-image: url("../../../../themes/SuiteP/images/sidebar/Security_Groups.png");

    background-image: url("../../../../themes/SuiteP/images/sidebar/Security_Groups.svg"); }

  .sidebar .actionMenuSidebar li a .side-bar-Security_Suite_Settings {

    background-image: url("../../../../themes/SuiteP/images/sidebar/Security_Suite_Settings.png");

    background-image: url("../../../../themes/SuiteP/images/sidebar/Security_Suite_Settings.svg"); }

  .sidebar .actionMenuSidebar li a .side-bar-Setup_Email {

    background-image: url("../../../../themes/SuiteP/images/sidebar/Setup_Email.png");

    background-image: url("../../../../themes/SuiteP/images/sidebar/Setup_Email.svg"); }

  .sidebar .actionMenuSidebar li a .side-bar-Today {

    background-image: url("../../../../themes/SuiteP/images/sidebar/Today.png");

    background-image: url("../../../../themes/SuiteP/images/sidebar/Today.svg"); }

  .sidebar .actionMenuSidebar li a .side-bar-View_Project_Tasks {

    background-image: url("../../../../themes/SuiteP/images/sidebar/View_Project_Tasks.png");

    background-image: url("../../../../themes/SuiteP/images/sidebar/View_Project_Tasks.svg"); }

  .sidebar .actionMenuSidebar li a .side-bar-View_Create_Email_Templates {

    background-image: url("../../../../themes/SuiteP/images/sidebar/View_Create_Email_Templates.png");

    background-image: url("../../../../themes/SuiteP/images/sidebar/View_Create_Email_Templates.svg"); }

  .sidebar .actionMenuSidebar li a.side-bar-View, .sidebar .actionMenuSidebar li a .side-bar-List {

    background-image: url("../../../../themes/SuiteP/images/sidebar/View.png");

    background-image: url("../../../../themes/SuiteP/images/sidebar/View.svg"); }

  .sidebar .actionMenuSidebar li a .side-bar-View_Diagnostics {

    background-image: url("../../../../themes/SuiteP/images/sidebar/View_Diagnostics.png");

    background-image: url("../../../../themes/SuiteP/images/sidebar/View_Diagnostics.svg"); }

  .sidebar .actionMenuSidebar li a .side-bar-View_Email_Templates {

    background-image: url("../../../../themes/SuiteP/images/sidebar/View_Email_Templates.png");

    background-image: url("../../../../themes/SuiteP/images/sidebar/View_Email_Templates.svg"); }

  .sidebar .actionMenuSidebar li a .side-bar-View_Process_Audit {

    background-image: url("../../../../themes/SuiteP/images/sidebar/View_Process_Audit.png");

    background-image: url("../../../../themes/SuiteP/images/sidebar/View_Process_Audit.svg"); }

  .sidebar .actionMenuSidebar li a .side-bar-View_Process_Tasks {

    background-image: url("../../../../themes/SuiteP/images/sidebar/View_Process_Tasks.png");

    background-image: url("../../../../themes/SuiteP/images/sidebar/View_Process_Tasks.svg"); }

  .sidebar .actionMenuSidebar li a {

    display: block;

    font-size: 16px;

    background-color: #276EA8;

    color: #FFFFFF;

    margin: 0 0 1px 0;

    clear: both; }

  .sidebar .actionMenuSidebar ul li a:hover {

    background-color: #3C3E3F;

    color: #FFFFFF; }

  .sidebar .actionMenuSidebar li a div {

    display: block;

    text-wrap: normal; }

  .sidebar .actionMenuSidebar li a .actionmenulink {

    padding: 16px 8px 16px 0;

    line-height: 24px;

    width: 100%;

    min-height: 48px; }

  .sidebar .recentlyViewedSidebar {

    margin-bottom: 12px;

    float: left;

    width: 100%; }

  .sidebar .recently_viewed_link_container_sidebar {

    font-size: 16px; }

  .sidebar .side-bar-action-icon {

    background-position: 0 8px;

    background-repeat: no-repeat;

    background-size: 32px;

    margin-left: 12px;

    float: left;

    width: 40px;

    /* effects link text position */

    height: 48px;

    vertical-align: middle; }

  .sidebar .favoritelinks {

    width: 100%; }

  .sidebar .recentlinks {

    width: 100%; }

  .sidebar .favoritelinks img {

    margin-right: 5px; }

  .sidebar .recentlinks img {

    margin-right: 5px; }

.button-toggle-collapsed {

  left: 0; }

.button-toggle-collapsed {

  position: fixed;

  top: 100px;

  background: #3A3C3D;

  background-image: none, url("../../../../themes/SuiteP/images/p_show_sidebar.svg"), url("../../../../themes/SuiteP/images/p_show_sidebar.png");

  background-position: center center;

  background-repeat: no-repeat;

  border-top-right-radius: 3px;

  border-bottom-right-radius: 3px;

  width: 30px;

  height: 30px;

  z-index: 1000; }

.button-toggle-expanded {

  position: fixed;

  top: 100px;

  background: #778591;

  background-image: none, url("../../../../themes/SuiteP/images/p_hide_sidebar.svg"), url("../../../../themes/SuiteP/images/p_hide_sidebar.png");

  background-position: center center;

  background-repeat: no-repeat;

  border-top-right-radius: 3px;

  border-bottom-right-radius: 3px;

  width: 30px;

  height: 30px;

  z-index: 1000; }

/* Breakpoints */

@media (max-width: 1200px) {

  .sidebar {

    width: 0;

    visibility: collapse; }

  .button-toggle-expanded {

    width: 0;

    visibility: collapse; }

  .button-toggle-collapsed {

    width: 0;

    visibility: collapse; }

  .bootstrap-container.col-md-offset-2 {

    margin-left: 0; }

  .col-md-10 {

    width: 100%; }

  footer.expandedSidebar {

    width: 100%; }

  footer.collapsedSidebar {

    width: 100%; }

  #userlinks_head {

    display: none; } }

.button-toggle-collapsed {

  left: 0; }

.favoritesSidebar {

  float: left;

  width: 100%; }

.favoritesSidebar .new {

  width: 0;

  height: 0;

  visibility: collapse; }

.favoritesSidebar .new * {

  width: 0;

  height: 0;

  visibility: collapse; }

.recentlyViewedSidebar li a {

  color: #FFFFFF;

  padding-top: 12px;

  padding-bottom: 12px; }

.favoritesSidebar li a {

  color: #FFFFFF;

  padding-top: 12px;

  padding-bottom: 12px; }

.recentlyViewedSidebar .recent-links-detail {

  display: inline-block;

  width: 85%; }

.favoritesSidebar .favorite-links-detail {

  display: inline-block;

  width: 85%; }

.recentlyViewedSidebar .recent-links-edit {

  display: inline-block;

  width: 20px;

  height: 20px; }

.favoritesSidebar .favorite-links-edit {

  display: inline-block;

  width: 20px;

  height: 20px; }

.recentlyViewedSidebar li:hover {

  background-color: #383B3E; }

.favoritesSidebar li:hover {

  background-color: #2A3239; }

.recentlyViewedSidebar .recent_h3 {

  font-size: 19px;

  font-weight: bold;

  color: #FFFFFF;

  margin: 0 0 5px 0; }

.favoritesSidebar .recent_h3 {

  font-size: 17px;

  font-weight: bold;

  color: #FFFFFF;

  margin: 0 0 5px 0; }

footer * {

  box-sizing: content-box; }

footer {

  box-sizing: content-box;

  bottom: 0;

  background-color: #ddd;

  margin: 0 0 0 0;

  border: 1px solid transparent;

  border-radius: 4px;

  clear: both;

  line-height: 48px;

  width: 100%; }

footer.expandedSidebar {

  float: right; }

footer.collapsedSidebar {

  float: right; }

.footer_left {

  float: left;

  width: 48%; }

/*SIDEBAR BREAK POINTS*/

@media (min-width: 1200px) {

  .sidebar {

    width: 20%; }

  .bootstrap-container.col-md-offset-2 {

    margin-left: 20%; }

  .button-toggle-expanded {

    left: 20%; }

  .col-md-10 {

    width: 80%; }

  footer.expandedSidebar {

    width: 80%; }

  footer.collapsedSidebar {

    width: 100%; }

  .recentlyViewedSidebar .recent-links-detail {

    padding: 8px 1% 8px 15%; }

  .favoritesSidebar .favorite-links-detail {

    padding: 8px 1% 8px 15%; }

  .recentlyViewedSidebar .recent_h3 {

    padding: 0 1% 0 15%; }

  .favoritesSidebar .recent_h3 {

    padding: 0 1% 0 15%; } }

@media (min-width: 1230px) {

  .sidebar {

    width: 18%; }

  .bootstrap-container.col-md-offset-2 {

    margin-left: 18%; }

  .button-toggle-expanded {

    left: 18%; }

  .col-md-10 {

    width: 82%; }

  footer.expandedSidebar {

    width: 82%; } }

@media (min-width: 1300px) {

  .sidebar {

    width: 17%; }

  .bootstrap-container.col-md-offset-2 {

    margin-left: 17%; }

  .button-toggle-expanded {

    left: 17%; }

  .col-md-10 {

    width: 83%; }

  footer.expandedSidebar {

    width: 83%; } }

@media (min-width: 1400px) {

  .sidebar {

    width: 15.8%; }

  .bootstrap-container.col-md-offset-2 {

    margin-left: 15.8%; }

  .button-toggle-expanded {

    left: 15.8%; }

  .col-md-10 {

    width: 84.2%; }

  footer.expandedSidebar {

    width: 84.2%; } }

@media (min-width: 1500px) {

  .sidebar {

    width: 14.8%; }

  .bootstrap-container.col-md-offset-2 {

    margin-left: 14.8%; }

  .button-toggle-expanded {

    left: 14.8%; }

  .col-md-10 {

    width: 85.2%; }

  footer.expandedSidebar {

    width: 85.2%; } }

@media (min-width: 1600px) {

  #search {

    visibility: collapse; }

  .sidebar {

    width: 13.8%; }

  .bootstrap-container.col-md-offset-2 {

    margin-left: 13.8%; }

  .button-toggle-expanded {

    left: 13.8%; }

  .col-md-10 {

    width: 86.2%; }

  footer.expandedSidebar {

    width: 86.2%; } }

@media (min-width: 1800px) {

  .sidebar {

    width: 12.8%; }

  .bootstrap-container.col-md-offset-2 {

    margin-left: 12.8%; }

  .button-toggle-expanded {

    left: 12.8%; }

  .col-md-10 {

    width: 87.2%; }

  footer.expandedSidebar {

    width: 87.2%; } }

@media (min-width: 1900px) {

  .sidebar {

    width: 11.8%; }

  .bootstrap-container.col-md-offset-2 {

    margin-left: 11.8%; }

  .button-toggle-expanded {

    left: 11.8%; }

  .col-md-10 {

    width: 88.2%; }

  footer.expandedSidebar {

    width: 88.2%; } }

@media (min-width: 2100px) {

  .sidebar {

    width: 10.8%; }

  .bootstrap-container.col-md-offset-2 {

    margin-left: 10.8%; }

  .button-toggle-expanded {

    left: 10.8%; }

  .col-md-10 {

    width: 89.2%; }

  footer.expandedSidebar {

    width: 89.2%; } }

@media (min-width: 2300px) {

  .sidebar {

    width: 10%; }

  .bootstrap-container.col-md-offset-2 {

    margin-left: 10%; }

  .button-toggle-expanded {

    left: 10%; }

  .col-md-10 {

    width: 90%; }

  footer.expandedSidebar {

    width: 90%; } }

@media print {

  .navbar-inverse {

    display: none; }

  .sidebar {

    display: none; } }

/**** NAVBAR ****/

.navbar-inverse {

  background: #393444;

  /* fix default buttons */ }

  .navbar-inverse .with-home-icon {

    display: inline-block;

    background-image: url("../../../../themes/SuiteP/images/p_icon_home.png");

    background-position: 14px 30px;

    background-repeat: no-repeat;

    color: #FFFFFF;

    padding: 0;

    overflow: hidden;

    width: 48px;

    line-height: 90px;

    text-indent: -9999px;

    content: ''; }

  .navbar-inverse a:hover.with-home-icon {

    background-image: url("../../../../themes/SuiteP/images/p_icon_home_hover.png"); }

  .navbar-inverse .dropdown-menu > li > a {

    line-height: normal; }

  .navbar-inverse .dropdown-menu {

    font-size: 10px;

    background: #433D50;

    padding: 4px 10px 4px 10px;

    margin-top: 0;

    border-top-left-radius: 0;

    border-top-right-radius: 0;

    overflow-y: auto;

    min-width: 185px; }

    .navbar-inverse .dropdown-menu li {

      padding: 0;

      margin: 0; }

      .navbar-inverse .dropdown-menu li a {

        display: block;

        font-size: 15px;

        background-color: #3C3846;

        color: #FFFFFF;

        padding: 12px 15px 12px 15px;

        margin: 0;

        border-bottom: 1px solid #757083;

        letter-spacing: 0;

        text-decoration: none;

        text-transform: none; }

      .navbar-inverse .dropdown-menu li a:hover {

        background: #221F29;

        color: #ff0000;

        transition: all 0.3s ease-out;

        -webkit-transition: all 0.3s ease-out;

        -moz-transition: all 0.3s ease-out;

        -o-transition: all 0.3s ease-out; }

    .navbar-inverse .dropdown-menu .action-links-title a:hover {

      color: #F5F5F5; }

    .navbar-inverse .dropdown-menu .recentlinks {

      width: 100%; }

      .navbar-inverse .dropdown-menu .recentlinks img {

        margin-right: 5px; }

      .navbar-inverse .dropdown-menu .recentlinks a:hover {

        color: #F5F5F5; }

    .navbar-inverse .dropdown-menu .favoritelinks {

      width: 100%; }

      .navbar-inverse .dropdown-menu .favoritelinks img {

        margin-right: 5px; }

      .navbar-inverse .dropdown-menu .favoritelinks a:hover {

        color: #F5F5F5; }

  .navbar-inverse .nav {

    display: inline-block; }

    .navbar-inverse .nav > .topnav {

      margin: 0;

      font-size: 16px;

      height: 90px;

      letter-spacing: 2px;

      line-height: 90px;

      padding: 0 7px 0 7px;

      text-transform: uppercase; }

      .navbar-inverse .nav > .topnav > span.notCurrentTab > a {

        display: inline-block;

        border-top: 3px solid transparent; }

Comments

comments

Call and receive expert consulting or click below for quote
Button linked to quote page for commercial insurance quote