Color scheme Rollbase 2.2 - Forum - Rollbase - Progress Community

Color scheme Rollbase 2.2

 Forum

Color scheme Rollbase 2.2

This question is answered

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?

Verified Answer
  • 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
  • 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.

  • 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.

  • 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

  • Hi Mani, is there any update?

  • 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.

  • 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.

  • 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

  • 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?

  • 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.

  • 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.

  • 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?