Tutorial: CMS - Como crear un diseño y aplicarlo.

imported_Elmer

Baneado
Zeta
Verificación en dos pasos desactivada
Desde
19 Jul 2003
Mensajes
1.865
Edad
40
Crédito(s)
0
Puntos
0
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.

Ver el archivo adjunto 1958
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.
    Ver el archivo adjunto 1959
  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.
    Ver el archivo adjunto 1960
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
    Ver el archivo adjunto 1961
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é
        Insertar CODE, HTML o PHP:
        <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:p
      Este es el resultado final:
      Ver el archivo adjunto 1962
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 (H)): 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:
    Ver el archivo adjunto 1963

Ok hasta ahora nuestro CMS se ve de esta forma:
Ver el archivo adjunto 1964

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.
    Ver el archivo adjunto 1965
  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.
    Ver el archivo adjunto 1968

    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.

Ver el archivo adjunto 1967

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:
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>
 

Braum

Alfa
Verificación en dos pasos desactivada
Desde
16 Feb 2006
Mensajes
22
Edad
49
Crédito(s)
0
Puntos
0
Gracias elmer, por tu dedicación y esfuerzo.
 

Clumsy

Curioso
Verificación en dos pasos desactivada
Desde
10 Dic 2009
Mensajes
11
Crédito(s)
0
Puntos
0
Hola Elmer,

yo (creo) no tengo CMS, acabo de instalar (vBulletin 4.0.0 Beta 5
)
pero me gustaría tener una columna en la que poder poner enlaces de interés. Me explico: en donde en tu ejemplo está Mensajes recientes, Reloj, y Encuestas yo querría tener un espacio para poner, por ejemplo, enlaces a páginas que me interesan

¿Puedo hacer eso? y si puedo ¿cómo?

he estado buscando por el foro pero no encuentro lo que busco, no lo se buscar me temo.

muchas gracias!!
 

lestat_shifo

Curioso
Verificación en dos pasos desactivada
Desde
11 Dic 2009
Mensajes
7
Crédito(s)
0
Puntos
1
Gracias soy muy nuevo aqui espero ir llenandome de conocimientos poco a poco
 

paranco

Alfa
Verificación en dos pasos desactivada
Desde
13 Ene 2008
Mensajes
18
Edad
39
Crédito(s)
0
Puntos
0
Dios santo... ya empiezo a extrañar el vb advanced!

Gracias por la guía.
 

bcilloniz

Gamma
Verificación en dos pasos desactivada
Desde
9 Oct 2008
Mensajes
232
Crédito(s)
0
Puntos
0
Justo lo que buscaba... pero una preguntita general:

¿Es posible plasmar cualquier diseño, o existen limitaciones?

Saludos y muchas gracias por tus aportes.
 

sienteasturias

Gamma
Verificación en dos pasos desactivada
Desde
29 Sep 2007
Mensajes
169
Edad
40
Crédito(s)
2
Puntos
2
Muchas gracias por el tuto, queda bien chulo.
Por otra parte tengo una duda, es posible o seria posible sacar ahi en el CMS por ejemplo algun post de alguna categoria del foro en concreto?

Gracias de antemano!
 

Andrés Durán

Xi
Verificación en dos pasos desactivada
Desde
23 Abr 2009
Mensajes
4.371
Edad
27
Crédito(s)
0
Puntos
0
Justo lo que buscaba... pero una preguntita general:

¿Es posible plasmar cualquier diseño, o existen limitaciones?

Saludos y muchas gracias por tus aportes.
Hola bcilloniz.

Es posible establecer cualquier diseño que hagas en el CMS.

Por otra parte tengo una duda, es posible o seria posible sacar ahi en el CMS por ejemplo algun post de alguna categoria del foro en concreto?
Hola sienteasturias.

No, de momento no es posible colocar temas del foro en el CMS, a menos que desde la ubicación del tema, hagas click en el botón "Promover a Artículo".
 

ZEL

Gamma
Verificación en dos pasos desactivada
Desde
17 Dic 2009
Mensajes
428
Crédito(s)
0
Puntos
0
ELmer esta gia tan exelente servira para 4.0.1 gracias
 

bcilloniz

Gamma
Verificación en dos pasos desactivada
Desde
9 Oct 2008
Mensajes
232
Crédito(s)
0
Puntos
0
Una preguntita al respecto.

Estuve averiguando qué es VB Advanced y me pareció entender que te permite hacer estas modificaciones con más facilidad... ¿Es verdad o para qué sirve? De todas formas he visto que todavía no sale la versión final para VB4, pero quería saber si sería mejor esperar a instalarlo o me mando a hacer las modificaciones con este tutorial.

Gracias de antemano.

Saludos
 

POLLO

Alfa
Verificación en dos pasos desactivada
Desde
4 Nov 2009
Mensajes
20
Edad
40
Crédito(s)
0
Puntos
0
Una pregunta no se puede poner en el CMS ningún widget que muestre la cantidad/numero de mensajes nuevos que hay en el foro desde la última visita.
Gracias de antemano.
 

bcilloniz

Gamma
Verificación en dos pasos desactivada
Desde
9 Oct 2008
Mensajes
232
Crédito(s)
0
Puntos
0
Demasiado claro el tutorial para mi gusto... ¡Te pasaste!

Sólo una preguntita más. ¿Cómo tendría que hacer para que aparezcan widgets a la izquierda y derecha del contenido principal, con columnas de 120 px? ¿Se puede?

Muchas gracias de nuevo. Esto le cambió la cara a mi home page.

Saludos
 

Arriba