El blog de zeuder

TechGG version 2

Skin para mkportal. Actualización del skin TechGG. Incluye logo en formato PSD (archivo de photoshop).

Cambios importantes:

Area de administración rediseñada.
Cambio de Fondo.
Texto centrado verticalmente en blocks.
Color del text area.
Cambiado el color de submit buttons.
Color de input.
Removido borde discontinuo de las noticias .tabnews.
Enlace en el footer, no remover por favor.
Reemplazado Mkportal loginho.
Cambiado css highlight color que era dificil de ver.
Cambiado color highlight calendario mkcaltoday.
Diseño input.
Diseño botones submit.
Entre otros ligeros cambios.

Como crear un theme para FlatPress (basico)

Lo primero que se necesita es saber HTML y CSS principalmente

Copiamos el theme leggero y lo renombramos por ejemplo ztheme o como mas te guste.
Ahora abrimos esa carpeta, veremos varios archivos tpl, ahora explico cada uno de ellos

admin.tpl
despliega la administración

comments.tpl
despliega los comentarios

cpheader.tpl
es el encabezado del panel de administracion

default.tpl
coloca la pagina de inicio por defecto

entry-default.tpl
el formato de las entradas

footer.tpl
el pie de pagina

header.tpl
encabezado del blog

index.tpl
genera el index del blog

preview.tpl
la entrada que se muestra sola al clicar en ella

previewstatic.tpl
el preview de las paginas estaticas

static.tpl
se encarga de las paginas estaticas

widgets.tpl
el formato de los widgets ( categorias, ultimos comentarios, etc, todo lo que va en la sidebar)

La ventaja de tener cada sección por separado, es que podemos incluir una dentro de otra, y editar cada una solo una vez, a diferencia que si tuvieramos todo el diseño completo dentro de cada archivo tuvieramos que editar todos cada vez que quisieramos cambiar algo.

bueno ahora borramos la carpeta leggero y la flatmaas-rev, y creamos una carpeta ‘img’ y otra ‘res’
No coloquemos nada ahií aun

Ahora creamos un archivo style.conf.php con el siguiente contenido

<?php
/*
Style Name: ztheme
Style URI: http://www.tusitio.com/
Description: pon una descripcion de tu theme aqui
Version: 0.705
Author: Tu nombre
Author URI: http://www.tusitio.com/
*/
	
	$style['name'] = 'ztheme';
	$style['author'] = 'tunombre';
	$style['www'] = 'http://www.tusitio.com/';
	
	$style['version'] = 0.705;
	
	$style['style_def'] = 'style.css";
	$style['style_admin'] = 'admin.css';
	$style['style_print'] = 'print.css';
	$style['style'] = 'default';
	
?>

y luego editamos el archivo theme.conf.php y colocamos lo siguiente

<?php
/* 
Theme Name: ztheme
Theme URI: http://www.tusitio.com/
Description: una descripcion aqui
Version: 0.705
Author: tunombre
Author URI: http://www.tusitio.com/
*/
	$theme['name'] = 'ztheme';
	$theme['author'] = 'tunombre';
	$theme['www'] = 'http://www.tusitio.com/';
	$theme['description'] = 'Descripcion del theme'.
	$theme['version'] = 0.705;
	$theme['style_def'] = 'style.css';
	$theme['style_admin'] = 'admin.css';
	
	// Other theme settings
		// overrides default tabmenu
		// and panel layout
	remove_filter('admin_head', 'admin_head_action');
	// register widgetsets
	register_widgetset('right');
	register_widgetset('left'); 
	
?>

Por supuesto cambiamos los datos por los nuestros.

Por defecto se hace uso de la regla import con las hojas de estilo en el theme default, pero en vez de eso, aqui los he juntado en 2 archivos, esto para hacerlo mas ‘ergonomico’.
Bueno bajate estos archivos y colocalos en la carpeta ‘res’ que creaste.
style.css | admin.css

Con esto logramos tener un esqueleto basico, ahora podemos empezar a cambiar el css, en el archivo style.css dentro de la carpeta res. O podemos cambiar el maquetado del theme.
Para ello deberemos empezar por modificar el header.tpl que es donde comienza el diseño del sitio y que contiene el header del blog, alli podemos cambiar las IDs y la clases por las nuestras, claro cambiando a su vez las mismas en el css.

Por lo general los divs contenedores se abren en header.tpl, y se cierran en footer.tpl

La carpeta ‘imgs’ que creamos anteriormente la utilizaremos si usamos un theme con imagenes, las imagenes las colocaremos ahi, y las cargamos de la siguiente forma ‘url(’/..img/imagendeejemplo.jpg’)’ en la hoja de estilo en la parte que queramos.

Ezau theme para FlatPress

Bien, me volvió la inspiración , e hice otro theme para flatpress.
Los colores como pueden ver, se centran en verde brillante, blanco, y escalas de grises.
Incluye bottom bar, para colocar los widgets al pie de pagina, y topbar para colocarlos abajo del header, la top bar está pensada para colocar el widget menu, bien se puede agregar cualquier otro, pero queda feo.