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:
- 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:
.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.
Comments
2 comments
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!!!!
Hi Esire,
Two main things to verify:
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
Please sign in to leave a comment.