Pues bien, el proyecto de hoy nos separara completamente la pagina de inicio del resto del diseño de nuestro template con Artisteer, permitiendonos inclusive elegir diferentes caracteristicas en la portada.
Podrian decir que esto se hace fácilmente con la asignación de menú, lo cual es completamente cierto, con eso y algunas ligeras modificaciones del template (o dos templates iguales con excepción de una edicion del encabezado se podria lograr algo como este ejemplo )
Este es un poco del estilo que maneja GavickPro en su template Coolfoto .
Asi que entonces queremos que este separado de esta manera.
Asi que sin más preambulo, esto es lo que necesitaremos.
1.- Un template de Joomla creado con Artisteer (yo estoy usando ahora la version 3.0.0.32906)
2.- Un editor de html/css/php
3.- Un servidor web local.
4.- Paciencia.
Este es nuestro template original.
Paso No 1: Editando el CSS.
Abriemos nuestro archivo TEMPLATE.CSS ubicado en la carpeta CSS del template de Artisteer, crearemos dos contenedores DIV agregando el siguiente codigo
El primero es el PORTCONTENEDOR, este contenedor no ocupara TODO el espacio de la pantalla y se vera completo sobre el fondo de nuestro Template
#portcontenedor{
position:absolute;
height:100%;
width:100%;
margin: auto;
background-image: url('../images/fondo.jpg') !important;
background-repeat:repeat;
}
Después el contenedor del contenido de la portada, este esta preparado para alinearse tanto vertical, como horizontalmente, con una medida de 440x1000 px, la cual puede ser ajustada de acuerdo a los requerimientos de nuestro diseño.
#portcontent{
top: 50%; left: 50%;
margin-top: -220px; margin-left: -500px;
height:440px; width: 1000px;
position:absolute;
border:#060 5px double;
background-color:#FFF;
}
Este codigo nos creara un contenedor y una fondo separados para nuestra portada.
Paso No 2: Editamos archivo TEMPLATEDETAILS.XLM.
Aquí simplemente agregaremos la posicion PORTADA en nuestra lista de posiciones, la cual se insertara en la lista <positions>
con el formato <position>portada</position>
Este paso ya lo hemos explicado en un tutorial anterior.
Paso No. 3: Editamos archivo INDEX.PHP
Aqui es donde haremos todo el truco, en mi anterior post comente la estructura del template de Artisteer, y la manera en que se encapsulan los contenedores DIV que lo conforman, la idea es excluir a todos los elementos del diseño si la posicion PORTADA esta ocupada.
Iremos a la linea que esta INMEDIATAMENTE debajo de la instrucción <BODY>, e insertaremos este código.
El cual evaluara cuantos modulos estan publicados en la posicion PORTADA y en caso de ser mayores a 0, se activara esta seccion
La cerraremos con la instrucción <?php endif; ?>
Inmediatamente despues de esta instruccion insertaremos una nueva condicion
La cual nos activara todas las demás opciones cuando la posición PORTADA no esta ocupada. Esta instricción la cerraremos hasta abajo del archivo, justamente inmediatamente antes de la instruccion </BODY> con un nuevo <?php endif; ?>
Aqui ya esta hecho el truco, si cualquier contenido es asignado a la posicion PORTADA inmediatamente excluira todo el resto del contenido de la pagina.
Ahora justo despues de la instruccion <?php if (artxCountModules($document, 'portada') > 0): ?> insertaremos nuestras declaraciones de los contenedores DIV que le dan el aspecto gráfico a la portada e incluiremos el codigo que mostrara el contenido de la posicion PORTADA, con el siguiente código.
<div id="portada">
<div id="portcontenedor">
<div id="portcontent">
<jdoc:include type="modules" name="portada" style=artstyle artstyle=art-block />
</div>
</div>
</div>
<div class="clr"></div>
Ahora, solo nos restara asignar un contenido a la posicion PORTADA y hacer la correcta asignacion del menu a la pagina de INICIO (esta configuración dependera de la estructura de su sitio web).
Obviamente dentro del contenedor de la portada se pueden anidar tantos contenedores DIV como sean necesarios a nuestro diseño y tantas posiciones como se requieran. Estas instrucciones son de hecho la base de los modulos autocolapsables que tanto se usan en el diseño de un template de Joomla.
Espero que el tutorial les sea de utilidad. Quedo a sus órdenes para cualquier duda.
Aqui insertare un comercial, el mio. Me dedico al montaje de paginas web a precios accesible, si alguien le interesa, mandeme un mensaje privado y vemos si llegamos a algún arreglo!!
Podrian decir que esto se hace fácilmente con la asignación de menú, lo cual es completamente cierto, con eso y algunas ligeras modificaciones del template (o dos templates iguales con excepción de una edicion del encabezado se podria lograr algo como este ejemplo )
Este es un poco del estilo que maneja GavickPro en su template Coolfoto .
Asi que entonces queremos que este separado de esta manera.
Asi que sin más preambulo, esto es lo que necesitaremos.
1.- Un template de Joomla creado con Artisteer (yo estoy usando ahora la version 3.0.0.32906)
2.- Un editor de html/css/php
3.- Un servidor web local.
4.- Paciencia.
Este es nuestro template original.
Paso No 1: Editando el CSS.
Abriemos nuestro archivo TEMPLATE.CSS ubicado en la carpeta CSS del template de Artisteer, crearemos dos contenedores DIV agregando el siguiente codigo
El primero es el PORTCONTENEDOR, este contenedor no ocupara TODO el espacio de la pantalla y se vera completo sobre el fondo de nuestro Template
#portcontenedor{
position:absolute;
height:100%;
width:100%;
margin: auto;
background-image: url('../images/fondo.jpg') !important;
background-repeat:repeat;
}
Después el contenedor del contenido de la portada, este esta preparado para alinearse tanto vertical, como horizontalmente, con una medida de 440x1000 px, la cual puede ser ajustada de acuerdo a los requerimientos de nuestro diseño.
#portcontent{
top: 50%; left: 50%;
margin-top: -220px; margin-left: -500px;
height:440px; width: 1000px;
position:absolute;
border:#060 5px double;
background-color:#FFF;
}
Este codigo nos creara un contenedor y una fondo separados para nuestra portada.
Paso No 2: Editamos archivo TEMPLATEDETAILS.XLM.
Aquí simplemente agregaremos la posicion PORTADA en nuestra lista de posiciones, la cual se insertara en la lista <positions>
con el formato <position>portada</position>
Este paso ya lo hemos explicado en un tutorial anterior.
Paso No. 3: Editamos archivo INDEX.PHP
Aqui es donde haremos todo el truco, en mi anterior post comente la estructura del template de Artisteer, y la manera en que se encapsulan los contenedores DIV que lo conforman, la idea es excluir a todos los elementos del diseño si la posicion PORTADA esta ocupada.
Iremos a la linea que esta INMEDIATAMENTE debajo de la instrucción <BODY>, e insertaremos este código.
<?php if (artxCountModules($document, 'portada') > 0): ?>
El cual evaluara cuantos modulos estan publicados en la posicion PORTADA y en caso de ser mayores a 0, se activara esta seccion
La cerraremos con la instrucción <?php endif; ?>
Inmediatamente despues de esta instruccion insertaremos una nueva condicion
<?php if (artxCountModules($document, 'portada') == 0): ?>
La cual nos activara todas las demás opciones cuando la posición PORTADA no esta ocupada. Esta instricción la cerraremos hasta abajo del archivo, justamente inmediatamente antes de la instruccion </BODY> con un nuevo <?php endif; ?>
Aqui ya esta hecho el truco, si cualquier contenido es asignado a la posicion PORTADA inmediatamente excluira todo el resto del contenido de la pagina.
Ahora justo despues de la instruccion <?php if (artxCountModules($document, 'portada') > 0): ?> insertaremos nuestras declaraciones de los contenedores DIV que le dan el aspecto gráfico a la portada e incluiremos el codigo que mostrara el contenido de la posicion PORTADA, con el siguiente código.
<div id="portada">
<div id="portcontenedor">
<div id="portcontent">
<jdoc:include type="modules" name="portada" style=artstyle artstyle=art-block />
</div>
</div>
</div>
<div class="clr"></div>
Ahora, solo nos restara asignar un contenido a la posicion PORTADA y hacer la correcta asignacion del menu a la pagina de INICIO (esta configuración dependera de la estructura de su sitio web).
Obviamente dentro del contenedor de la portada se pueden anidar tantos contenedores DIV como sean necesarios a nuestro diseño y tantas posiciones como se requieran. Estas instrucciones son de hecho la base de los modulos autocolapsables que tanto se usan en el diseño de un template de Joomla.
Espero que el tutorial les sea de utilidad. Quedo a sus órdenes para cualquier duda.
Aqui insertare un comercial, el mio. Me dedico al montaje de paginas web a precios accesible, si alguien le interesa, mandeme un mensaje privado y vemos si llegamos a algún arreglo!!
Mi web:
http://www.david-alvarez.com.mx/