Helpcenter - Servicio APPs logo

HelpCenter - Centro de ayuda

Bienvenid@ al centro de atención a usuarios, ¿Cómo podemos ayudarte?

  Contenido

Añadir Estilos CSS

La plataforma permite definir estilos CSS personalizados para el sitio web público de cada proyecto.

Para ello, será necesario acceder a Menú lateral > Sitio web > Tema > Estilos CSS:


Esto permite crear nuevas reglas CSS o redefinir reglas para modificar el estilo de cualquier elemento del sitio web. 


image


A continuación, mostramos un ejemplo práctico para aprender a editar el color del precio de un formulario.


PASOS A SEGUIR

1. Abrir URL que corresponda en el navegador Google Chrome.

2. Posicionaremos el cursor sobre la información a editar.

3. Hacer click sobre el botón derecho del ratón, elegir opción "Inspeccionar elemento".

4. En el lateral derecho, se mostrará la información del sitio web en el área "Elements > Styles".

5. En este caso, localizaremos la información que configura el color de fondo del precio, que correspondería con la siguiente regla: .badge-money { background-color: #c53333;  este código asigna el color rojo al precio; se puede copiar únicamente este valor o todos los valores de estilo que aparecen.


image



Vista previa ampliada del código:

image



6. Probar el color a aplicar sobre la web, haciendo pruebas de tonos y seleccionando el que se aplicar.

Al hacer click sobre el cuadro de color que aparece, se desplegará un cuadro de configuración desde donde se podrá seleccionar cualquier otro tono.

Al seleccionar un color, se aplicará y se sobreescribirá el código de color que corresponda.


image


Al elegir un tono azul para reemplazar el color rojo del fondo de la etiqueta precio:


image



Vista previa ampliada del código:

image


7. Copiar el código que corresponda para editar el color en este caso y copiarlo al área de Estilos CSS.

Al acceder a este área, aparecerá el siguiente mensaje del que se podrá prescindir, se trata de un mensaje informativo.

image


Al copiar el código del Sitio web al área de estilos:

Es posible añadir únicamente la regla con el valor del fondo de la etiqueta del precio (señalado en rojo en la siguiente captura), o bien, añadir toda la información de estilos que incluye información definida sobre: el color de la fuente, tamaño, borde, margen, etc.

image


Tras guardar cambios, el cambio se aplicará sobre el proyecto y al ir de nuevo (o refrescar) a la página del formulario, el nuevo color sería el que aparecería.