Tutorial como crear un template en joomla

X

xboxadictions

New Member
Messages
33
Reaction score
0
Points
0
PARTE 1

Wow! creo que ahora os empezáis a divertir, no? Os puedo decir que yo si que me divierto. Bueno, dejadme tomar otro café. Ahora vuelvo! Bien, al fin hemos llegado a la parte en la que se construye la plantilla....
Veamos como mambosolutions construye una plantilla. Queréis verlo?
Estoy seguro que hay diferentes formas de construir una plantilla de mambo. De hecho, se muy bien que las hay. Mi objetivo es de enseñaros la forma mas simple que conozco de crear, una plantilla mambo, usando tablas, insertando todo el código mambo jambo con la extensión ‘dreamweaver extension', y creando una especie de pre-visualización en directo ('live preview') del entorno usando MSAS. Os interesa ? Se validara el código? Probablemente no. Os enseñara la idea básica de como funcionan las plantillas de mambo y como podéis crearos una? O por lo menos eso espero! Vamos a por ello...
Tercera Fase: Construyendo una tabla con 3-columnas para la plantilla de Mambo
Etapa 1: Empecemos!
  • Abrid Dreamweaver y cread una nueva pagina de tipo 'dynamic page' --> php
Figure 3: Nuevo documento en Dreamweaver / New Document in Dreamweaver
new_doc1.png
  • Cambiaos a la vista en código y deberíais ver algo así :
Figure 4: Vista del Código en Dreamweaver / Code View in Dreamweaver


wol_error.gif
Deze afbeelding is verkleind. Klik op deze balk om de volledige afbeelding te bekijken. De originele afbeelding is 764x278.
new_doc.png
  • Seleccionad todo el código situado encima de la etiqueta</head> y borradlo
Figure 5: Borrar en código de encabezamiento con Dreamweaver/ Delete head code in Dreamweaver
wol_error.gif
Deze afbeelding is verkleind. Klik op deze balk om de volledige afbeelding te bekijken. De originele afbeelding is 766x344.
headtag_delete.png
  • Insertad el código de encabezamiento de mambo buscando y seleccionando el botón 'Insert Head Code'
    insertheadcode.png
    en la barra de herramientas Mambosolutions451
  • Deberíais de tener un código parecido a este:
Figure 6: Insertar Encabezamiento de Mambo en Dreamweaver / Insert Mambo Head Code in Dreamweaver
wol_error.gif
Deze afbeelding is verkleind. Klik op deze balk om de volledige afbeelding te bekijken. De originele afbeelding is 696x448.
headcode.gif

CODIGO DE ENCABEZAMIENTO (HEAD CODE) DE LA PLANTILLA DE MAMBO 4.5.1 (copiar/pegar de aqui abajo)
[FONT=Geneva, Arial, Helvetica, san-serif] Selecionad y Copiad[/FONT] [FONT=Geneva, Arial, Helvetica, san-serif](Click para seleccionar el contenido y copiarlo en el clipboard)[/FONT]
<?php /** * template_name - Mambo 4.5.1 template * @version 4.5.1 * @copyright (C) 2004 by yourname * @license licensce info here */ defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); $iso = split( '=', _ISO ); echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>'; ?> <!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"> <head> <?php if ( $my->id ) initEditor(); ?> <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" /> <?php mosShowHead(); ?> <?php echo "<meta name=\"author\" content=\"www.mambosolutions.com\" />" ?> <?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?> <?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?> </head>
Etapa 2: estilo de las tablas! Bien, trabajemos el estilo de las tablas en nuestra plantilla.
  • Cambiaos a la vista de diseño ('Design View') en Dreamweaver.
    designview.png
  • Click en cualquier sitio en el área blanca para activar el cursor
  • Vamos a crear 3 tablas separadas con el valor 100% en la variable width 'auto-stretch' de la plantilla. La parte de arriba de la tablas será para el encabezamiento (header area); el medio será para las columnas de la izquierda y la derecha ; y la parte de abajo será para el área del footer (footer area).
  • Dede el menu de arriba (top menu), ir a Insert>Table (Ctrl+Alt+T) Esto os abre la ventana de para crear tablas
  • Entrad los siguientes valores:
Figure 8: Insertar Tabla de dialoguo en Dreamweaver / Insert Table Dialogue in Dreamweaver
inserttable.png
  • Repetid el proceso un total de tres veces - hasta que tengais 3 tablas empiladas verticalmente con 100% width en cada una
  • Consejo: Localizad el 'Layout' tab, y seleccionad vista 'Expanded' -esto es opcional pero a veces ayuda a ver lo que estamos haciendo
Figure 9: Expandiendo la Vista de Diseño en Dreamweaver / Expanded Design View in Dreamweaver
expanded_view.png
  • Click una vez en el medio de la tabla para seleccionarla
  • Después, váis a ' Insert' >'Table' (CTRL+ALT+T) y creáis una tabla de 3 columnas y 100% width
Figure 10: Insertar una Tabla Encajada (nested) en Dreamweaver / Insert nested table in Dreamweaver
insert_3col.png
  • Ahora deberíais ver algo así:
Figure 11: Tabla de 3 columnas encajadas / Nested 3 column table in Dreamweaver
wol_error.gif
Deze afbeelding is verkleind. Klik op deze balk om de volledige afbeelding te bekijken. De originele afbeelding is 656x457.
3col_nested.png
  • Podéis ver como funciona la plantilla? Vamos a redimensionar las celdas de la derecha y de la izquierda de esta tabla - estas serán nuestras columnas izquierda y derecha en la plantilla - el área del medio será para el contenido principal de la página
  • poned el cursor en la celda izquierda y pulsad el ratón para seleccionarla
  • en las Propiedades entrad 18% para el width (yo eleji 18% para el width, pero podeis ajustarlo al valor que queráis )
  • Inicializad el alineamiento vertical a 'Top'
  • Click en la columna de la derecha, y repetid la operación con los mismos valores
  • mirad aqui abajo:
Figure 12: Redimensionar columnas en Dreamweaver / Resize columns in Dreamweaver
wol_error.gif
Deze afbeelding is verkleind. Klik op deze balk om de volledige afbeelding te bekijken. De originele afbeelding is 661x425.
3col_resized.png


Etapa 3: Llamando Todo el código Monkeys!
Ahora podemos empezar insertando código php especifico de mambo en nuestras plantillas, no os preocupéis si no conocéis PHP, no será muy complicado!
  • Localizad el botón del código Insert Main Body
    insertmainbody.png
    en la barra de herramientas Mambosolutions451a en Dreamweaver
  • Click una vez en la columna del medio. Seleccionad 'Main Content Area' - entonces seleccionáis el botón 'Insert Main Body'
  • para los que tengáis Macs o Linux el código 'Main Body' a insertar es::
    [FONT=Geneva, Arial, Helvetica, san-serif] Seleccionad y Copiad[/FONT] [FONT=Geneva, Arial, Helvetica, san-serif](Click para seleccionar el contenido y copiarlo en el clipboard)[/FONT]
    <?php mosMainBody(); ?>
    Abajo esta el código del layout de la tabla con el código Mambo 'Main Body' (con comentarios que he añadido)
Bueno, que tal estáis? Comprendéis como funciona? Espero que si!!! Normalmente hacer algo que merezca la pena, nos obliga a tomar el tiempo de hacerlo correctamente, y en nuestro caso especifico, significa dedicarle bastante tiempo
smile.gif

Continuemos añadiendo mas código. de acuerdo?
 
X

xboxadictions

New Member
Messages
33
Reaction score
0
Points
0
  • PARTE 2
  • Pulsad una vez en la columna de la izquierda y seleccionadla. Después pulsad en el botón de inserción 'Insert Left Modules'
    insert_leftmodules.png
    para añadir el código siguiente:
[FONT=Geneva, Arial, Helvetica, san-serif] Seleccionad y Copiad[/FONT] [FONT=Geneva, Arial, Helvetica, san-serif](Click para seleccionar el contenido y copiarlo en el clipboard )[/FONT]
<?php mosLoadModules ( 'left' ); ?>
  • Genial? Os gusto? Prosigamos y añadamos el modulo 'user1' posicionado directamente debajo de la posición izquierda
  • Aseguraos de que el código de la etiqueta placeholder
    php.png
    no este seleccionado mientras estéis en modo wysiwyg pulsando en el área blanca de la celda izquierda.
  • Localizad el botón del modulo 'Insert User1 Modules'
    insert_user1.png
    y pulsadlo para insertar el siguiente código en la columna de la izquierda:
[FONT=Geneva, Arial, Helvetica, san-serif] Seleccionad y Copiad[/FONT] [FONT=Geneva, Arial, Helvetica, san-serif](Click para seleciconar los contenidos y copiarlos en el clipboard)[/FONT]
<?php mosLoadModules ( 'user1' ); ?>
  • Ahora vayamos a la columna de la derecha, pulsad en la columna de la derecha para seleccionarla
  • Localizad el botón que posiciona el modulo 'Insert Right Modules'
    insert_right.png
    y al pulsarlo añadirá el código:
[FONT=Geneva, Arial, Helvetica, san-serif] Seleccionad y Copiad[/FONT] [FONT=Geneva, Arial, Helvetica, san-serif](Click para seleccionar y copiar los contenidos en el clipboard)[/FONT]
<?php mosLoadModules ( 'right' ); ?>
  • Ahora añadamos la posición del User2 debajo a la derecha ('Right'), aseguraos que el código de la etiqueta placeholder
    php.png
    no este seleccionado mientras en el modo wysiwyg hacéis click con el ratón en cualquier zona en el área blanca de la celda de la derecha.
  • Localizad in haced clik en el botón 'Insert User2
    user2.png
    ' para añadir el código PHP del User2:
[FONT=Geneva, Arial, Helvetica, san-serif] Seleccionad y Copiad[/FONT] [FONT=Geneva, Arial, Helvetica, san-serif](Click para seleccionar y copiar los contenidos en el clipboard)[/FONT]
<?php mosLoadModules ( 'user2' ); ?> Nuestras tablas en 'code view' deberían verse así:
Figure 13: Estilo (layout) de las Tablas en ódigo PHP Mambo añadido con Dreamweaver / Mambo Tables layout with Mambo php code added in Dreamweaver
tables_with_code_1.png
  • Añadamos el código de la función búsqueda 'search code', (nota: el modulo de búsqueda , esta incluido en Mambo 4.5.1- este ejemplo es opcional, por si os apetece codificarlo)
  • Vamos a poner el campo de búsqueda 'search field' en el tope de la columna de la derecha, con el objeto de explicar como funciona; el objetivo de este ejemplo es puramente pedagógico
  • En la columna de la derecha, donde añadisteis el código para las posiciones 'Derecha' y 'Usuario2' ('Right' and 'User2'), pulsad el ratón a la izquierda de la primera etiqueta placeholder de código php
Figure 14: Posicionar el cursor a la derecha del código del placeholder en Dreamweaver / Insert cursor to the left of the existing code placeholder in Dreamweaver
insert_search_cursor.png
  • Pulsad en el botón 'Insert Search'
    insert_search.png
    para añadir el código de Busqueda (Search code)
  • Debería parecerse a esto:
Figure 15: Campo de Busqueda en Dreamweaver / Search field in Dreamweaver
serach_form.png
  • Moviéndonos hacia la derecha, añadamos el área de banners.
  • Pulsad con el ratón en cualquier sitio en la parte de abajo de la tabla la llamada 'footer table' para seleccionarla.
  • Centrad el alineamiento de los banners seleccionando 'Center Align' en el panel de propiedades
Figure 16: Alinear al centro con Dreamweaver / Align center in Dreamweaver
aligncenter.png
  • Pulsad con el ratón el botón 'Insert Banners'
    insert_banners.png
    para añadir el código de los banners:
[FONT=Geneva, Arial, Helvetica, san-serif] Seleccionad y Copiad[/FONT] [FONT=Geneva, Arial, Helvetica, san-serif](Click para seleccionar y copiar los contenidos en el clipboard)[/FONT]
<?php mosLoadComponent( "banners" ); ?>
  • Añadamos el código del 'Footer' también:
  • Aseguraos que el código de la etiqueta placeholder
    php.png
    no esta seleccionado en estáis en modo wysiwyg pulsando el ratón en cualquier sitio dentro del área blanca en la parte de abajo de la tabla. De hecho para poner el footer debajo de los banners, solo tenéis que posicionar el cursor a la derecha del código de la etiqueta placeholder.
  • Añadid el código del footer pulsando el botón 'Insert Footer
    insert_footer.png
    '
[FONT=Geneva, Arial, Helvetica, san-serif] Seleccionad y Copiad[/FONT] [FONT=Geneva, Arial, Helvetica, san-serif](Click para seleccionar y copiar los contenidos en el clipboard)[/FONT]
<?php include_once('includes/footer.php'); ?> Esto es todo para el footer, vayamos ahora al encabezamiento o header, de acuerdo?
Crearemos una nueva tabla incrustada (nested) en la parte de arriba de la tabla, para indicar la ruta o ' pathway' y visualizar la fecha
  • Pulsad con el ratón en cualquier sitio en la parte superior (top) de la tabla para seleccionarlo
  • Desde el menú superior (top menú) de Dreamweaver. Añadid una nueva tabla con 2 columnas de 100% width seleccionado la opcion Insert>Table
  • Pulsad con el ratón en la celda derecha de la nueva tabla, id a Properties Inspector y manualmente inicializad el width a 30%
 
X

xboxadictions

New Member
Messages
33
Reaction score
0
Points
0
PARTE 3

Figure 17: Fecha y Pathway / Date and Pathway
date.png
  • Con vuestro cursor en la columna de la derecha de la tabla superior (top table), pulsad el botón Insert Date
    insert_date.png
    [FONT=Geneva, Arial, Helvetica, san-serif] Seleccionad y Copiad[/FONT] [FONT=Geneva, Arial, Helvetica, san-serif](Click para seleccionar y copiar los contenidos en el clipboard)[/FONT]
    <span class="small"><?php echo (strftime (_DATE_FORMAT_LC)); ?></span>
  • Ahora añadamos nuestro 'breadcrumb trail', o Pathway
  • Pulsad en cualquier sitio en la columna de la izquierda de la tabla superior para seleccionar la celda
  • Buscad y seleccionad el botón 'Insert Pathway
    insert_pathway.png
    '
[FONT=Geneva, Arial, Helvetica, san-serif] Seleccionad y Copiad[/FONT] [FONT=Geneva, Arial, Helvetica, san-serif](Click para seleccionar y copiar los contenidos en el clipboard)[/FONT]
<span class="pathway"><?php mosPathWay(); ?></span>
Bien ahora, supongo que estaréis ansiosos de ver como todo esto se ve directamente desde Mambo, verdad? Por supuesto que si...pero acordaos -aunque hemos estado creando el estilo (layout) de nuestra plantilla y hemos añadido código php que le permitirá a Mambo correr. No hemos hecho aun ningún diseño, entonces no esperéis ver un resultado final impresionante al mirar la plantilla...es mas a este nivel serán simplemente texto y tablas!

Etapa 4: Creando nuestra estructura de directorio para Mambo y copiando la plantilla en el directorio de 'templantes' en Mambo y moviendolo a MSAS.
Una plantilla de Mambo esta estructurada de la forma siguiente.
Figure 18: Estructura del directorio de una Plantilla / Directory structure of a template
structure.png
  • Arrancad MSAS.exe si no esta corriendo
  • Navegad al folder de plantilla 'templates' de Mambo en MSAS
  • W:\www\mambo45\templates
  • Cread un nuevo directorio con el nombre de 'ms_dwtutorial'
  • Abrid el directorio llamado 'ms_dwtutorial', y cread 2 directorios - uno llamado 'CSS' y otro llamado 'images'
  • Salvad el fichero en el que habeis estado trabajando en Dreamweaver con el nombre index.php en el directorio 'ms_dwtutorial'
  • ahora necesitamos crear el fichero 'templateDetails.xml'. Cread un nuevo fichero xml (consiste en un fichero texto con la extensión .xml en windows o macinthosh), copiad el código que sigue y ponedlo en el directorio 'ms_dwtutorial' - salvadlo como un 'templateDetails.xml'
[FONT=Geneva, Arial, Helvetica, san-serif] Seleccionad and Copiad[/FONT] [FONT=Geneva, Arial, Helvetica, san-serif](Click para seleccionar y copiar los contenidos en el clipboard)[/FONT]
Code: 
 <?xml version="1.0" encoding="iso-8859-1"?> <mosinstall type="template"> <name>ms_dwtutorial</name> <creationDate>Dec 2004</creationDate> <author>mambosolutions</author> <copyright>This template is released under GNU/GPL License.</copyright> <authorEmail>info@mambosolutions.com</authorEmail> <authorUrl>www.mambosolutions.com</authorUrl> <version>1.0</version> <description>mambosolutions dreamweaver/MSAS tutorial template</description> <files> <filename>index.php</filename> <filename>template_thumbnail.png</filename> </files> <images> <filename>images/header.jpg</filename> <filename>images/header_bg.jpg</filename> </images> <css> <filename>css/template_css.css</filename> </css> </mosinstall>
 
X

xboxadictions

New Member
Messages
33
Reaction score
0
Points
0
  • Ahora ya es el mmento de crear el stylesheet que controlara cosas como tipo de fuente, colores, link rollovers, bordes alrededor del contenido, etc....todo ello esta en el template_css.css
  • Abrid el directorio CSS y cread un nuevo fichero css llamado 'template_css.css'
  • Copiad/pegad el siguiente código css dentro del fichero 'template_css.css' y salvadlo.
  • Para obteber una lista de todos los estilos CSS usados in Mambo 4.5 mirad esta gran lista que Visualdensity recompilo
[FONT=Geneva, Arial, Helvetica, san-serif] Seleccionad y Copiad[/FONT] [FONT=Geneva, Arial, Helvetica, san-serif](Click to select contents and copy them to the clipboard)[/FONT]
Code: 
 BODY { margin : 0px 0px 0px 0px; background-color : #FFFFFF; color : #000000; background-color: #F8F8FF; scrollbar-base-color: #778899; } td, tr, p, div { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 11px; color : #333333; } ul { margin : 0px 0px 0px 0px; } hr { background : #CCCCCC; height : 1px; width : 100%; } .title { font-family: sans-serif; font-size: 24px; font-weight: bold; color : #7B8DA1; } .pathway { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; } a.pathway:link, a.pathway:visited { color : #000000; font-weight : normal; } a.pathway:hover { color : #000000; font-weight : normal; text-decoration : underline; } /* --Default Class Settings-- */ a.mainlevel:link, a.mainlevel:visited { color: #333333; background-position: left; text-align: left; font-weight: bold; } a.mainlevel:hover { color: #00000; background-position: left; text-align: left; } a.mainmenu:link, a.mainmenu:visited { color: #333333; font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, serif; font-weight: bold; } a.mainmenu:hover, { color: #000000; text-decoration: underline; } a.sublevel:hover { color: #000000; text-decoration: underline; } a.sublevel:link, a.sublevel:visited { color: #333333; font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, serif; font-weight: normal; } table.moduletable { margin: 0px 0px 0px 0px; width: 95%; border-left: solid 0px #000000; border-right: solid 0px #000000; border-top: solid 0px #000000; border-bottom: solid 0px #000000; margin-left: 5px; } table.moduletable th { font-size : 11px; font-weight : bold; color : #000000; text-align : left; width : 100%; padding: 10px 10px 10px 10px; margin: 20px 5px 20px 5px; } table.moduletable td { font-size: 10px; font-weight: normal; border: 1px solid #333; padding: 10px 10px 10px 10px; margin: 20px 5px 20px 5px; background-color: #F8F8FF; } .poll { font-family : Arial, Helvetica, sans-serif; font-size : 10px; color : #666666; line-height : 14px; } .sectiontableheader { background-color : #CCCCCC; color : #7B8DA1; font-weight : bold; } .sectiontableentry1 { background-color : #F0F0F0; } .sectiontableentry2 { background-color : #E0E0E0; } .small { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 10px; color : #3366C0; text-decoration : none; font-weight : medium; } .smalldark { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 10px; color : #000000; text-decoration : none; font-weight : normal; } .contentpane { background : #FFFFFF; } .contentpaneopen { background : #FFFFFF; } .contentheading, .componentheading { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 11px; font-weight : bold; color : #7B8DA1; text-align : left; } .createdate { font-family : Arial, Helvetica, sans-serif; font-size : 10px; color : #999999; text-align : left; } .button { font-family : Verdana, Arial, Helvetica, sans-serif; font-style : normal; font-size : 10px; font-weight : bold; background-color : #F0F0F0; color : #000000; border : 1px solid #CCCCCC; } .inputbox { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 10px; color : #000000; background-color : #F0F0F0; border : 1px solid #CCCCCC; } a:link, a:visited { font-size : 11px; color : #000000; text-decoration : none; font-family : Verdana, Arial, Helvetica, sans-serif; } a:hover { color : #000000; text-decoration : underline; } /* For content item titles that are hyperlink instead of Read On */ a.contentpagetitle:link, a.contentpagetitle:visited { font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; color: #000000; text-align:left; } a.contentpagetitle:hover { font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; text-align:left; color: #7B8DA1; text-decoration: underline; font-weight: bold; } a.category:link, a.category:visited { color : #333333; font-weight : bold; } a.category:hover { color : #7B8DA1; } /* Styles for dhtml tabbed-pages */ .ontab { background-color: #ffae00; border-left: outset 2px #ff9900; border-right: outset 2px #808080; border-top: outset 2px #ff9900; border-bottom: solid 1px #d5d5d5; text-align: center; cursor: hand; font-weight: bold; color: #FFFFFF; } .offtab { background-color : #e5e5e5; border-left: outset 2px #E0E0E0; border-right: outset 2px #E0E0E0; border-top: outset 2px #E0E0E0; border-bottom: solid 1px #d5d5d5; text-align: center; cursor: hand; font-weight: normal; } .tabpadding { } .tabheading { background-color: #ffae00; text-align: left; } .pagetext { visibility: hidden; display: none; position: relative; top: 0; } /* for modifying {moscode} output. Dont set the colour! */ .moscode { background-color: #f0f0f0; } /* Text passed with mosmsg url parameter */ .message { font-family : Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size : 10pt; color : #ff6600; text-align: center; } /* custom stuff */ .container { border: solid; border-width: 1px; border-color: #efefef; background-color: White; } .boxes { border: solid; border-color: #efefef; border-width: 1px; }
Etapa 5: Añadir la imágen del encabezameinto (header)
Quizás queráis añadir una imágen grafica in el encabezamiento (header área). Aqui se indica como hacerlo
Primero abro Photoshop and y creo mi imágen de encabezamiento (header image), en este caso decido de crear una imágen de 700px de ancho y 100 px de alto. Asumo que conocéis los comandos basicos de Photoshop, si no fuese el caso, tenéis a vuestra disposicion muchos manuales de Photoshop en internet. Mirad las imágenes en este ejemplo de plantilla.
La clave, la centrar la imágen en el encabezameinto con una variable de 100%, esta en la imágen de fondo en forma de tiles. Para crear esta imágen, simplemente seleccionad la imágen de encabezamiento y en la parte de la derecha de la imágen haceis otra seleccion de aproximadamente 3 pixels de ancho (width) y toda la altura. Después copiad esta seleccion (CTRL +C), abrid un nuevo documento en Photoshop, y pegadla dentro. Entonces pulsad (CTRL +T) para poneros en el modo Scale. Agarrad los handles y estirad vuestra imágen de ambos lados. Salvad esta imágen con le nombre 'header_bg.jpg' en el folder de las imágenes.
Después añadamos el código HTML pertinente en nuestra plantilla que esta en el fichero 'index.php'. Solo necesitamos añadir el siguiente código:
headerimage_code.gif

ahora ya podéis ir a MSAS, abrid el panel del administrador....

Navegad al enlace http://localhost/JOOMLA/administrator
login como : username: admin
password: admin
Id a la sección 'Template Manager' y seleccionad 'dw_tutorial' como plantilla por defecto (default template). Después vais a Site>Preview para ver vuestra plantilla.
Deberia de parecerse a esta pagina
smile.gif
 
X

xboxadictions

New Member
Messages
33
Reaction score
0
Points
0
wol_error.gif
Deze afbeelding is verkleind. Klik op deze balk om de volledige afbeelding te bekijken. De originele afbeelding is 780x697.
template_preview.gif

Salvad este fichero (click derecho -save as...) para la forma final del código de la plantilla index.php (podeis bajaros esta y cambarle el nombre). esto tiene algunos colores de fondo añadidos y alineamientos. Podeis copiar/pegar este fichero como 'index.php' y usarlo como base de vuestra plantilla. aqui podeis descargar todos los ficheros incluyedo los ejemplos de Photoshopuff
Bueno, os he enseñado las bases necesarias para crear vuestras plantillas en Mambo, pero no os conforméis con esto - hay muchísimas cosas mas que aprender. El fichero CSS es vuestro amigo, en verdad lo es
smile.gif
Exploradlo, jugad con el, con los diferentes valores que tiene, sentíos cómodos con el. El fichero CSS es la clave para hacer soluciones complejas y pequeños detalles en vuestra plantilla. No entrare mucho en detalles con el fichero CSS, pero cubriré unos puntos importantes. . También os sugiero que si quereis aprender un poco mas sobre CSS que exploréis las siguientes fuentes de información :
a list apart
the noodle incident
blue robot
 cPanel®
cPanel®
cPanel®
Si os parece este manual útil, o tenéis alguna sugestión para mejorarlo, corregirlo , o para cualquier consulta, por favor enviad un correo en el hilo de los foros de mamboserver:
dreamweaver template tutorial - Mambo - A PHP & MySQL Content Management System
No os olvidéis de crear una imágen thumbnail de vuestra plantilla. Para ello, hacéis un pantallazo de vuestra versión final en vuestro navegador , lo editáis en Photoshop formato200px X 200px, y lo salváis en vuestro directorio 'ms_dwtutorial' con el nombre de fichero 'template_thumbnail.png'
Para tener la lista de las diferencias del código entre las versiones 4.5 y 4.5.1 en las plantillas de Mambo mirad este grafico de Arthur konze en www.mamboportal.com
Bonos para los usuarios de Flash! Como añadir un encabezamiento 'flash header' y usar un objeto compartido flash, de tal forma que la introducción flash solo se ejecute una vez.
descargar el ejemplo de plantilla con fuente .fla (Flash MX)
Es importante que recordéis que cuando usáis flash en una plantilla Mambo el path del swf debe de ser relativo al directorio raiz del sitio de mambo. En mi ejemplo, puse el fichero .swf en el directorio templates/ms_dwtutorial_flash/images/ y el código es este:
Code: 
               <OBJECT classid="clsid[IMG]http://xboxadictions.com/images/smilies/biggrin.gif[/IMG]27CDB6E-AE6D-11cf-96B8-444553540000"
     codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
     WIDTH="780" HEIGHT="100" id="ms_flash_playonce_demo" ALIGN="">
     <PARAM NAME=movie VALUE="templates/ms_dwtutorial/images/ms_flash_playonce_demo.swf">
    <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF>
    <EMBED src="templates/ms_dwtutorial/images/ms_flash_playonce_demo.swf" quality=high bgcolor=#FFFFFF
    WIDTH="780" HEIGHT="100" NAME="ms_flash_playonce_demo" ALIGN=""
     TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
    </OBJECT>
    
    
    Para codificar vuestro flash de forma que solo aparezca una vez, añadid este código en la primera frame de vuestra pelicula flash:
    
    
    function checkSO()
    {
    // If a shared object called siteSO already exists this will retrieve it otherwise it
    // creates a new shared object called siteSO
    var SO = SharedObject.getLocal("siteSO");
    if(SO.data.visitedAlready)
    {
    gotoAndPlay("end");
    }
    else
    {
    SO.data.visitedAlready = true;
    SO.flush();
    }
    }
    // Put that and this in the first keyframe of your movie, before the intro
    checkSO();
entonces la ultima frame de vuestra pelicula, cread un frame llamada: end


Ya esta. Esto es todo!!!!




Gracias por leer este manual, espero que os hayáis divertido con Mambo, y espero haber tenido la oportunidad de enseñaros algo, sobre como crear plantillas Mambo.
Si os gusta este manual, y quereis agradecermelo, por favor os pido que penseis en hacer una donacion o inscribiros en el Template of the Month Club - estos son los links.
 
figu120

figu120

New Member
Messages
921
Reaction score
0
Points
0
Que buen manual thanks....

Pues intentare hacer un template personalizado para mi sitio web ..
jejeje :) o^)
 
N

Novel

New Member
Messages
19
Reaction score
0
Points
0
:eek4: Oh My God! qué buen tutorial!
yo uso Joomla, no lo domino mucho y justo estoy viendo la creación de templates. Esto me ayudará.
Si no es mucha molestia, no tendrías algun manual para themes en Drupal :dunno:
 
detodoseries

detodoseries

Community Advocate
Community Support
Messages
1,284
Reaction score
3
Points
38
wenas, pare compolicado pero lo intentaremos aver que sale gracias buen aporte xDD

saludos!!
 
biovirus

biovirus

New Member
Messages
195
Reaction score
0
Points
0
seria buena idea que escribieras la fuente del manual, porque ese no es de tu autoria, ya lo había visto hace mucho.
 
C

crashdummy

New Member
Messages
7
Reaction score
0
Points
0
Gracias a ambos por los tutoriales. No parecen muy faciles que digamos, ya vere un poco como es la cosa...

Saludos
 
biovirus

biovirus

New Member
Messages
195
Reaction score
0
Points
0
Last edited:
You must log in or register to reply here.
Top