101 Diseños para Joomla

ikcam — Thu, 11 Dec 2008 19:41:18 +0000

Ever-real ha realizado una recopilación de 101 diseños/plantillas para Joomla. Se sabe que Joomla no es lo que exactamente se dice “un buen CMS” ya que es considerado el “Windows de los CMS” sin embargo existen una gran cantidad de plantillas (gratuitas/pagadas) para este gestor de contenidos. Por supuesto que no son tantos como los que existen para WordPress pero a continuación verán algunos de los cuales me ha llamado más la atención y si desean pueden adquirir para su sitio web. También pueden ver la lista completa de plantillas.

Vía | Ever-real Blog

Entradas relacionadas:

Crear tabs para cualquier sitio con jQuery (Parte II)

ikcam — Mon, 13 Oct 2008 08:03:00 +0000

Continuando con este tutorial para incorporar “TABS” o pestañas a nuestro sitio web, ahora vamos a aprender a incorporarlos a WordPress, que pasos debemos seguir y que hay que tener en cuenta. Antes de comenzar es necesario que revisen el primer tutorial de esta serie para que tengan una idea de lo que me refiero con algunos términos.

Para incorporarlos a nuestra plantilla debemos seguir lo siguientes pasos,

Nos dirigimos a nuestro panel de administración en WordPress, luego al editor de temas y editamos el archivo header.php (Encabezado)

Dentro de la edición de este archivo añadimos las siguientes líneas entre las etiquetas y

  <script src="http://code.jquery.com/jquery-latest.js">
  	 
  </script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js" type="text/javascript">
     
  </script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.tabs.js" type="text/javascript">
     
  </script>
  <script type="text/javascript">
     
  </script>

A continuación nos dirigimos a editar el archivo style.css (Hoja de estilos) para definir el estilo de nuestro widget.

A este archivo le tenemos que añadir las líneas de código de CSS del tutorial anterior, lo mejor es que ingresen su hoja de estilos propias, verán que no es muy difícil editarla. Pero en caso deseen practicar, aquí tienen el ejemplo que tienen que añadir al final del archivo style.css

.estilo {
			margin:0 0 15px 0;
			padding:0;
			width:310px;
		}
		.ui-tabs-nav{
			margin:0;
			padding:0;
			list-style:none;
		}
		.ui-tabs-nav li {
			margin:0 2px 0 0;
			padding:0 5px 0 5px;
			float:left;
			height:30px;
			border-top:1px #3399FF solid;
			border-right:1px #3399FF solid;
			border-left:1px #3399FF solid;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:12px;
			line-height:30px;
			text-transform:uppercase;
		}
		.ui-tabs-nav li:hover {
			background:#EBEBEB;
			color:#333333;
		}
			.ui-tabs-nav li:hover a {
				color:#333333;
			}
		.ui-tabs-nav li {
			background:#FFFFFF;
		}
			.ui-tabs-nav li a {
				color:#336699;
				text-decoration:none;
			}
		.ui-tabs-panel {
			margin:0;
			padding:5px;
			float:none;
			clear:both;
			border:#3399FF solid 1px;
			width:298px;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:12px;
			color:#333333;
		}
			.ui-tabs-panel ul {
				margin:0;
				padding:0 0 0 15px;
			}
			.ui-tabs-panel ul li {
				margin:0 0 5px 0;
			}
		.ui-tabs-panel a {
			color:#336699;
			text-decoration:none;
		}
			.ui-tabs-panel a:hover {
				color:#3399FF;
				text-decoration:underline;
			}
		.ui-tabs-hide {
			margin:0;
			padding:5px;
			float:none;
			clear:both;
			display:none;
			border:#3399FF solid 1px;
			width:298px;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:12px;
			color:#333333;
		}
			.ui-tabs-hide ul {
				margin:0;
				padding:0 0 0 15px;
			}
			.ui-tabs-hide ul li {
				margin:0 0 5px 0;
			}
		.ui-tabs-hide a {
			color:#336699;
			text-decoration:none;
		}
			.ui-tabs-hide a:hover {
				color:#3399FF;
				text-decoration:underline;
			}

Lo siguiente, es editar el archivo sidebar.php (Barra lateral) para poder añadir nuestros “widgets” en código bruto PHP (que más adelante verán) ya que al usar esta sidebar con pestañas no pueden usar el sistema de WordPress para añadir “widgets” a sus recuadros con pestañas.

Dentro de la edición de este archivo, tenemos que añadir las siguientes líneas de código, si lo deseamos visualizar en la parte superior de nuestra plantilla lo tenemos que añadir antes de la siguiente línea de código:

 if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

Pero si lo desea visualizar en la parte inferior, lo tenemos que poner antes del final del sidebar, es decir, antes de la última etiqueta . La líneas de código a añadir son las siguientes:

    <div id="EJEMPLO" class="estilo">
    <ul>
        <li><a href="#tab-1">Título 1</a></li>
        <li><a href="#tab-2">Título 2</a></li>
    </ul>
    <div id="tab-1">
            Aquí el contenido</div>
    <div id="tab-2">
            Aquí el contenido</div>
    </div>

Debemos recordar mantener la estructura que se mencionó en el tutorial anterior para así evitar que nuestro código no funcione.

Finalmente, nuevamente nos dirigimos al archivo header.php para una última adición. Tenemos que añadir lo siguiente tantas veces se hallan añadido recuadros en la edición del archivo sidebar.php manteniendo los nombres de los respectivos id. La línea de código a añadir es la siguiente:

  <script type="text/javascript">
  $(document).ready(function(){
    $("#EJEMPLO > ul").tabs();
  });
  script>

Repito, debemos repetir, tantas veces sea necesario.

Luego de realizar todas esas modificaciones, nuestro widget con pestañas se mostrará en nuestra barra lateral de WordPress. A continuación, les daré una lista de funciones en PHP que llamarán algunos widgets sin la necesidad de llamarlos a través de nuestro panel de administración de WordPress:


//Mostrar cateogrías
wp_list_categories('orderby=name&title_li=');
?>
 
//Mostrar archivo
wp_get_archives('type=monthly'); 
?>

//Ultimos 10 posts
get_archives('postbypost', 10); 
?>

//Blogroll
wp_list_bookmarks('title_before=&title_after=&title_li=&category_before=&category_after=');
?>

En caso, tengas alguna duda acerca de este tutorial, déjanos un comentario y recuerda que respecto a la edición de la barra lateral, cada barra lateral es distinta en cada plantilla así que ten cuidado.

xploit29 - Tecnología al alcance de tus manos » Plantillas

101 Diseños para Joomla

Entradas relacionadas:

Crear tabs para cualquier sitio con jQuery (Parte II)

Entradas relacionadas: