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:
- Open the BP3 Brazos UI Examples Process App in your Process Designer
- Run the Brazos Control Demo (Start Here) Human Service
- Click the Customize Style button:
- Make the desired changes in the graphical CSS Genearator
- Click the Generate button
- 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:
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.