Changing Button style example

<< Click to Display Table of Contents >>

Navigation:  Bizagi Studio > Process wizard > Define Forms > Form Controls > Button >

Changing Button style example

Overview

You can change the style of the Buttons in the Work portal by defining your customized CSS styles.

Customized styles must be defined in the override styles file located in

C:\Bizagi\Projects\[BizagiProject]\WebApplication\jquery\overrides\css\desktop\bizagi.custom.styles.css

 

This example illustrates how to create four different styles. If you want to replicate it you require an Internet connection.

 

Forms Components244

 

To configure this behavior:

 

1. Edit the bizagi.custom.style.css located in C:\Bizagi\Projects\[BizagiProject]\WebApplication\jquery\overrides\css\desktop. Add the following CSS code:

 

.btn_msteel{
background-image: none !important;
background: #415A68 url("http://www.bizagi.com/assets/images/common/btn_arrow.png") no-repeat 15px 50% !important;
color: #FFF !important;
padding: 3px 20px 3px 40px !important;
border: 2px solid #FFF !important;
font-size: 21px !important;
font-weight: 500 !important;
font-family: Courier New,sans-serif !important;
box-shadow: none !important;
text-shadow: none !important;
}
.btn_msteel:hover{
background-image: none !important;
background: #8094A2 url("http://www.bizagi.com/assets/images/common/btn_arrow.png") no-repeat 15px 50% !important;
color: #FFF !important;
box-shadow: none !important;
text-transform: uppercase !important;
text-shadow: none !important;
font-size: 21px !important;
font-weight: 500 !important;
font-family: Courier New,sans-serif !important;
}
 
.btn_mteal{
background-image: none !important;
background: #008D7F url("http://www.bizagi.com/assets/images/common/btn_arrow.png") no-repeat 15px 50% !important;
color: #FFF !important;
padding: 3px 20px 3px 40px !important;
border: 2px solid #FFF !important;
font-size: 22px !important;
font-weight: 500 !important;
font-family: Kunstler Script,sans-serif !important;
box-shadow: none !important;
text-shadow: none !important;
}
.btn_mteal:hover{
background-image: none !important;
background: #00ACA2 url("http://www.bizagi.com/assets/images/common/btn_arrow.png") no-repeat 15px 50% !important;
color: #FFF !important;
box-shadow: none !important;
text-shadow: none !important;
font-weight: 500 !important;
font-family: Kunstler Script,sans-serif !important;
}
 
.btn_molive{
background-image: none !important;
background: #B2BB1C url("http://www.bizagi.com/assets/images/common/btn_arrow.png") repeat-x 1px 50% !important;
color: #000 !important;
padding: 3px 20px 3px 40px !important;
border: 2px solid #FFF !important;
font-size: 10px !important;
font-weight: 500 !important;
box-shadow: none !important;
text-shadow: -1px 0 #C0C0C0, 0 1px #C0C0C0, 1px 0 #C0C0C0, 0 -1px #C0C0C0 !important;
text-align: left !important;
}
.btn_molive:hover{
background-image: none !important;
background: #D6E03D url("http://www.bizagi.com/assets/images/common/btn_arrow.png") no-repeat 15px 50% !important;
color: #FFF !important;
box-shadow: none !important;
text-shadow: none !important;
font-size: 10px !important;
font-weight: 500 !important;
}
 
.btn_morange{
background-image: none !important;
background: #F28D1E url("http://www.bizagi.com/assets/images/common/btn_arrow.png") no-repeat 15px 50% !important;
color: #FFF !important;
padding: 3px 20px 3px 40px !important;
border: 2px solid #FFF !important;
font-size: 22px !important;
font-weight: 500 !important;
font-family: Footlight MT Light,sans-serif !important;
box-shadow: none !important;
text-shadow: none !important;
}
.btn_morange:hover{
background-image: none !important;
background: #FDB825 url("http://www.bizagi.com/assets/images/common/btn_arrow.png") no-repeat 15px 50% !important;
color: #FFF !important;
box-shadow: none !important;
text-transform: uppercase !important;
text-shadow: none !important;
}

 

note_pin IMPORTANT

The ! important tag gives a more weight to this CSS value, this tag is important in every single value to override the default style

When you need to change the background color, add the property background-image: none ! important;.

 

2. In Bizagi Studio, drag and drop four Button controls to the form. Type the desired Button's Caption for each one.

 

Forms Components245

 

3. In Format tab, set the following classes in CSS Style property:

oMy Button 1 > btn_msteel

oMy Button 2 > btn_mteal

oMy Button 3 > btn_molive

oMy Button 4 > btn_morange

 

Forms Components246

 

4. Go to Work Portal and test your results.