Personalizar una página de contenido con HTML y CSS

Después de crear una página simple con una de las plantillas predefinidas, tal vez desee avanzar un poco más. Quizás quiera añadir un bloque nuevo en la parte inferior o añadir un encabezado grande centrado en la parte superior.

El cambio al modo experto le permite editar directamente el lenguaje subyacente de la página, el código HTML y CSS.

HTML y CSS son los lenguajes que están detrás de todas las páginas web; puede realizar tareas muy avanzadas con ellos, pero esencialmente están pensados para ser expresivos y fáciles de aprender. Tras jugar un poco con sus posibilidades, podrá hacer tareas sencillas como cambiar el diseño de la página, el tamaño del texto...

En este artículo, revisaremos algunos cambios básicos en una plantilla de página estándar. No pretendemos enseñar HTML y CSS, dado que existen otros recursos mucho mejores que nosotros para ello; no obstante, estos ejemplos pueden servir de base para seguir avanzando.

En primer lugar, vamos a crear una página nueva a partir de la plantilla "Main block + right column", como se describe en el artículo Crear una página de contenido simple. A continuación, cambie al modo experto usando el vínculo de la parte superior derecha de la interfaz. Ahora tiene 2 fichas "CSS" y "HTML" con el código subyacente de la página.

La ficha CSS por ahora está vacía, ya que no hay ningún código CSS específico. Sin embargo, aquí está el código HTML de la página:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8"><div class="ods-box"></div></div>
        <div class="col-md-4"><div class="ods-box"></div></div>
    </div>
</div>

Añadir una fila nueva

Cada una de las etiquetas <div> representa un bloque de la página; la clase asociada a cada uno de los bloques define su apariencia, como el ancho.

Más concretamente:
  • <div class="container-fluid"> es el bloque alrededor de toda la página, comprobando que ocupa todo el ancho disponible del explorador.

  • <div class="row"> representa una fila, que a su vez contiene otros bloques. Al pensar en una lógica de "filas", evitamos que los bloques se solapen por ser uno más grande que los demás.

  • <div class="col-md-8"> y <div class="col-md-4"> son 2 bloques que incluyen el contenido "real" (texto, por ejemplo). La idea con las clases col-md-8 y col-md-4 es entender el espacio disponible de cada una de las filas como una cuadrícula de 12 "celdas"; los bloques en el interior de esta fila pueden ocupar un total de 12 celdas, y cada uno de los bloques utiliza col-md-X, donde X es la cantidad de celdas que ocupará. Así, aquí queríamos que un bloque ocupara 2/3 del espacio y otro bloque ocupara 1/3, por lo que utilizamos 8 y 4 para dividir las 12 celdas disponibles. Esta lógica (denominada lógica de "cuadrícula") se describe en el artículo Diseñar un portal con capacidad de respuesta.

  • <div class="ods-box"> simplemente crea un bloque visual con un borde y un fondo, más apropiado para contener texto.

Ahora queremos añadir una línea nueva de 3 bloques, cada uno de los cuales con un tercio del espacio. Siguiendo con la lógica anterior, añadimos una fila nueva y 3 bloques que ocupan 4 células cada uno.

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8"><div class="ods-box"></div></div>
        <div class="col-md-4"><div class="ods-box"></div></div>
    </div>
    <div class="row">
        <div class="col-md-4"><div class="ods-box"></div></div>
        <div class="col-md-4"><div class="ods-box"></div></div>
        <div class="col-md-4"><div class="ods-box"></div></div>
    </div>
</div>

La vista previa ahora tiene este aspecto:

Configurar un estilo básico

El código CSS se puede utilizar para cambiar la manera en que se visualiza el contenido: puede cambiar el tamaño del texto, añadir un fondo de color o bordes, cambiar el color...

Hay varias formas de aplicar "reglas" CSS a un elemento de la página, pero una buena práctica que conviene tener presente es utilizar siempre "clases": al añadir class="miclase" a un elemento de la página, asocia una "clase" al elemento, y después puede escribir reglas para esa clase en el estilo CSS. Así puede aplicar la misma clase a varios elementos y, si cambia la página, las reglas seguirán aplicándose al elemento.

Supongamos que queremos ampliar algún texto más de lo habitual. En primer lugar, tiene que añadir una clase al elemento que contenga el texto; en este caso, "Hello world!":

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <div class="ods-box">
                <span class="larger-text">Hello world!</span>
            </div>
        </div>
        <div class="col-md-4">
            <div class="ods-box"></div>
        </div>
    </div>
</div>

A continuación, simplemente necesitamos añadir una regla en el código CSS para indicar que la clase "larger-text" debe tener un tamaño de texto mayor:

.larger-text {
    font-size: 24px;
}

Puede añadir muchas reglas CSS a cualquiera de los elementos.

Nota

Los colores de temas, definidos en la sección Apariencia del back office, pueden usarse en la hoja de estilos de la página, como variables CSS (más información en la documentación Personalizar el tema y el icono del portal).

Tenga presente que el resultado final no se visualizará en la vista previa de la página con Internet Explorer.