Table of Contents

Personalizando las plantillas por defecto

Todas las plantillas que vienen por defecto con CMS Made Simple 0.11.X contienen más o menos el mismo código HTML. Su mayor diferencia radica en la clase de menú usan, y en si tienen uno o más bloques de contenido. El resto se consigue aplicando estilos con CSS.

Así, las plantillas por defecto de CMSMS no usan tablas. En su lugar se utilizan etiquetas div para definir cada bloque de contenido de la página. La posición y el estilo de cada uno de estos bloques puede personalizarse mediante CSS.

En esta sección daremos un paseo por una plantilla, elemento a elemento, para explicar qué son cada uno de ellos y cómo cambiarlos.

Su estilo y apariencia se modificarán en las hojas de estilo que se adjuntan a cada plantilla.

Declarar el DOCTYPE y especificar el lenguaje 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Esta es la declaración de tipo de documento o DOCTYPE. Le dice al navegador qué versión de (X)HTML está usando tu documento, para que pueda interpretarlo correctamente. También resulta necesario para que las herramientas de validación puedan revisar la sintaxis de tu código.

Las primeras dos lineas pueden dejarse tal y como están. Lo que puede que necesites cambiar es la declaración del lenguaje en la etiqueta <HTML>. Ahí es donde se especifica el lenguaje de tu contenido. Cambia "en" por el código de dos letras de tu idioma ("es" para Español, por ejemplo).

Puedes leer más sobre el DOCTYPE en el W3C.

También puedes consultar los códigos de dos caracteres de otros idiomas.

Marcas de cabecera 

<head>

<!-- Type the title of your site here -->

<title>Title of your page here</title>
{stylesheet}
</head>

Teclea el título de tu sitio entre las etiquetas <title>. Esto aparecerá por ejemplo en la barra de título de tu navegador. Si quieres que también aparezca, por ejemplo, el título de cada página, puedes añadir la etiqueta {title}. La etiqueta {title} es una marca reservada que será reemplazada con el título de la página que estás viendo (y que puedes editar en Contenido -> Páginas -> Añadir/Editar página). También puedes introducir la etiqueta {sitename} para reflejar el nombre del sitio que está contenido en el parámetro que puedes personalizar en Sitio -> Configuración general -> Site name.

La etiqueta {stylesheet} es una marca que enlaza a todas las hojas de estilos que hayas adjuntado a la plantilla. Esto significa que sólo tienes que añadir la etiqueta una vez para que se enlacen todas sus hojas de estilos.

El contenedor de la página 

<body>

<div id="page">

Este es el principio del bloque div que contiene a la página completa. En su hoja de estilos puedes definir el ancho de la página, si está centrada, y demás.

¿Cómo personalizarla?

  • Busca div#page en la hoja de estilos que se llama Layout.

La cabecera 

   <div id="header" class="clearfix">
                 
   </div><!-- end header -->

La cabecera de la página es donde se encuentra el logotipo de CMSMS. Como puedes ver, no hay información en la plantilla sino que todo el contenido del encabezado se ha introducido mediante CSS. Esto se ha hecho para obtener un código HTML muy limpio. Sin embargo, si quieres puedes añadir en la plantilla texto u otra información que quieras que aparezca en la cabecera.

La clase clearfix contiene algo de CSS para que la página se vea igual en varios navegadores.

¿Cómo personalizarla?

  • Busca div#header en la hoja de estilos que se llama Layout. Ahí es donde puedes indicar el color de fondo, el logotipo, la altura, etc.

Posición (Breadcrumbs) 

   <div class="breadcrumbs">
        {breadcrumbs delimiter='&raquo;' initial='1'}
    </div>

La posición (breadcrumbs) son enlaces que le muestran al visitante en qué página está actualmente, y en qué posición de la jerarquía se encuentra dicha página. Puede tener un aspecto similar a este: Inicio >> Sección >> Subsección

En CMS Made Simple hay una etiqueta que añade la posición a cada página: {breadcrumbs}.

delimiter="&raquo;" significa que se usará el carácter "»" para separar los niveles entre sí.

initial='1' significa que la posición comienza con un separador. Si no se pone, o se pone a '0', no se mostrará ningún delimitador antes del primer nivel.

¿Cómo personalizarla?

  • busca div.breadcrumbs al final de la hoja de estilos que se llamada Layout. Ahí podrás personalizar la fuente, el fondo, etc.
  • Para leer más sobre el uso de la etiqueta {breadrumbs}, pulsa el enlace de ayuda que hay a la derecha de Breadcrumbs en Extensiones -> Tags en el Panel de administración.


El resto de la plantilla por defecto se está actualizando a la última versión.


This page in: English - Deutsch - Español - Français - Italiano - Lietuvių - Nederlands - Norsk - Polski - Česky - Русский - Svenska - Tiếng Việt - عربي - 日本語 简体中文

Retrieved from "http://wiki.cmsmadesimple.org/index.php/User_Handbook/Getting_Started/Designer/Customizing_Templates/es"

User Handbook/Getting Started/Designer/Customizing Templates/es

From CMSMS

A2 Hosting