Tema Unkuna

En esta sección Unkuna presenta el archivo unkuna-theme.css formado por variables con valores pre establecidos para algunas propiedades de los componentes del framework. Si el usuario desea puede personalizar estos valores.

Nota: Puedes usar estas variables en tus propias reglas de estilo.

Definición de las variables:

--nkn-border-color: Asigna un color al borde de un elemento.

Componentes que usan esta variable
- Acordeón
- Formulario
- Modal
- Tabla
Utilidades que usan esta variable
- nkn-border
--nkn-box-shadow: Asigna sombra a un elemento.

Componentes que usan esta variable
- Dropdown
- Hamburger menu

--nkn-width-container: Asigna un ancho máximo al contenido de la página web, de uso exclusivo para la clase nkn-container.

Los valores preestablecidos para cada breakpoint son:

Breakpoints	Ancho de pantalla	Valor de --nkn-width-container
Pequeño	menores igual 767px	100%
Mediano	768px hasta 991px	720px
Largo	992px hasta 1199px	960px
Extra Largo	desde 1200px a más	1140px

--nkn-curtain-color: Asigna un color de fondo de un componente.

Componentes que usan esta variable
- Modal
- Hamburger
--nkn-label-color:Asigna un color a la etiqueta label.

Componentes que usan esta variable
- Formulario
--nkn-primary-title-color: Asigna un color para los títulos primarios.
--nkn-secondary-title-color: Asigna un color para los títulos secundarios.

Componentes que usan esta variable
- Tabla responsiva vertical

Uso

Enlazar el archivo

Enlace unkuna-theme.css personalizado en su proyecto. El recurso unkuna-theme.css, debe ir después del recurso unkuna.css (vea la plantilla de inicio).

Plantilla HTML5

Personalizar valores de variables

En el archivo unkuna-theme.css, encuentre la variable de la propiedad que desea editar; por ejemplo la variable --nkn-border-color.
Una vez ya tenga identificada la variable que desea modificar, le asigna el valor de su preferencia; por ejemplo --nkn-border-color: gray.
Guarde los cambios y visualice en su navegador.