Creando un Estilo | Personalización Avanzada | Documentación WS.WebTV | WebTV Solutions

Imprimir

Un Estilo está compuesto por archivos CSS, imágenes y, opcionalmente, un archivo Javascript. Crear/Editar un Estilo le permite modificar en gran medida la apariencia de la WebTV.

Le explicamos cómo crear un Estilo mediante un ejemplo...
Para el ejemplo crearemos un Estilo basado en el Estilo "Default", al que llamaremos "Mi Estilo".

1. Abra/Edite el archivo _theme.ini
El archivo de tema se encuentra en public/frontend/default/_theme.ini
Por favor, tenga en cuenta que es un archivo JSON, de texto "plano", UTF-8. Puede utilizar cualquier editor de texto "plano" como el Bloc de notas, Notepad2, Notepad++, Dreamweaver, etc. para editarlo.

...ahora busque la siguiente sección:
"styles": {
"default" : { "title" : "Default" , "description" : "{k.lang.be.style_description_default}" },
"default_wide" : { "title" : "Default [Wide Mod]" , "description" : "{k.lang.be.style_description_default_wide}" },
"minimalism_white" : { "title" : "Minimalism:White" , "description" : "{k.lang.be.style_description_minimalism_white}" },
"minimalism_white_wide" : { "title" : "Minimalism:White [Wide Mod]" , "description" : "{k.lang.be.style_description_minimalism_white_mod}" },
"ice_blue" : { "title" : "Ice:Blue" , "description" : "{k.lang.be.style_description_ice_blue}" },
"black" : { "title" : "Back" , "description" : "{k.lang.be.style_description_black}" }
},

2. Agrege una nueva entrada para su nuevo Estilo (y guarde...)
"styles": {
"default" : { "title" : "Default" , "description" : "{k.lang.be.style_description_default}" },
"mi_estilo" : { "title" : "Mi Estilo" , "description" : "Este es Mi Estilo" },
"default_wide" : { "title" : "Default [Wide Mod]" , "description" : "{k.lang.be.style_description_default_wide}" },
"minimalism_white" : { "title" : "Minimalism:White" , "description" : "{k.lang.be.style_description_minimalism_white}" },
"minimalism_white_wide" : { "title" : "Minimalism:White [Wide Mod]" , "description" : "{k.lang.be.style_description_minimalism_white_mod}" },
"ice_blue" : { "title" : "Ice:Blue" , "description" : "{k.lang.be.style_description_ice_blue}" },
"black" : { "title" : "Back" , "description" : "{k.lang.be.style_description_black}" }
},
Tenga presente que "mi_estilo" es el ID del nuevo Estilo.
El ID no puede contener espacios ni caracteres especiales (acentos, eñes, signos de puntuación, etc.)

Nota: Como el formato JSON es muy estricto, le recomendamos validar el archivo después de realizar cualquier modificación al mismo. Para esto, puede utilizar una herramienta de validación online como estas.

3. Duplique todas las carpetas correspondientes al Estilo "Default", que son loas siguientes:
public/frontend/default/css_default
public/frontend/default/images_default
public/frontend/default/js_default

4. Cambie el nombre de las carpetas duplicadas, para incluir el ID del nuevo Estilo:
public/frontend/default/css_mi_estilo
public/frontend/default/images_mi_estilo
public/frontend/default/js_mi_estilo

5. Publique el archivo "_theme.ini" modificado, así como las nuevas carpetas, al sevidor
El nuevo Estilo aparecerá en la sección Configuración > Apariencia de su WebTV.

6. Comience a editar los archivos del nuevo Estilo!
• Archivos CSS: public/frontend/default/css_mi_estilo
(No se olvide de cambiar las rutas de las imágenes para que reflejen el nombre de la carpeta de imágenes del nuevo estilo!)
     _main.css: Aplica a la interfaz "Escritorio" (la principal).
     _main.mobile.css: Aplica a la interfaz "Móvil" (en caso de que su WebTV tenga la extensión Interfaz Móvil).
     _popup.css: Aplica a los popups de Comentarios y Compartir por E-Mail.
     icons.css: Iconos sociales, y otros iconos comunes.
     modal.css: Las definiciones de estilo para las ventanas modales y tooltips (los tooltips no son utilizados en el front-end).
• Javascript específico del Estilo (si aplica): public/frontend/default/js_mi_estilo/style.js: Puede incluir scripts específicos para el Estilo en este archivo.
• Imágenes: public/frontend/default/images_mi_estilo

7. La imagen miniatura del Estilo!
La imagen miniatura mostrada para el Estilo es el archivo de nombre "_style.jpg" que se encuentra en la carpeta de imágenes del Estilo, en este caso, la imagen miniatura de su Estilo es: public/frontend/default/images_mi_estilo/_style.jpg

Recomendación: Siempre lleve un registro de las modificaciones que realice a la WebTV de manera que pueda reaplicarlas después de actualizaciones o reinstalaciones.