Formulario de búsqueda

- - - - Manuals 5 kk - - - -

Estilo
Aplicar una CSS para modificar el estilo del portal
CSS por portal
Aplica una CSS propia para adaptar el diseño actual del portal a uno personalizado.

El desarrollo por completo de los estilos, según un diseño previo, es la solución más acertada para transformar un portal municipal estándar en uno completamente personalizado.

No es objetivo de este manual explicar el funcionamiento de las CSS, al contrario, se da por supuesto que los usuarios tienen ya la capacidad de enfrentarse a este lenguaje.

El desarrollo de este punto pretende únicamente disponer las pautas para facilitar el éxito de la misión. Vea como hacerlo.

Panel de Control / Editar páginas

En el proceso de creación el asistente guía en la correcta configuración de la nueva página.

Paso 1
Parta de un diseño bien analizado

Ayúdese de un diseñador gráfico o en su defecto, utilice el papel para dibujar la web que desee. Intente que el nuevo aspecto se agradable y evite colores estridentes que, para una web municipal, son totalmente desaconsejables.

Paso 2
Maquete sus contenidos

Utilice los paneles para disponer todos los elementos en la Plantilla del Sitio y las páginas que necesite. No olvide que su misión es personalizar un portal que ya está heredando muchas hojas CSS.

En este punto, aún cuando no haya integrado su CSS, verá que los contenidos son visibles de una u otra manera. No se preocupe, siga maquetándolos hasta que el portal contenga todos los elementos necesarios.

Paso 3
Defina sus clases

Defina las zonas que necesite y nómbrelas adecuadamente para controlar todo lo que puedan contener. Hágalo aunque de momento crea que no será necesario. A veces ocurre que se necesita especificar algún comportamiento diferenciado entre regiones y se hace muy útil este procedimiento.

Por defecto, en todas las regiones se incluyen identificadores genéricos y otros específicos, escritos generalmente en las regiones de los paneles según puede verse en la ilustración. Utilice el Maquetador de diseño para consultarlas o crear las suyas.

Consulte el capítulo Nombrar clases propias para obtener una mayor información.

Paso 4
Comience desarrollando las CSS desde lo más genérico a lo más concreto

La escritura del código CSS la deberá realizar un profesional cualificado. Un experto sabrá como plantear la hoja de estilos correctamente. Es imprescindible que el programador lo haga metódicamente, estructurando bien el flujo del código según las herencias y dejando notas para localizar fácilmente los bloques de CSS que actúan sobre un elemento determinado. Es decir, sigua la fórmula genérico + concreto.

Por ejemplo, para identificar un listado use la clase “listado”, si este es además de anuncios seria recomendable incluir “listado listado-anuncio” pero si encima tiene la particularidad de contener únicamente los anuncios destacados “listado listado-anuncio listado-anuncio-destacado”

Con esta formula, por ejemplo, podrá controlar como se muestran todos los paneles que sean “listado” y establecer diferencias con los listados de anuncios.

Paso 5
Concrete los elementos importantes de la portada

Céntrese en la portada y compruebe la presencia de todos los elementos que lo componen. Habiendo desarrollado las CSS generales  ¿quiere que algún componente tenga una presentación diferente? Hágalo. Sin duda alguna su portal gana cuanto más diverso y dinámico sea.

Paso 6
Precise el aspecto de los paneles que difieren del genérico

Conforme vaya desarrollando el código, siempre de lo genérico a lo concreto, compruebe la presentación de los elementos y continúe matizando posteriormente las diferentes variaciones del código base. Por ejemplo, defina primero los listados:

ul a  { color: #ff0000; font-size: 1em; }

 

Y después precise la diferencia de un elemento determinado

.destacado ul a { font-size: 1.2em; }

Paso 7
Compruebe las vistas de listado, nodo, resúmenes, etc.

No olvide comprobar el aspecto de todas las páginas que haya creado, así como de la vista de nodo, los resúmenes y los listados. Existen muchas URLs que también debería verificar, como el mapa web, aviso legal, términos y condiciones, etc.

Paso 8
Navegue intensamente por todo el portal

Visite todas las opciones del menú, así como cualquiera de los enlaces presentes en su portal para asegurarse de que no queda nada fuera del nuevo estilo.

Paso 9
Pruebe sus estilos y corrija

Vaya puliendo sus CSS conforme navega en su portal rediseñado y consolide el nuevo diseño.

Paso 10
Panel de Control / CSS por portal

Seleccione Crear una nueva CSS en la pantalla de CSS por portal.

Paso 11
Panel de Control / CSS por portal / Crear nueva CSS

Escribe o pegua tu código CSS, guarda los cambios y comprueba que estos sean correctos.

 

Temas

Portales Municipales
Drupal