Customizing Brazos UI Style and Logo

Avatar
Joao Benedito
Follow

Overview

You can easily customize the style of the BP3 Brazos UI Toolkit using CSS. To make this even easier for you we have included a CSS generator in the BP3 Brazos UI Examples Process App that allows you to graphically define colors for some basic UI elements, and generate a CSS starter file.

Generating a CSS file

Here are the steps that you should follow to generate a CSS starter file:

 

  1. Open the BP3 Brazos UI Examples Process App in your Process Designer
  2. Run the Brazos Control Demo (Start Here) Human Service
  3. Click the Customize Style button:
  4. Make the desired changes in the graphical CSS Genearator
  5. Click the Generate button
  6. Follow the on screen instructions

 

Adding a Custom Image or Logo

Update: In Brazos UI 4.6.0, you can do this easily using the Brazos Template configuration options.

Sometimes there is a need to add a logo or a image to a coach, and you can achieve it by simply using css. Note that at the bottom of the CSS file generated in the steps above you will find comments that help with including custom logos and images in your Brazos coaches.

To incorporate a logo or image simply include the appropriate CSS code in your custom .css file alongside any other customizations that you might have. Here is an example of the CSS that might be used to include a logo in the footer of the Brazos template:

.bp3-logo-image{ 
    background-image: url('Logo-Demo.jpg'); //this is the image, a full path can also be used 
    height:60px; //this is the logo height
}

If you need additional help with customizing your Brazos UI look and feel please contact us to discuss our Brazos UI support options.

Have more questions? Submit a request

Comments

  • Avatar
    Julva Bilenge

    hey Joao i tried following your instruction below

    Here is your starter CSS. Perform the following steps to apply it to a Brazos Coach:

    1 Copy all contents from the following text box and paste it into a new text file

    2 Save the file as CSS. e.g. custom-style.css

    3 Add the CSS file to your Process App as a Web File

    4 Create a new CoachView called something like "Custom Style"

    5 Add your custom CSS file to the new CoachView under the "Included Scripts" section

    6 Add this CoachView to the very end (after/outside the Brazos Template) of your Brazos coaches.

    but it doesn't Overwrite the default template!!! i tried to add my template coach view at the end after my default template as instructed in number 6. can you please help!!!!

  • Avatar
    Tom Bushart

    Hi Esire,

    Two main things to verify:

    1. Does your style custom coach view actually contain the new css file? Double check by opening the coach view for editing in Process Designer. Check the Behavior tab and see that the Included Scripts section has your new .css file.
    2. Make sure that your new coach view sits completely outside of the Brazos Template control. In Process Designer, clicking on the Brazos Template in your coach will highlight its bounds with a blue box. Check that your new coach view containing your custom styles CSS file is placed below those bounds.

    If neither of those help, we'll be better able to assist you if you send an email to support@bp-3.com.

    Thanks,

    Tom

Powered by Zendesk