Ejemplo para cambiar el estilo del Botón

<< Click to Display Table of Contents >>

Navigation:  Bizagi Studio > Asistente de Procesos > Definir Formas > Controles > Botón >

Ejemplo para cambiar el estilo del Botón

Introducción

Usted puede personalizar el estilo de sus botones en el Portal de Trabajo creando su definición de estilo CSS personalizada.

Los nuevos estilos CSS deben ser definidos en el archivo overrides que se encuentra en

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

 

Este ejemplo ilustra cómo crear cuatro estilos diferentes. Si desea replicarlo, se requiere una conexión a Internet.

 

Forms Components244

 

Para configurar este comportamiento:

 

1. Edite el archivo bizagi.custom.style.css que se encuentra en C:\Bizagi\Projects\[ProyectoBizagi]\WebApplication\jquery\overrides\css\desktop. Agregue el siguiente código CSS:

 

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

La etiqueta ! important le da un mayor peso a este valor CSS, esta etiqueta es importante en cada valor para sobrescribir el estilo por defecto.

Cuando necesite cambiar el color de fondo, agregue la propiedad background-image: none ! important;.

 

2. En Bizagi Studio, arrastre y suelte cuatro botones en la forma. Escriba la etiqueta de cada Botón.

 

Forms Components245

 

3. En la pestaña Formato, establezca las siguientes clases en la propiedad Estilos css:

oMy Button 1 > btn_msteel

oMy Button 2 > btn_mteal

oMy Button 3 > btn_molive

oMy Button 4 > btn_morange

 

Forms Components246

 

4. Vaya al Portal de Trabajo y pruebe sus resultados.