Joomla es uno de los muchos sistemas de gestión de contenidos o CMS, que permiten a sus usuarios personalizar completamente la apariencia de su sitio web. Las personas pueden publicar y anular la publicación de artículos o entradas de blog tan a menudo como deseen, así como rehacer el diseño general con imágenes y un poco de código. Para crear esquinas redondeadas, utilice un programa de arte para crear un rectángulo redondeado, se corta en cuatro imágenes, subir esas imágenes y añadir el código necesario.
Instrucciones
1 Abra un programa de arte como Photoshop, Gimp o Corel PaintShop Pro y crear un nuevo documento. Utilice las medidas que desea su caja curvada para estar en su sitio web una vez que esté terminado.
2 Llamar su cuadro por lo que tiene las esquinas redondeadas. Las medidas adoptadas variarán dependiendo del programa que utilice. Por ejemplo, en Photoshop hay una herramienta rectángulo que le permite cambiar la configuración de modo que las esquinas son redondeadas en lugar de agudo.
3 Se divide el rectángulo en la igualdad de las partes utilizando la herramienta de corte y empalme del programa y guardar cada parte como su propia imagen. Sube las imágenes ya sea para su propio servidor web o un sitio de alojamiento de imágenes gratuito como Photobucket.
4 Entre para Joomla y asegúrese de que tiene instalado el "redondeado" módulo de cromo. Puede encontrar este módulo o complemento en el sitio web de Joomla (ver Recursos)
5 Inserte la siguiente declaración en el módulo "redondeado".
<Jdoc: include type = name = estilo de "módulos" "POSICIÓN" = "redondeada" />
Este código se instalará un puñado de líneas en su diseño final, buscando algo como esto:
<Div class = "module_menu">
<Div>
<div>
<div>
<h3>Main Menu</h3>
<ul class="menu">
<li><!-- various menu items --></li>
</ul>
</div>
</div>
</ Div>
</ Div>
6 Añada sus imágenes esquinas redondeadas mediante la creación de una nueva hoja de estilos externa y pega el código de abajo:
div.module_menu {
background: url (../ images / rounded_topleft.png) 0 0 no-repeat;
padding: 0;
}
div {div.module_menu
background: url (../ images / rounded_bottomleft.png) 0 100% no-repeat;
margin: 0;
border: 0;
}
div.module_menu div div {
background: url (../ images / rounded_topright.png) 100% 0 no-repeat;
}
div.module_menu div div div {
background: url (../ images / rounded_bottomright.png) 100% 100% no-repeat;
}
7 Reemplazar "../images/rounded_imagename" con la ubicación de cada imagen, ya sea en una carpeta en el servidor de su proveedor de alojamiento web o en sitios como Photobucket.
8 Agregue el código siguiente para el final de la hoja de estilos externa para que sepa dónde en su diseño para colocar las imágenes.
div.module_menu div div div div {
background: none;
}
Tenga en cuenta que el código mencionado en el paso 5 se leerá el código una vez que ha sido salvado, causando que los cambios van en vivo en su sitio web.
9 Guarde los cambios y comprobar su sitio. Realice los cambios necesarios, tales como el tamaño de las imágenes, su color o colocación editando los códigos mencionados anteriormente.