Bienvenido a Joomlamania!, aquí encuentras:Ver posiciónes de modulos en tu template en Joomla!
Para ver las posiciones de modulos en tu template desde el frontend solo debes de ingresar en tu url index.php?tp=1 como se muestra en el siguiente ejemplo:
http://www.tusitio.com/index.php?tp=1
Recuerda reemplazar tusitio.com sea por tu dominio... :D
Espero este mini tutorial les haya servido.
Arnold
Modulo Bookmark Us!
Este pequeño tutorial muestra como usar el modulo Bookmarkus 1.0, este es el primer tutorial para Joomla de este tipo, es un mini-experimento mio siempre pensando en el usuario para facilitarle aun mas el aprendizaje de este excelente CMS.
Una vez que lo hayamos instalado damos click a Site Modules:
Aparecera el Administrador de Modulos:
Damos click en el modulo Bookmark Us:
Ahora entramos a la configuración del modulo:
NOTA: Pasa el puntero del mouse sobre las diferentes areas de la imágen y da click para ver la función de cada parámetro:
- Module Order: Aqui se selecciona la manera en que queremos que se ordene el modulo.
- El modulo aparecera en primer lugar si elegimos la posicion 1 que en este ejemplo le pertenece al modulo Main Menu.
- El modulo aparecera en primer lugar si elegimos la posicion 1 que en este ejemplo le pertenece al modulo Main Menu.
- Access Level: Aqui se selecciona el nivel de acceso que queremos asignarle al modulo.
- Public: El modulo se mostrara a todos los usuarios.
- Registered: El modulo se mostrara solamente a los usuarios registrados y usuarios con atributos Special.
- Special: El modulo solo se mostrara a usuarios que tengan el atributo Special.
- Pages/Items
- Menu Item Link(s): Aqui se selecciona en donde queremos que se muestre el modulo, (multiples opciones son posibles usando Ctrl+Click)
- Menu Item Link(s): Aqui se selecciona en donde queremos que se muestre el modulo, (multiples opciones son posibles usando Ctrl+Click)
- Module Format: Aqui se define que formato queremos usar para el modulo
- Valores posibles: Format 1 y Format 2
- Valores posibles: Format 1 y Format 2
- Display Images: Aqui definimos si queremos mostrar las imágenes
- Valores Posibles:
- Show Bookmark Site: Aqui se define si queremos mostrar el enlace "Agregar Sitio" en el modulo.
- Valores Posibles:
- Bookmark Site Image:
Aqui definimos si queremos usar las imágenes predeterminadas del modulo o si queremos usar nuestras propias imágenes.
- Valores Posibles:
- Bookmark Site Image File: Si no queremos usar la imágen predeterminada podemos ingresar aqui el nombre de una imágen que queramos:
- Show Bookmark Page: Aqui se define si queremos mostrar el enlace "Agregar Página " en el modulo.
- Valores Posibles:
- Bookmark Page Image:
Aqui definimos si queremos usar las imágenes predeterminadas del modulo o si queremos usar nuestras propias imágenes.
- Valores Posibles:
- Bookmark Page Image File: Si no queremos usar la imágen predeterminada podemos ingresar aqui el nombre de una imágen que queramos:
- Bookmark 1 Image:
Aqui definimos si queremos usar las imágenes predeterminadas del modulo o si queremos usar nuestras propias imágenes.
- Valores Posibles:
- Bookmark 1 Image File: Si no queremos usar la imágen predeterminada podemos ingresar aqui el nombre de una imágen que queramos:
- Bookmark 2 Image:
Aqui definimos si queremos usar las imágenes predeterminadas del modulo o si queremos usar nuestras propias imágenes.
- Valores Posibles:
- Bookmark 2 Image File: Si no queremos usar la imágen predeterminada podemos ingresar aqui el nombre de una imágen que queramos:
- Bookmark 3 Image:
Aqui definimos si queremos usar las imágenes predeterminadas del modulo o si queremos usar nuestras propias imágenes.
- Valores Posibles:
- Bookmark 3 Image File: Si no queremos usar la imágen predeterminada podemos ingresar aqui el nombre de una imágen que queramos:
Una vez que tengamos configurado nuestro mdulo, damos click a "save":
Eso es todo!
Espero que este tutorial les haya servido.
Molok
Instalar extensión para Dreamweaver de Joomlasolutions
Con este tutoriál podrás contar con las herramientas necesarias para empezar a trabajar en la elaboración de templates para Joomla! y para hacerlo, debes tener la extensión descargada en tu máquina (de lo contrario pulsa aquí para descargarla) y lo que harás para instalar la extensión Joomlasolutions 1.0 en Dreamweaver MX, es lo siguiente:
a) Abre el programa Macromedia Exchange (si no lo tienes descarga la versión de prueba de la página oficial de Macromedia)
b) Busca el predeterminado de Dreamweaver, que será donde instalarás la extensión Joomlasolutions:
c) Ahora pulsa en el menu la leyenda archivo>>instalar extensión:
d) Busca el archivo Joomlasolutions en tu pc y acepta la instalación de carga:
e) Pulsa aceptar en la ventana de confirmación:
f) Podrás ver que ya tienes cargada tu extensión en Exchage junto a todas tus demás extensiones.
g)Finalmente entrarás a Dreamweaver MX y en el menu principál observarás tu nueva herramienta Joomlasolutions instalada y lista para realizar tus plantillas Joomla!
Ten en cuenta que ocupando este procedimiento puedes instalar TODAS las extensiones posibles para tu Macromedia, háblese de Dereamweaver, Flash, Fireworks, etc., etc.
Eso es todo amigos, espero les sirva de algo el tutorial.
Alicante
Instalar componente manualmente
Instalar un componente manuálmente.
En la pc máquina local:
a) Bajarse de internet el componente deseado a la pc local y vacunarlo.
b) Descomprimir el componente en una carpeta "x"
b.1) Dentro de la carpeta "x" el componente descargado creará otra carpeta "y" en ella estará el contenido del componente
c) Cerciorarse de cuantas y cuantos archivos y carpetas contiene la carpeta "y" del paquete desempacado. (opcional)
En el servidor vivo:
a) Acceder al cliente FTP
b) Entrar en la carpeta administrator/components/com_installer/component/
c) Depositar dentro de la carpeta component, la carpeta "y" del componente desempacado a instalar.
d) Corroborar el número de carpetas y archivos que subiste con lo contado en la pc local (opcional)
e) Renombrar la carpeta "y" con un nombre cualquiera diferente del componente a instalar, por ejemplo: "pepito".
f) Otorgar permisos a la carpeta "pepito" y su contenido por medio del cliente FTP con un CHMOD 777.
g) Entrar al Administrador de Joomla!
h) En Home>>Configuration Global>>pestaña Servidor señalar los permisos CHMOD 777 tanto en carpetas nuevas como archivos instalados.
i) En la barra de herramientas, entrar a la opción Intallers>>components
j) En el segundo campo llamado Install from directory escribir la ruta donde se depositó la carpeta "pepito", por ejemplo:
http://www.tusitio.com/administrator/components/com_installer/component/pepito
j.1) En caso de no conocer la ruta puedes buscar la carpeta "pepito" desde tu FTP u oprimiendo el botón examinar del cuadro de texto de arriba orpimiendo "examinar", localizas la carpeta "pepito", copias la ruta y la pegas en el campo de abajo (dentro de installers>>components).
k) Ejecutar la instalación pulsando el botón install.
k.1) De ser exitosa la instalación Joomla! mostrará la palabra Suscess… Continue...
l) Oprimir Continue...
Publicar el componente:
a) Acceder al menu deseado y enlazar al componente instalado mediante:
menumanager>>tumenu>>new>>component
b) Escoger el componente instalado en la ventana de opciones.
c) Señalar la casilla Publicar.
d) Guardar los ajustes.
Regresar los permisos anteriores el Joomla! (por seguridad)
a) Entrar de nuevo al cliente FTP y borrar la carpeta "pepito" con todo el contenido del mismo.
b) En la barra de herramientas de Joomla! entrar a Home>>ConfigurationGlobal>>pestaña servidor y regresar los permisos al modo por defecto del servidor.
En este tutoriál tratamos de ser lo más detallados posible para que te sea de mejor comprensión los pasos a seguir para instalar un componente de forma manual, por supuesto que, en la medida que vayas ampliando tus conocimientos, podrás mejorar y simplificar este procedimiento a tan solo unos cuantos pasos.
Como punto final añadimos, si existen problemas en la instalación del componente, concretamente en el paso k, debes asegurarte que estas instalando un componente compatible con la versión que tienes de Joomla!, o bien, consultar en los foros de ayuda el problema, en la mayoría de los casos lo que te pasó, le ha pasado alguien más.
Espero les sirva este tutorial amigos.
Saludos cordiales,
Alicante
Insertar una posición de modulo en template
Crear una posición nueva para un modulo dentro de la plantilla Joomla!
Este procedimiento es con el objeto de crear una posición que albergará un modulo cualquiera en la plantilla, para ello, debemos realizar los siguientes pasos:
a) Bajarte una copia a tu pc local el index.php de la carpeta templates que estés usando y abrirlo desde un procesador de lenguaje html, php etc., como puede ser dreamweaver (opcional) y realizar la edición en tu máquina local (recomendable no hacerlo desde la administración de Joomla!)
b) Definir la posición que tendrá el nuevo modulo dentro de la plantilla en el index.php (copia).
c) Insertar el siguiente código en el index.php (copia) con el nombre del nuevo modulo, en este caso, "nuevo" :
<?php mosLoadModules ( 'nuevo' ); ?>
d) Puedes ocupar etiquetas HTML para ubicar estéticamente el código dentro de tu index.php (copia).
e) Guardar los ajustes realizados con el mismo formato.
f) Entrar al servidor y localizar el archivo index.php (original).
g) Renombrar el index.php (original) con otro diferente que no sea index (*.php) por ejemplo, el nombre de tu perro.
firulais.php
h)Subir el archivo index.php (copia) ya editado al servidor dentro de la carpeta templates que usas.
i) Ir a la administración de Joomla!
j) Abrir Site>>Template Manager>>Module Positions
k) Crear la nueva posición escribiendo en el número progresivo siguiente, el nombre "nuevo" de la posición creada.
l) Guardar los ajustes.
m) Cerciórate de que TODO se vea bien desde tu navegador.
n) Entra de nuevo al servidor desde FTP y borra el archivo index.php (original) que renombraste. o) El archivo index.php (copia) ahora será tu original.
Listo! Ya puedes ocupar la nueva posición para cualquier modulo que pretendas publicar en este lugar de tu plantilla.
Si existe algún problema en el paso "m" borra el index.php copia y restablece el original a su nombre inicial ( firulais.php a index.php) y todo estará como si nada hubiese pasado.
Eso es todo amigos, esperamos les sirva este tutorial para sus trabajos.
Pd: Este procedimiento es válido para crear posiciones nuevas con el componente banners, lo único que cambia, es el código a insertar:
<?php mosLoadComponent( "banners" ); ?>
Saludos cordiales,
Alicante
Insertar imágenes en Joomla!
Insertar imágenes en Joomla!
Existen dos procedimientos muy comunes para insertar imágenes en el CMS Joomla!
El primero de ellos y el más usual es utilizando el ícono "insert image", mismo que encontrarás en la parte baja del lado izquierdo del casillero dentro de tu item (noticia).
Para llevarlo a cabo debemos empezar creando la noticia, o nos colocamos dentro de cualquier item previamente creado, el orden es indiferente. Después que tengamos nuestro contenido en las casillas correspondientes, escojemos una imagen en el panel de parameters (parámetros), concretamente en la pestaña images, ejecutamos el botón >> para añadirla, deberás ahora tener dos imágenes iguales. El siguiente paso es darle las características particulares que tendrá la imagen a mostrar, como puede ser un título, la ubicación del mismo, el texto alternativo etc., Después damos un click con el boton derecho del mouse en el casillero del texto para ubicar nuestro cursor en el sitio donde queremos aparezca la imagen y posteriormente pulsamos el icono "insert image".
Notarás en tu casillero apareció el siguiente código:
Finalmente debes pulsar el icono Apply para que se otorgue la instrucción de mostrar la imagen que escogiste con las características propias a tu gusto.
Posiblemente te sea un poco confuso lo antes descrito, no te preocupes, lo haremos de nueva cuenta mostrándote con imágenes paso a paso como debes hacerlo.
En primera instancia debes con un click colocar el cursor dentro de tu noticia para ubicar el lugar que ocupará la imagen.
1.-Pulsar en Parameters la pestaña images
2.-Escoger la imagen deseada
3.-Pulsar el icono >> para añadirla
4.-Pulsar el icono "insert image"
5.-Manteniéndola seleccionada otorgar características
5.1 Posición de la imagen (izquierda, centro, derecha)
5.2 Texto alternativo
5.3 Ancho del margen o borde (1,2,3 etc.,)
5.4 Texto visible
5.5 Ubicación del texto (arriba, abajo)
6.-Pulsar el botón Apply
7.-Pulsar Save (guardar ajustes)
El segundo procedimiento para insertar imágenes es mediante la forma tradicional usando las etiquetas HTML que se ocupan para colocar una imagen, para ello debes - en tu item (noticia)- pulsar el icono html para insertar el código, al hacerlo te aparecerá una ventana, es ahí donde debes colocar el código que llamará a tu imagen.
Enseguida te mostraremos como hacerlo:
El primer paso es subir la imagen al servidor vivo en el lugar específico donde tienes tus imágenes, por ejemplo, en una carpeta llamada mis_imágenes depositaremos nuestro archivo de imagen llamado horoscopos.jpg. Lo siguiente será controlar la ruta que tiene por defecto la imagen que subiste, es decir, al colocar la imagen invariablemente debe haber un camino para localizarla, luego entonces, ese camino puede ser algo parecido a esto:
Ruta absoluta:
http://www.tusitio.com/images/stories/mis_imagenes/horoscopos.jpg
Ahora deberás colocar la ruta entre las etiquetas HTML
<img xsrc="http://www.tusitio.com/images/stories/mis_imagenes/horoscopos.jpg">
Posteriormente pulsas el icono de HTML en tu editor, te aparecerá una ventana popup, en ella colocas el código antes citado, pulsas Update y listo! Ya tienes insertada la imagen en tu item (noticia), no olvides guardar los ajustes pulsando el icono Save. El resultado sería esto:
Ah! La cosa no para aquí, puedes editar la presentación de tu imagen mediante ciertas características, propias del lenguaje HTML, como el ancho de la imagen, la altura, editar el borde, texto alternativo, la posición, colocarla en una celda dentro de una tabla, o bien, entre etiquetas div, en fin, hay muchas posibilidades, pero eso es otro cuento aparte.
Por último, señalaremos que Joomla! reconoce los archivos de imagen del tipo: jpg, png, gif y jpeg.
Esperamos les sirva este tutorial
Alicante
Insertar banners swf
BANNERS EN JOOMLA!
Indudáblemente hay varias formas de colocar banners en el sitio Joomla!, en este caso veremos como insertar banners con el método de crear un nuevo modulo; es relativamente
fácil si comprendemos el manejo correcto del código que permite visualizar el archivo .swf, veamos el siguiente ejemplo de como hacerlo:
Para ello debemos contar previamente con el archivo .SWF que deseamos insertar como
banner en el front page de Joomla! o en cualquier sección del sitio. Después crearemos un Modulo Nuevo desde el Administrador mediante la ruta Modules>>SiteModules>>New
Despues creamos el nuevo modulo como vemos en la imagen siguiente:
Se abrirá el contenido del nuevo modulo, pero antes generamos el código de siempre de flash, les recomiendo usar el editor de su agrado para realizar dicha acción, si es que no cuentas con una idea de como hacerlo; en este caso utilizaré Dreamweaver para llevarlo a cabo, ¿cómo? observa la siguiente imagen :
Como puedes apreciar ahora, el código para insertar un archivo flash se ha creado y aparece en negrita en la parte superior del Dreamweaver (codigo), y en la parte de diseño se muestra claramente lo que será la imagen de flash.
Este código que generamos lo debemos insertar en la caja del editor en nuestro
Modulo Nuevo que pasos atrás creamos, el dato importante es hacerlo en modo HTML,
esto se puede lograr ejecutándo el icono de HTML de tu editor, observa la siguiente imagen:
Se abrirá un Popup en modo HTML, es ahí donde colocaremos el código que activa el archivo .swf que generamos en el Dreamweaver.
Ejecutamos el boton Update y de esta forma lograremos insertar el código en el
contenido del nuevo modulo.
Designamos el nombre del modulo (si queremos que aparezca el nombre lo seleccionamos), la posición que ocupará para mostrarse en el front page o cualquier sección de tu sitio, lo publicamos y Listo!
Ya tenemos nuestro banner insertado en Joomla! Este procedimiento lo puedes hacer tantas veces quieras para publicar infinidad de banners en tu sitio web.
El código que normalmente se usa para un sitio vivo es de esta forma:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="150" height="100">
<param name="movie" value="http://www.tusitio.com/images/tuarchivo.swf">
<param name="quality" value="high">
<embed xsrc="http://www.tusitio.com/images/tuarchivo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="150" height="100"></embed>
</object>
Los parámetros a cambiar serían www.tusitio.com/images/tuarchivo.swf, recuerda siempre tener en cuenta la ruta absoluta que enlace a donde se encuentre tu archivo swf.
Otras alternativas pueden ser utilizando el mambot Load Module Positions , y otra más el mambot InsertModule o {modulebot}
Eso es todo amigos, esperamos les sirva este tutorial.
saludos
Alicante
Ingresar enlaces de la manera correcta
Este mini tutorial muestra la manera correcta de ingresar un enlace en un item de contenido.
Normalmente al ingresar un enlace en un item de contenido los usuarios que no tienen activado un editor WYSIWYG lo ingresan de esta manera:
Esto provocaria que el usuario que al dar click en ese enlace vaya a la dirección:
http://www.tusitio.net/www.algunapagina.net
Esta dirección anterior obviamente no existe y al usuario le saldria una página de error.
Asi que cada vez que se ingrese un enlace en un item de contenido se debe de ingresar de la siguiente manera:
De esta manera se abrira la URL sin problema alguno.
Espero este mini tutorial les haya sido útil.
Saludos
Alicante
Editar Footer en Joomla!
En este tutorial se mostrara como quitar del footer el mensaje:
"Joomla! is Free Software released under the GNU/GPL License."
Esto es necesario en sitios de clientes que no quieren que se muestren links o mensajes de copyright que no sean de ellos.
Para poder cambiar este mensaje hay que editar el archivo version.php que se encuentra en la carpeta:
joomlaroot/includes/version.php
el codigo es:
<?php
/**
* @version $Id: version.php 1843 2006-01-15 19:41:35Z stingrey $
* @package Joomla
* @copyright Copyright (C) 2005 Open Source Matters. All rights reserved.
* @license http://www.gnu.org/copyleft/gpl.html GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/
/**
* Version information
* @package Joomla
*/
class joomlaVersion {
/** @var string Product */
var $PRODUCT = 'Joomla!';
/** @var int Main Release Level */
var $RELEASE = '1.0';
/** @var string Development Status */
var $DEV_STATUS = 'Stable';
/** @var int Sub Release Level */
var $DEV_LEVEL = '7';
/** @var int build Number */
var $BUILD = '$Revision: 1843 $';
/** @var string Codename */
var $CODENAME = 'Sunburst';
/** @var string Date */
var $RELDATE = '15-Jan-2006';
/** @var string Time */
var $RELTIME = '20:00';
/** @var string Timezone */
var $RELTZ = 'UTC';
/** @var string Copyright Text */
var $COPYRIGHT = 'Copyright (C) 2005 Open Source Matters. All rights reserved.';
/** @var string URL */
var $URL = 'Joomla! is Free Software released under the GNU/GPL License.';
/**
* @return string Long format version
*/
function getLongVersion() {
return $this->PRODUCT .' '. $this->RELEASE .'.'. $this->DEV_LEVEL .' '
. $this->DEV_STATUS
.' [ '.$this->CODENAME .' ] '. $this->RELDATE .' '
. $this->RELTIME .' '. $this->RELTZ;
}
/**
* @return string Short version format
*/
function getShortVersion() {
return $this->RELEASE .'.'. $this->DEV_LEVEL;
}
/**
* @return string Version suffix for help files
*/
function getHelpVersion() {
if ($this->RELEASE > '1.0') {
return '.' . str_replace( '.', '', $this->RELEASE );
} else {
return '';
}
}
}
$_VERSION = new joomlaVersion();
$version = $_VERSION->PRODUCT .' '. $_VERSION->RELEASE .'.'. $_VERSION->DEV_LEVEL .' '
. $_VERSION->DEV_STATUS
.' [ '.$_VERSION->CODENAME .' ] '. $_VERSION->RELDATE .' '
. $_VERSION->RELTIME .' '. $_VERSION->RELTZ;
?>
Lo que debemos editar es la linea 40:
/** @var string URL */
var $URL = 'Joomla! is Free Software released under the GNU/GPL License.';
Esto lo cambiamos por lo que queramos por ejemplo:
/** @var string URL */
var $URL = '©2006Mi sitio - Todos los derechos Reservados.';
Una vez que tengamos lo que queremos es hora de editar el archivo footer.php que se encuentra en el mismo directorio que el archivo version.php:
joomlaroot/includes/footer.php
el codigo es:
<?php
/**
* @version $Id: footer.php 85 2005-09-15 23:12:03Z eddieajau $
* @package Joomla
* @copyright Copyright (C) 2005 Open Source Matters. All rights reserved.
* @license http://www.gnu.org/copyleft/gpl.html GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/
// no direct access
defined( '_VALID_MOS' ) or die( 'Restricted access' );
global $_VERSION;
// NOTE - You may change this file to suit your site needs
?>
(C) <?php echo mosCurrentDate( '%Y' ) . ' ' . $GLOBALS['mosConfig_sitename'];?>
<?php echo $_VERSION->URL; ?>
Este archivo lo editariamos para que quede de la siguiente manera:
<?php
/**
* @version $Id: footer.php 85 2005-09-15 23:12:03Z eddieajau $
* @package Joomla
* @copyright Copyright (C) 2005 Open Source Matters. All rights reserved.
* @license http://www.gnu.org/copyleft/gpl.html GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/
// no direct access
defined( '_VALID_MOS' ) or die( 'Restricted access' );
global $_VERSION;
// NOTE - You may change this file to suit your site needs
?>
<?php echo $_VERSION->URL; ?>
Nota: NUNCA quites el copyright del código de ningún archivo de Joomla! o de componentes, modulos, mambots, etc.
Eso es todo!
Espero que este pequeño tutorial les haya sido util.
Molok
Editar CSS con Dreamweaver MX
En este tutorial abordaremos la forma de editar la plantilla CSS que trae por default el Joomla!, el archivo es el /template/rhuk_solarflare_ii/css/template_css.css
Para lograr el objetivo es recomendable trabajar en localhost, para ello hay que contar con lo siguiente para trabajar, al menos en este tutorial.
a)Servidor instalado (XAMPP , easyphp, MSAS, appServer, etc., etc.,) y corriendo, activo, encendido, prendido u como quieras llamarle.
b)Macromedia DreamweaverMX.
c)Un navegador (firefox, IE, opera, netscape, etc.,)
d)Preferentemente una guia CSS a la mano, al menos que seas un experto en las hojas de estilo, en caso de serlo omite leer el tutorial, pues está dirigido a los Newbies. En Proyecto Hispano contamos con una guia CSS Joomla! que puede servirte.
Abre tu archivo index.php de la plantilla que uses desde el Dreamweaver, en este caso lo haremos con la del rhuk_solarflare_ii que trae por default el Joomla!:
Encontramos el objetivo, el "index.php" :
En Dreamweaver visualiza el archivo pulsando en vista "DIVIDIR" para que observes tanto el código como el diseño de la plantilla:
Como vés el aspecto es un poco rústico, tratemos de mejorarlo integrando el css.
Ahora viene uno de los pasos de mayor importancia en la edición de tu plantilla, cargar el archivo CSS para que Dreamweaver lo integre junto al index.php de tu Joomla!:
Al pulsar el icono deberás localizar el archivo css, "template_css.css":
Pulsas el icono "aceptar" y Woila! aparece ahora la cabecera de tu Joomla! con un aspecto mucho más agradable a la vista. Sin embargo, acostumbrate a ver tu Joomla! desde un navegador cada que modifiques algo, pues es mejor y más fácil.
En tu inspector de etiquetas y/o ventana diseño del Dreamweaver podrás ver tu css integrado, despliegalo y observa los estilos de tu archivo css:
Para que puedas ver tus cambios en cuanto los realices, debes guardarlos y visualizar el resultado pulsando el icono del globo, después pulsa sobre el navegador que tienes por default activado, o la ruta corta es pulsando la tecla f12.
Ahora solo deberás editar los diferentes estilos que hay en tu Joomla!:
La ventana 1 te especifica el panel de las definiciones de estilos (código).
La ventana 2 las reglas o sentencias que puedes modificar en cada código.
La ventana 3 te muestra las propiedades de la definición que pretendes editar, como son, la fuente, fondo, bordes, etc., etc.,
En la ventana 4 del ejemplo puedes ver las reglas que tienes como alternativa para editar el estilo, para hacerlo solo pulsa en cada fila y te aperecerán las diferentes opciones que puedes aplicarle.
Puedes cambiarle el texto y el color a tus definiciones de estilo.
Algo interesante podría ser el cambiar el estilo de letra a tu Joomla!, para hacerlo localiza la definición de tu estilo, pulsa dos veces "body" y te aparecerá en la vista código el contenedor del mismo, a su vez cambia las reglas que tiene por default, inclusive puedes agregar un font que no tengas cargado, observa como lo hacemos:
Al pulsar sobre el tipo de fuente original te abre la opción de agregar más estilos de fonts al Dreamweaver.
Al aceptar ya puedes insertar ese font nuevo a la definición de tu estilo en el "body" y colocarlo en la reglas, exáctamente en "fuente", Dreamweaver lo cargará en automático al template_css.css y solo debes guardar los cambios para ver su efecto, no olvides estar posicionado en la pestaña del template_css.css en el Dreamweaver.
Otra maniobra podría ser una imagen de fondo, para ello debes nuevamente abrir el "body" pulsandolo dos veces te abrirá su contenedor tanto en la vista código y el inspector de css. En este último arrastras con el puntero del mosuse sin soltarlo, el icono del radar o bien, localizas el archivo que te servirá de imagen de fondo mediante el icono de la carpeta que mostrará el arbol del sitio.
Pulsas el background-repeat y decides si quieres que la imagen se repita, no se repita, se ubique en la posición "x" de tu plantilla (top) o en la posición "y" (footer).
Al hacerlo verás el cambio en la vista diseño de tu Dreamweaver:
Naturalmente en el navegador se vé mucho mejor:
Sin lugar a dudas no haremos una edición espectacular con este tutorial, solo les doy una idea de lo que pueden hacer al cargar el css en el Dreamweaver.
Espero les sirva de algo este tutorial amigos.
Alicante
Ahora en linea...
Iniciar Sesión
Autores
-
Arnold Wender
0 comments
Calendario
Archivo
