Este tutorial nos indica como podemos editar los estilos de una plantilla creada con Warp 7 (UIKIT) mediante un archivo custom.css con solo unos pocos pasos.

Yootheme como siempre nos sorprende con sus lindos diseños y templates simples de modificar, y ahora último nos sorprendió con su poderoso framework multi plataforma UIKIT, lejos lo mejor que he visto hasta ahora.

Desde el lanzamiento de Warp 7, la estructura de directorios y archivos ha cambiado radicalmente por la inclusión de UIKIT y LESS.

Lo que más me gustaba de Warp era su facilidad de customización, no mediante una interfaz llena de botones, paletas, etc, sino que mediante mi querido archivo custom.css. Este archivo nos permite con un poco de conocimientos de CSS, modificar los estilos de las plantillas de YOOtheme "A Piacere" mediante algunas líneas de código y sin necesidad de estar recurriendo constantemente a la etiqueta y arma de doble filo !important.

Para la customización y poder contar nuevamente con nuestro querido archivo custom.css debemos realizar lo siguiente:

1. debemos acceder al directorio custom de nuestro template donde encontraremos los siguientes subdirectorios:

2. Luego entramos a la carpeta layouts, siempre dentro del directorio custom, y crearemos dentro un archivo que se llame "theme.config.php" (sin las comillas)

3.- dentro de ese archivo recién creado debemos escribir lo siguiente:

require(__DIR__.'/../../layouts/theme.config.php');

// add css
$this['asset']->addFile('css', 'css:custom.css');

?>

4.- Luego guardamos y cerramos ese archivo y nos cambiamos a la carpeta less, siempre dentro de la carpeta custom, y agregamos un archivo llamado theme.less y dentro del escribimos lo siguiente:

@import "../../less/theme.less";

5.- Luego guardamos y cerramos. Lo que acabamos de hacer es crear un archivo donde podremos agregar nuestro propio código Less sin intervenir los archivos originales.

6.- A continuación y por ultimo, nos vamos a la carpeta CSS, siempre dentro de la carpeta custom, y creamos nuestro querido archivo custom.css y empezamos a meter nuestro propio código para personalizar sus plantillas.

Para finalizar, es importante mencionar que esta carpeta custom pueden dejarla empaquetada en un lugar a mano porque la podrán reciclar en otros proyectos, es decir, eliminan la carpeta custom que viene de fabrica y reemplazar por la que acabamos de modificar. Esto funcionará sólo hasta que nuestros amigos de YOOtheme no hagan alguna modificación importante a la estructura de archivos y directorios.