Si seguiste el tutorial para construir de manera sencilla una app móvil con Appery, quizá ahora te gustaría personalizar tu app con tu propia paleta de colores. La propia plataforma Appery nos ofrece algunos “themes” que podemos usar en nuestra app. Ve a App settings y en Theme tienes algunos modelos (Gelato, Capuccino, Olive…)

Pero ¿qué pasa si quiero otros colores o poner sombra al texto, por ejemplo?  Una posibilidad es que seas un diseñador conocedor de CSS, un lenguaje de programación usado para cambiar el estilo de páginas web. Ah, ¿que no eres un experto en CSS? ¡No pasa nada! Te presentamos Themeroller. Para usarlo, no hace falta registro.

1. COMENZANDO CON THEMEROLLER

Swatch

La pantalla inicial nos presenta varios modelos de pantallas de móviles. Todo ello se puede configurar desde las opciones de la columna de la izquierda. Como ves, aparece una pestaña “Global” y otras “A”, “B”, “C” En la pestaña “Global” realizas cambios generales de la aplicación. En las pestañas nombradas con letras realizas cambios concretos. En Appery, puedes hacer una app con varias pantallas y, quizá, necesites que cada pantalla sea diferente. Para ello, te dan la posibilidad de configurarla a tu gusto y poder elegir cuál quieres en cada momento. En Appery esto se llama Swatch. Así, tu diseño para el swatch A puede ser diferente del swatch B. Si tu aplicación sólo tiene una pantalla esto no es necesario. Nosotros solo vamos a trabajar con la A.  

Por otro lado, te aconsejamos que dejes volar tu imaginación y te fijes en la pantalla para ver qué ocurre y comprobar los cambios que estás generando. Muchas veces es más fácil verlo en tu propio Themeroller.

2. CAMBIOS EN GLOBAL

2. 1.Colores

Colores

Hay muchos elementos a los que puedes cambiar el color: texto, botones, bordes…El color puede ser cambiado simplemente arrastrando un color de la paleta que tienes en la parte superior de la pantalla a la casilla correspondiente en la columna de la izquierda.

Esa paleta puede ser, además, configurada por ti añadiendo luminosidad (Lightness) o saturación (Saturation). Puedes cambiar de color o matizar el que has elegido pinchando en la caja de color y moviéndote a través de la rueda que aparecerá.

Colores

2.2. Sombras

Los textos tienen la posibilidad de disponer de sombras. Se trata de los números en “Text Shadow” El primer número controla la posición horizontal de la sombra. El segundo número, su posición vertical. El tercero, lo difuminada que quieres que aparezca.

2.3. Fondos de botones (BACKGROUND)

El fondo de los botones te permite controlar el relieve de los mismos ¿lo quieres en bajorrelieve,plano o en sobrerrelieve? ¡Prueba a cambiarlo!

El color en este caso nos muestra el color de un botón cuando esté pulsado.

2.4. Formas de botones (CORNER RADII)

Themeroller distingue entre botones simples (buttons) y grupos de botones (group) Aunque tu aplicación no contenga alguno de ellos, te aconsejamos que lo configures por si acaso más tarde quisieras añadir algún elemento. En “Corner” puedes elegir cómo quieres que sean los bordes de tus botones ¿redondeados o angulosos?

2.5. Iconos (ICON)

Se refiere  a los iconos que tienes en la parte superior de tu app (la casita, de HOME, por ejemplo) Puedes poner el icono en blanco o negro y cambiar el fondo.

3. CAMBIOS EN SWATCH A

Los colores operarían de igual manera aquí:arrastrar desde la paleta, configurarlos a tu gusto…

3.1. Header/Footer Bar

Esto cambia  las cabeceras de pantalla y de los botones.

3.2. Content body

Aquí cambiamos los elementos que están dentro de la pantalla, tales como links o texto fuera de los botones. También puedes cambiar el fondo de tu pantalla.

3.3. Button Normal

Nos muestra un botón en estado normal, es decir, sin ser pulsado.

3.4. Button Hover

Nos muestra un botón cuando pasamos el ratón por encima de él.

4. HE TERMINADO DE TRASTEAR ¿Y AHORA QUÉ?

Cuando consideres que tu obra de arte está terminada, sólo tienes que darle a Download.

download

Aparecerá una ventana donde tienes que hacer tres cosas

  • Poner un nombre a tu theme (en la esquina superior derecha) Pon un nombre sencillo y reconocible, luego tendrás que escribirlo.
  • En la pantalla te dan unas líneas de código, una de las cuales aparece en otro color (amarillo) Cópiala y pégala en un editor de texto.La necesitarás luego. De todas formas, te la dejamos aquí por si lo necesitaras:
link rel="stylesheet" href="css/themes/my-custom-theme.css"
  • Presionar Download zip. Se bajará un archivo zip.

Una vez bajado el zip, ábrelo. Verás que hay una carpeta Themes, ábrela. Dentro tienes dos archivos CSS. Extrae únicamente el que se llama como tu Theme (No el que se llama como tu Theme y tiene extensión .min.css) Déjalo en el escritorio,por ejemplo.

5. LLEVAR MI THEME A APPERY

Para ello tendrás que abrir tu cuenta de Appery y abrir tu proyecto (si no lo tenías abierto ya)

Una vez allí, en la columna de la izquierda, presiona “Create new” y allí das a “Theme” Te pide que lo nombres. Pon el mismo nombre que le pusiste en Themeroller para que no haya confusiones.

Se abrirá un editor de código, pero no tienes que programar nada. Sólo arrastra tu archivo .css (el que extrajiste del zip bajado) encima de ese editor.

Ahora el editor está lleno con el código de tu theme.

¿Recuerdas el link que copiaste? Debes añadirlo ahora a ese código. Si te fijas, en la línea 5 hay un espacio. Pégalo ahí. Debes cambiar la parte que dice my-custom-theme por el nombre de tu Theme (el que elegiste en Themeroller)

link rel="stylesheet" href="css/themes/mitema.css"

Dale a “Save”

6. CAMBIAR MI THEME EN APPERY

Diccionario_Sinonimos2

Tal y como explicamos al principio, puedes cambiar tu Theme en App Settings>Theme. En la lista disponible debería aparecer el Theme que acabas de cargar. Cámbialo y comprueba cómo ha quedado.









¿Tienes alguna duda? Déjanos un comentario e intentaremos ayudarte.



Enlaces recomendados

Tagged with →  
Share →