Just a few tweaks to Suite R theme ...

SuiteCRM Forum - English Language SuiteCRM Themes
1

As a new user to SuiteCRM, I’m just getting to grips with how the folder structure is laid out, along with the screen layouts and themes.

I really like the “minimalist” Suite R theme, even though it’s going away in a few more releases. It looks very clean and “tight” and it maximizes the available real estate on a desktop or laptop computer.

There were just a few tweaks I wanted to make:

  1. Add a company logo to the top left of the screen.
  2. Make the text in all screens slightly larger.
  3. Make the page titles bigger than the rest of the text in all pages.

Below is how I did all this, but firstly I copied the relevant files into the corresponding /custom folder locations, then made the changes there. (This made my modifications upgrade-safe).

  1. Add a logo to the top left of the screen:

I first uploaded my company logo (a .jpg file) into the /custom/themes/SuiteR/images folder.

Next, I edited the /custom/themes/SuiteR/tpls/_headerModuleList.tpl file and looked for this section of code:

{$APP.LBL_BROWSER_TITLE}

I changed this to:

&nbsp {$APP.LBL_BROWSER_TITLE} &nbsp &nbsp &nbsp &nbsp

(I added the “&nbsp” coding merely to nicely space out the screen header line. &nbsp is HTML code for a “non-breaking space” … a space that will not break into a new line)

  1. Make the text in all screens slightly larger:

In the /custom/themes/SuiteR/css/style.css file, I located this text:

/* Start Global CSS /
/ Base SugarCRM Styles */

body {
background:#ffffff;
font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
font-size:12px;
margin: 0;
overflow:auto;
padding-top: 50px;
}

and simply changed it to

/* Start Global CSS /
/ Base SugarCRM Styles */

body {
background:#ffffff;
font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
font-size:14px;
margin: 0;
overflow:auto;
padding-top: 50px;
}

  1. Make the page title bigger than the rest of the text:

I wanted to make the page title bigger and boldface, to stand out from the rest of the text on each page.

In the /custom/themes/SuiteR/css/style.css file, I located this block of code:

.moduleTitle h2 {
display: block;
float: left;
font-size:1.2em;
}

and changed it to:

.moduleTitle h2 {
display: block;
float: left;
font-size: 20px;
font-weight: bold;
}

After a quick “rebuild” (Admin > Repair > Quick Repair & Rebuild), I was good to go!