CMS - Como crear un diseño y aplicarlo.

Los diseños en vB CMS son la estructura que sirve para aplicarlas en nuestras secciones. Un diseño puede constar de un bloque solamente o de una barra lateral donde van widgets y el bloque central donde va el contenido. De igual forma pueden crearse diseños de hasta 3 bloques o más.

En esta guía voy a mostrar como se puede crear un diseño y como se puede aplicar a una sección.

cmsdefault.png
Este screenshot muestra el diseño predeterminado que trae el CMS, cuando no se elije instalar datos de ejemplo. Si se instalan datos de ejemplo, hay que borrar todo ese contenido y luego borrar las categorías y por último las secciones. Las secciones no pueden ser borradas si tienen contenido.

Crear una sección:

1. Desplegar el menú de vBulletin CMS en el panel de administración y elegir Administrador de Secciones.
   cmsmenuadmincp.png
2. En una instalación sin contenido de ejemplo, solo veremos una sección llamada Home. Podemos renombrarla si gustan, lo que haremos aquí es crear una sección dentro de la existente, Home. Nombraremos la sección como Noticias. Le damos al botón Agregar Nueva Sección, superior derecho.
   noticias.png

Crear un Grid

1. Del menú vBulletin CMS, elegimos Administrador de Grids.
2. Aquí van a ver un solo grid llamado 3 Column Fixed-Liquid-Fixed, si ustedes instalaron contenido de ejemplo van a tener más grids, pero haré de cuenta que no. Le damos al botón Crear un Nuevo Grid.
3. Lo nombramos Contenido + Columna lateral 250px, con las siguientes opciones
   griddesign.png

Crear algunos Widgets

1. Antes de pasar a crear nuestro diseño, hace falta crear algunos widgets para la barra lateral. Vayamos a la opción Widgets.
2. Vamos a crear tres widgets, uno para los mensajes recientes del foro, uno para un widget usando html, y otro para encuestas recientes.
   
   • Mensajes Recientes: le damos a Crear Nuevo Widget. Lo nombramos Mensajes Recientes y elegimos Busqueda General, de tipo de widget y le damos a Guardar.
     
     • Le damos al enlace configurar que esta junto a nuestro widget, y de las opciones que aparecen solo vamos a elegir: Post (Mensajes) y le damos a Guardar.
     
     
   • Widget HTML: creamos un nuevo widget y esta vez elegimos HTML Estático, y lo nombramos Reloj, o el nombre de el widget que ustedes vayan a poner y le damos al botón Guardar.
     
     • Ahora vamos a configurar este nuevo widget. En el formulario pegamos el código HTML del widget que deseen poner, como ejemplo les dejo este código que yo usaré
       
       Código:

       <script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script>if (WIDGETBOX) WIDGETBOX.renderWidget('40f213de-e4d2-4ce1-92a0-bab6f6b09603');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/showtimeapp">Show Time App</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://docs.widgetbox.com/using-widgets/installing-widgets/why-cant-i-see-my-widget/">More info</a>)</noscript>

     
     
   • Encuestas Recientes: vayamos una vez más a crear un nuevo widget y elegimos como tipo de widget, Encuesta y lo nombran Encuestas Recientes y le damos al bóton Guardar.
     
     • Vayamos al link Configurar de nuestro nuevo widget y elegimos el total de encuestas a mostrar, y que el tiempo límite de antiguedad a mostrar encuestas. Yo elegí 1 encuesta, de los últimos 365 días
     
     Este es el resultado final:
     widgetsfinales.png
     
   
   

Bueno ya tenemos casi todo, solo nos falta crear nuestro diseño.

Creando Nuestro Diseño.

1. Ahora necesitamos crear nuestro diseño. Vayamos a la opción Administrador de Diseños. Vamos a ver un diseño ahí, es el que está usando el CMS actualmente. Necesitamos crear uno usando nuestro grid que creamos anteriormente.
2. Le damos al botón Crear un Nuevo Diseño.
   Título: Lo que deseen.. va ser para su CMS principal y ademas para la sección noticias. Yo lo nombré Diseño Predeterminado, ya que será el que usare en la página principal del CMS incluyendo la categoría Noticias.
   Cuadrícual (aka Grid ): aquí elegimos nuestro grid que creamos anteriormente, Contenido + Columna Lateral 240px.
3. Arrastremos el recuadro rojo llamado Contenido Primario al cuadro de la derecha. Luego seleccionemos Menú desde Widgets, y presionamos el botón [>] Arrastremos ese widget a la columna lateral izquierda. Hagamos lo mismo para el widget Mensajes recientes, Reloj, y Encuestas. Este es el resultado final:
   disenofinal.png

Ok hasta ahora nuestro CMS se ve de esta forma:
cmsantes.png

Calma... no es así como nos va quedar, hasta ahora hemos creado todo lo necesario para empezar a aplicarlo a nuestro CMS principal, HOME y a nuestra sección, Noticias. Así que no perdamos tiempo...

Aplicando nuestro diseño a nuestro CMS y Sección.

1. Vayamos a nuestro CMS, si.. esto no se hace en el panel de administración. Pasamos el puntero por ensima del título HOME y verán un icono en forma de lapiz. Le hacemos clic para editar la sección principal.
   edithome.png
2. Ahora solo necesitamos cambiar la opción Diseño de Sección, y elegimos nuestro diseño, Diseño Predeterminado y le damos al boton de arriba, Guardar.
3. Hagamos exactamente lo mismo para la sección Noticias. Yendo primero a dicha sección y luego haciendo clic en en icono en forma de lapiz y cambiamos al mismo diseño y volvemos a guardar.
   editarseccion.png
   
   Mientras estamos en las opciones de editar la sección, podemos cambiar varias opciones también. Yo he cambiado la opción de publicación a Publicado, así cada artículo o noticia que haga en esa sección va a ser publicada y no apareceran los típicos errores de no permisos a los usuarios. Ademas he cambiado la opción Columnas de Contenido a 2 Columnas. Así mi contenido aparecera en dos columtas, ver screen abajo.

Para el screenshot que pongo abajo del resultado final, he puesto algo de contenido como ejemplo así pueden ver como quedaría realmente.

final.jpg

Y bueno es todo.. suerte creando su diseño

pd: Al crear y configurar el widget del reloj, y luego aplicar todos los cambios seguramente se dieron cuenta de que el reloj aparece pegado al widget de arriba y ademas sin el recuadro que tienen la encuesta y los otros widgets. Bueno una solución media rápida sería incluir los códigos que crean esos recuadros. Acá les dejo todo el código como yo lo puse para que se vea como en mi screenshot:

Código HTML:

<div class="cms_widget">            
<div class="block">
        <!--  Widget Header -->
        <div class="cms_widget_header">
            <h3>La Hora</h3>
        </div>
        <div class="cms_widget_content">
            <div class="cms_widget_post_bit">
        
<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script>if (WIDGETBOX) WIDGETBOX.renderWidget('40f213de-e4d2-4ce1-92a0-bab6f6b09603');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/showtimeapp">Show Time App</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://docs.widgetbox.com/using-widgets/installing-widgets/why-cant-i-see-my-widget/">More info</a>)</noscript>
            </div>
            </div></div>
            </div>