Poner el título de un dashlet en varios renglones
Si se tiene un título en un dashlet que es muy largo para que se vea completo, se puede configurar la apariencia para que se ajuste a un ancho deseado.
Para lograr este comportamiento, hay que hacer click en las opciones (representado con la rueda), seleccionar Apariencia e ir a Estilos avanzados.
El portlet seleccionado tiene un identificador único: #portlet_O3ViewPortlet_WAR_o3partsweb_INSTANCE_YJBlLAcD8Xe3
Poniendo el elemento que se quiere cambiar (.portlet-title-text), se puede cambiar su configuración.
En este caso, el título va a ocupar el 60% del espacio disponible para el título. Hay que tener en cuenta que el 60% cambia según la resolución que tengamos en la pantalla.
| Code Block |
|---|
#portlet_O3ViewPortlet_WAR_o3partsweb_INSTANCE_YJBlLAcD8Xe3 .portlet-title-text{
max-width: 60%;
white-space: normal;
} |
Ejemplo:
Ocultar ícono gris esquina superior izquierda en dashlets
Si se quiere ocultar el ícono gris de la esquina superior izquierda que aparece en los dashlets y permite seleccionar opciones de visualización, se deben modificar los estilos avanzados del dashlet.
Para lograr este comportamiento, hay que hacer click en las opciones (representado con la rueda), seleccionar Apariencia e ir a Estilos avanzados.
El portlet seleccionado tiene un identificador único: #portlet_O3ViewPortlet_WAR_o3partsweb_INSTANCE_YThEdhKGLU8G
Se debe insertar la siguiente propiedad en los Estilos Avanzados:
| Code Block |
|---|
.aui #portlet_O3ViewPortlet_WAR_o3partsweb_INSTANCE_YThEdhKGLU8G .cornerIteraction {
display: none;
} |
Ejemplo:
Poner los títulos de la grilla olap en otro color
Si se quiere cambiar el color de la grilla olap que aparece en los dashlets, se deben modificar los estilos avanzados del dashlet.
Para lograrlo, hay que hacer click en las opciones (representado con la rueda), seleccionar Apariencia e ir a Estilos avanzados.
El portlet seleccionado tiene un identificador único: #portlet_O3ViewPortlet_WAR_o3partsweb_INSTANCE_0zjUtqjbhlI1
Se debe insertar la siguiente propiedad en los Estilos Avanzados:
| Code Block |
|---|
#portlet_O3ViewPortlet_WAR_o3partsweb_INSTANCE_0zjUtqjbhlI1 .grid-olap-theme .header-color {
background: Gray;
}
#portlet_O3ViewPortlet_WAR_o3partsweb_INSTANCE_0zjUtqjbhlI1 .grid-olap-theme .sub-header {
background: Gray;
} |
En este ejemplo, se decidió cambiar el color a gris, pero se puede poner cualquier color y el código del color también (#808080).
Otra forma es la siguiente, donde se oculta el titulo de Medidas
| Code Block | ||
|---|---|---|
| ||
#portlet_O3ViewPortlet_WAR_o3partsweb_INSTANCE_MmovMBYAeOVh .grid-olap-header-color {
background: Gray;
}
#portlet_O3ViewPortlet_WAR_o3partsweb_INSTANCE_MmovMBYAeOVh .grid-olap-header-x-table {
margin-left: none;
display: none;
{}
|
Ejemplo:
Modificar el color de fondo de la última fila de una grilla
Si se quiere cambiar el color de una fila (en este caso la última) de una grilla, se deben modificar los estilos avanzados del dashlet.
Para lograrlo, hay que hacer click en las opciones (representado con la rueda), seleccionar Apariencia e ir a Estilos avanzados.
El portlet seleccionado tiene un identificador único: #portlet_O3ViewPortlet_WAR_o3partsweb_INSTANCE_YThEdhKGLU8G
Se debe insertar la siguiente propiedad en los Estilos Avanzados:
| Code Block |
|---|
.x-grid-item-container > table:nth-last-child(1) .cellGridStyle{
background: Gray !important;
} |
En este ejemplo, se decidió cambiar el color a gris, pero se puede poner cualquier color y el código del color también (#808080).
Ejemplo:
Quitar los bordes de la Grilla tipo Lista
Si se quieren quitar los bordes de la grilla tipo lista, se deben modificar los estilos avanzados del dashlet.
Para lograrlo, hay que hacer click en las opciones (representado con la rueda), seleccionar Apariencia e ir a Estilos avanzados.
El portlet seleccionado tiene un identificador único: #portlet_O3ViewPortlet_WAR_o3partsweb_INSTANCE_WI5r
Se debe insertar la siguiente propiedad en los Estilos Avanzados:
| Code Block |
|---|
#portlet_O3ViewPortlet_WAR_o3partsweb_INSTANCE_WI5r .sencha-view-dashlet > div > div > div:nth-child(2) > div:nth-child(2) td > div{
border: none!important;
} |
Ejemplo:
Quitar los bordes interno de la Grilla y ponerle borde externo redondeado
Si se quieren quitar los bordes externos de la grilla, se deben modificar los estilos avanzados del dashlet.
Para lograrlo, hay que hacer click en las opciones (representado con la rueda), seleccionar Apariencia e ir a Estilos avanzados.
El portlet seleccionado tiene un identificador único: #p_p_id_O3ViewPortlet_WAR_o3partsweb_INSTANCE_NW1siJ6ZFMnY
En el primer segmento del codigo se quita el borde y se saca el fondo. Y en el otro bloque de codigo se pone el borde generico y se redondean los bordes.
Se debe insertar la siguiente propiedad en los Estilos Avanzados:
| Code Block | ||
|---|---|---|
| ||
#p_p_id_O3ViewPortlet_WAR_o3partsweb_INSTANCE_NW1siJ6ZFMnY_ .x-column-header{
border: none!important;
background: none!important;
}
#p_p_id_O3ViewPortlet_WAR_o3partsweb_INSTANCE_NW1siJ6ZFMnY_ .ids-dashlet-theme{
border: 1px solid #ddd;
border-radius: 10px;
overflow: auto;
} |
Ejemplo:
Poner en negrita la fila de totales
Si se quiere marcar con negrita la fila de totales.
Para lograrlo, hay que hacer click en las opciones (representado con la rueda), seleccionar Apariencia e ir a Estilos avanzados.
El portlet seleccionado tiene un identificador único: #portlet_O3ViewPortlet_WAR_o3partsweb_INSTANCE_IHuQrOSG27JJ
Se debe insertar la siguiente propiedad en los Estilos Avanzados:
| Code Block | ||
|---|---|---|
| ||
#portlet_O3ViewPortlet_WAR_o3partsweb_INSTANCE_IHuQrOSG27JJ .x-grid-item-container > table:nth-last-child(1) .cellGridStyle{
font-weight: bold !important;
} |
Ejemplo:
Color del boton al seleccionarlo
En el ejemplo se configura azul el color del botón al ser seleccionado
Para lograrlo, hay que hacer click en las opciones (representado con la rueda), seleccionar Apariencia e ir a Estilos avanzados.
El portlet seleccionado tiene un identificador único: #portlet_O3ControlPortlet_WAR_o3partsweb_INSTANCE_y3Rc
Se debe insertar la siguiente propiedad en los Estilos Avanzados:
| Code Block | ||
|---|---|---|
| ||
#portlet_O3ControlPortlet_WAR_o3partsweb_INSTANCE_y3Rc .aui .v-app .o3-theme .v-button:hover,
#portlet_O3ControlPortlet_WAR_o3partsweb_INSTANCE_y3Rc .aui .v-app .o3-theme .v-button.v-pressed {
background: #0374f4 !important;
border-color: #0374f4 !important;
border-top-color: #0374f4 !important;
border-right-color: #0374f4 !important;
border-bottom-color: #0374f4 !important;
border-left-color: #0374f4 !important;
}
#portlet_O3ControlPortlet_WAR_o3partsweb_INSTANCE_y3Rc .o3-theme .o3-control-member-boxdimension-button.v-pressed-box,
#portlet_O3ControlPortlet_WAR_o3partsweb_INSTANCE_y3Rc .o3-theme .o3-control-member-boxdimension-button.v-pressed-box .v-button-wrap,
#portlet_O3ControlPortlet_WAR_o3partsweb_INSTANCE_y3Rc .o3-theme .o3-control-member-boxdimension-button.v-pressed-box .v-button-wrap .v-button-caption {
background: #0374f4 !important;
color: white;
}
#portlet_O3ControlPortlet_WAR_o3partsweb_INSTANCE_y3Rc .o3-theme .o3-control-member-boxdimension-button.v-pressed-box,
#portlet_O3ControlPortlet_WAR_o3partsweb_INSTANCE_y3Rc .o3-theme .o3-control-member-boxdimension-button.v-pressed-box .v-button-wrap,
#portlet_O3ControlPortlet_WAR_o3partsweb_INSTANCE_y3Rc .o3-theme .o3-control-member-boxdimension-button.v-pressed-box .v-button-wrap .v-button-caption {
background: #0374f4 !important;
color: white;
}
#portlet_O3ControlPortlet_WAR_o3partsweb_INSTANCE_y3Rc .o3-theme .o3-control-member-boxdimension-button.v-pressed-box {
border: 1px solid #0374f4 !important;
}
|
