Color scheme Rollbase 2.2

Posted by balcesme on 28-Apr-2014 11:39

Is there a way to change the color of the buttons back to the old blue color. Now it has been changed to orange, and it looks different if you compare it with the overall look and feel. Do we need to change the CSS, and which part?

Posted by murali on 29-May-2014 03:17

You Can change the button colors ( or add any custom javascript or CSS or HTML )

per application in Rollbase.

1. Go To Setting ( from header popup : top left )

2. Applicatons -> Choose your Application

3. Once in Application Configuration Page; More Actions -> 'Header And Footer'

4. Enter the following text in Header text box & Save (note: I chose some bluish colors based on default bootstrap theme. You may want to change these)

<style type='text/css'>

.pacific-bootstrap .btn.btn-primary {

background-color:  #006DCC !important;

}

body.pacific-bootstrap .btn-primary:hover, body.pacific-bootstrap .btn-primary:focus {

background-color: #0044CC !important;

}

body.pacific-bootstrap .btn-primary:active  {

background-color: #0055CC !important;

box-shadow: 0 2px #00cccc;

}

body.pacific-bootstrap .btn-primary:disabled, body.pacific-bootstrap .btn-primary.disabled,  body.pacific-bootstrap .btn-primary.disabled:hover, body.pacific-bootstrap .btn-primary.disabled:focus, body.pacific-bootstrap .btn-primary.disabled:active

{

background-color: #0077CC !important;

box-shadow: 0 2px #00cccc;

}

</style>

Note : The customization is per application. It affects the runtime of your app. You will see default Rollbase button on setup/edit page screens

All Replies

Posted by Jean Richert on 08-May-2014 03:55

Hi balcesme, I saw your post didn't get an answer yet. Sorry for the delay. I'll see if someone can get back to you as quickly as possible.

Posted by Mani Kumar on 08-May-2014 04:16

Hi Balcesme,

Could you please confirm if you wish to totally rollback to the previous classic view of Rollbase or only change in button colors?

Thanks,

Mani.

Posted by balcesme on 08-May-2014 12:25

Hi Mani,

I like the new UI. It looks better than the previous one. The only change that i want is the blue buttons back, in stead of using the orange buttons. We are using the private cloud. Could you please tell me where to change these parts?

@Jean: Thanks for the follow up

Posted by bakar on 21-May-2014 17:46

Hi Mani, is there any update?

Posted by Mani Kumar on 23-May-2014 02:57

Hi Balcesme,

I'm still checking on various options on if we could implement this scenario that you've discussed.

I will get back to you soon on this.

Regards,

Mani.

Posted by tsarch on 27-May-2014 09:22

I do not like the new design. Blue buttons a must. Bringing the progress colors into rollbase doesn't add anything really. New fonts don't render as nicely. No good. Please change it back or give users the option of the original pre-progress design changes.

Posted by murali on 29-May-2014 03:17

You Can change the button colors ( or add any custom javascript or CSS or HTML )

per application in Rollbase.

1. Go To Setting ( from header popup : top left )

2. Applicatons -> Choose your Application

3. Once in Application Configuration Page; More Actions -> 'Header And Footer'

4. Enter the following text in Header text box & Save (note: I chose some bluish colors based on default bootstrap theme. You may want to change these)

<style type='text/css'>

.pacific-bootstrap .btn.btn-primary {

background-color:  #006DCC !important;

}

body.pacific-bootstrap .btn-primary:hover, body.pacific-bootstrap .btn-primary:focus {

background-color: #0044CC !important;

}

body.pacific-bootstrap .btn-primary:active  {

background-color: #0055CC !important;

box-shadow: 0 2px #00cccc;

}

body.pacific-bootstrap .btn-primary:disabled, body.pacific-bootstrap .btn-primary.disabled,  body.pacific-bootstrap .btn-primary.disabled:hover, body.pacific-bootstrap .btn-primary.disabled:focus, body.pacific-bootstrap .btn-primary.disabled:active

{

background-color: #0077CC !important;

box-shadow: 0 2px #00cccc;

}

</style>

Note : The customization is per application. It affects the runtime of your app. You will see default Rollbase button on setup/edit page screens

Posted by bakar on 29-May-2014 18:01

Thanks. But when you for example click on "quick create or try to "ättach record", then you'll see the orage buttons again. How can we definitely overall change to the known blue colors?

Posted by freddy@brixxs.com on 31-May-2014 11:09

As a Rollbase private cloud platform ISV we are not able to install Rollbase 2.2 because of the button issue. So we need to have back the regular blue buttons into the application! We have to deal with white labeling, customer logo's, CSS, portal pages etc. Making some changes to CSS is not an acceptable workaround for us. Please inform us about a definite solution.

Posted by murali on 31-May-2014 14:34

bakar, freddy@brixx.com,

Apart from the solution that I outlined, there are 3 ways to bring back the blue buttons in Rollbase 2.2; depending on your requirement.

I assume that both of you are on pvt cloud.

A. If you love the new Rollbase button styling (square edges)  but just want blue  buttons instead of Orange

-> Use Custom SyleSheet. (Note : Custom Stylesheet is not supported for Master Zone)

-> i. Take a copy of your default rbtheme.css :

For rollbase.com ( as of 6/1/2014 ) it is www.rollbase.com/.../rbtheme.css

For a simple Pvt cloud 2.2.2.0  default installation ( not clustered  license ) it should be http://localhost:8080/master/css/rbtheme.css?v=2.2.2.0

-> ii. Add the following  css ( From my earlier post ) to it and save it to your hard disk ; say bluetheme.css

BEGIN CSS SNIPPET

.pacific-bootstrap .btn.btn-primary {

background-color:  #006DCC !important;

}

body.pacific-bootstrap .btn-primary:hover, body.pacific-bootstrap .btn-primary:focus {

background-color: #0044CC !important;

}

body.pacific-bootstrap .btn-primary:active  {

background-color: #0055CC !important;

box-shadow: 0 2px #00cccc;

}

body.pacific-bootstrap .btn-primary:disabled, body.pacific-bootstrap .btn-primary.disabled,  body.pacific-bootstrap .btn-primary.disabled:hover, body.pacific-bootstrap .btn-primary.disabled:focus, body.pacific-bootstrap .btn-primary.disabled:active

{

background-color: #0077CC !important;

box-shadow: 0 2px #00cccc;

}

END CSS SNIPPET

-> iii. Create a Hosed File Out of it. Name it Blue Theme

-> iv. Goto Settings > Account Settings

-> v. For 'CSS Stylesheet' dropdown, select 'Blue Theme'  & Submit

However.... if you want the Rollbase  round blue buttons aka Rollbase Classic

B. If you want to turn Rollbase Classic on a Customer Zone

->i. Goto Settings (Company-wide settings) as an administrator

->ii. Select Configure and add the following field

  - Type > Text

  - Name > System UI Style

  - Integration name > system_ui_style (should be exactly as mentioned here)

->iii. Goto Settings (Company-wide settings) and Edit

->iv. Set value for System UI Style property to "Rollbase Classic" and Save

C.If you want to turn Rollbase Classic on all Tenants  for whom you are the 'ISV Partner' user

->i. Login as the ISV Partner user

->ii. Go to Settings  -> My Settings

->iii. You will find a new field (a drop down) : System UI Style

->iv.Choose ‘Rollbase Classic’

->v. The flag will not take effect in all ISV Customers  immediately because of the caches Rollbase keeps to optimize system performance

->vi. For the effect to take place on a Customer ; Unload and Load that Customer on a prod server

Alternately, restart Rollbase Pvt Cloud if you can do that.

Posted by bakar on 28-Jun-2014 11:40

The orange buttons are still available on some places (like object creation). Can we rolback this in the core CSS in stead of adding for all of our customers a host file?

This thread is closed