Satori: theme para WordPress

Satori  - Un tema para WordPress Les presento mi primera incursión en la publicación de temas para WordPress: Satori, tema que desde hoy pueden ver en el sitio y que ahora pongo a su disposición para descargar.

La idea tras este tema era crear algo muy sencillo tanto en lo visual como en lo que respecta al código necesario para conseguirlo, economizando en la adición de elementos innecesarios como también en lo que respecta a las clases e ids para conseguirlo —mantenerlo simple. Sin embargo, no me he conformado con eso, sino que he deseado ofrecer algunas características que pudieran hacer de este theme una alternativa potente dentro de las múltiples opciones de themes que encontramos hoy.

Características

  • El diseño mezcla dos formas de limitar los espacios: ancho líquido (porcentual) para la cabecera y el pie de página, y ancho elástico (en ems) para la sección de los posts, lo que asegura su legibilidad en varias resoluciones
  • Valida como XHTML 1.0 Strict
  • Soporte para Widgets
  • Soporte para plugins: instala estos plugins, actívalos y ya estarán funcionando (sin necesidad de editar el theme)
  • Opciones de personalización integradas: seleccionables/editables desde su propio menú de administración (gracias a WordPress Theme Toolkit

Descargar “Satori”

Satori – Un tema para WordPress (archivo ZIP, 86KB)

Licencia

gnugplcopyleft.png Satori – un theme minimalista para WordPress es © 2006 por Felipe Lavín Zumaeta, bajo licencia GNU GPLtraducciones no oficiales, la única licencia válida es el texto original en inglés.

Satori incluye código de Kubrick, © Michael Heilemann bajo licencia GNU GPL, con modificaciones por Felipe Lavín Zumeta, 2006.

¿Sugerencias? ¿Mejoras? ¿Soporte para otros plugins? Todo lo que quieran decir sobre este tema, en los comentarios.

  • El descubrimiento de tu página me resuelve una cantidad de interrogantes.

    Gracias.

  • Eres un Masters!!!

  • Gracias maestro!!

    • Pedro

      Hola Felipe;
      No se si todavía puedes ayudarme, ya que he visto el foro buscando una solución para un theme de wordpredss Hemingway , que no consigo modificar correctamente el color de fondo.
      Quiero dejarlo listo en breve y por mucho que edito el ccs a la hora de guardarlo y actualizar no funciona.
      Podrías darme una solución…
      Querría algo muy sencillo, modificar todo el fondo a blanco, sin más. y no lo consigo.
      Te lo agradecería mucho ya que estoy empezando con todo esto..
      Saludos

  • Genial, así de sencillo.

    Esperaré unos meses para usarlo, que ahora no quiero copiar al gran Yukei.

  • This is really a beautiful theme. Well done. I love the comments, the line work. It's minimal and effective. An A+. Congrats on a job well done.

  • Genial!! si no fuese porque he cambiado hace poco el theme usaba este, sencillamente genial…

    :)

  • Pedazo de theme

    genial theme le he echo un par de adaptaciones para mi web (www.raulsimon.com)y lo estoy utilizando.

    P.D.una cosa observastes que en Opera el ancho no se visualiza correctamente

  • Hola, felicitaciones.

    Sin embargo, el enlace a blogmemes no funciona

    adecuadamente, en el url has puesto el titulo.

    Gracias por incluir blogmemes en tu theme.

  • – cavalleto y Javier E: ocúpenlo desde ya, que después todos lo van a tener jaja :)

    – Scott: thanks, I really appreciate it. The comments section it's somewhat insipired on <cite>Kyle Neath's</cite> <a title="Warpspire » Hemingway" href="http://warpspire.com/hemingway&quot; rel="nofollow">Hemingway.

    – RaulSimon: gracias. He probado el theme en Opera 9 Beta (que es la versión que tengo instalada en el PC) y marcha bien… al menos a 1024*768. En las pruebas con Browsershots también ha resultado bien… ¿en qué condiciones lo probaste?

    – Eduardo: gracias por decirmelo, no lo había notado… en seguida lo arreglo

  • Pingback: blogmemes.com()

  • Pingback: Vidablog » Satori: theme para WordPress()

  • lo probe con la version de opera 8.5 en resoluciones de 1024X768 y 1152X864 y el ancho no se visualiza bien tanto en tu web como en la mia tambien consulte a varios amigos y ese erro tambien lo ven.

    te adjunto una captura

    http://www.raulsimon.com/yukei.png

  • acabo de actualizar a opera 9 y este erro no se sucede en esta version sin embargo si pasa en otras versionose anteriores de opera supongo que esto sera un fallo del navegador te ruego perdones las molestias

  • Buenísimo! Muy limpio y de los mejores que he visto en comodidad de lectura. A seguir así :D

  • -RaulSimon: toda la razón. Ese es un error común en Opera, que sucede al utilizar técnicas de reemplazo de textos por imágenes (por ejemplo, en el título). Sin embargo, afortunadamente no afecta la legibilidad ni la estructura de la página más allá de eso. De todas maneras, muchas gracias por haberlo señalado, es la única forma de poder ir mejorando el theme.

    Álvaro: gracias!

  • Felipe: Estupendo trabajo, te felicito de verdad. Será el primer theme que use en el próximo proyecto weblog que me soliciten. Simple y elegante, ¡lo amo!.

  • Que puedo decir más que felicitaciones por el trabajo del tema.

    En cuanto se me pase un poco la flojera de cambiar temas lo cambio a este ;)

  • Felicitaciones, quedó Precioso!!!

  • Hi Felipe: Hemingway is a really influential theme, I think, and it's great and necessary to build on successes. Your theme, though, is superior (in my opinion) because it uses negative space much more effectively. Plus I can see how throughtful you were with all the fonts. Well done.

  • esta muy bueno.. lo voy ha usar..

  • Pingback: Satori en Weblogs V2()

  • El theme es muy lindo: sencillo y elegante. Una buena combinación.

    ¿Qué hosting utilizas?

    Hace un par de meses que ando con ganas de ponerne "pantalones largos" con el blog.

  • Uso DreamHost: económico, buen soporte, excelente en prestaciones y tiene la opción de instalar WordPress con un click

    Si utilizas el código MENOS35 obtendrás un 35% de descuento en el plan "Crazy Domain Insane"

  • Hola Felipe, una cosa que te queria comentar, quiero que por defecto las imagenes tengan un reborde de 4px, y eso es lo que meto:

    img.imagen {border:4px;}

    Lo podría hacer con xhtml pero prefiero definir una clase para las imagenes y así ponerles más valores por defecto o para cambiar el estilo del borde etc…

    ¿Donde debería meterlo?

    Muchas Gracias, y vaya pedazo de tema. Antes usaba el de Diego (minid), no era malo ni feo , pero hay que cambiar de imagen

  • Jose: existen 3 hojas de estilo para el theme:

    style.css: es la principal, siempre se carga, por lo que si quieres agregar un estilo que se vea tanto en la página principal como en las páginas individuales de los posts, lo mejor sería agregarla acá

    single.css: maneja los estilos que son específicos de las páginas de posts individuales, sólo se carga "if(is_single())"

    archives.css: los estilos de páginas de archivos

    Además, existe una hoja llamada print.css que es la que controla el diseño de impresión

    En lo personal, para controlar la presentación de las imágenes en los posts utilizo una clase en el archivo style.css:

    <code>div.post-content .imgleft{

    border:1px solid #EEE;

    float:right;

    margin:0.5em;

    padding:0.5em}</code>

    claro, está mal llamada "imgleft" porque en realidad hace flotar las imágenes hacia la derecha, pero qué se le va a hacer… es lo que pasa por olvidarse de la semántica, bue…

    Espero que esto haya respondido a tu consulta

  • si pongo border ahí debería valer, no?

  • claro, la idea es crear una clase para tus imágenes (digamos <code>div.post-content .postimgtn</code>) y darle el estilo que quieras, por ejemplo:

    <code>div.post-content .postimgtn{

    border:4px solid #eee /*borde de 4px, sólido, color #eee*/

    float: right; /*flota a la derecha*/

    margin:0.5em; /*el margen*/

    padding:0 /*el padding (relleno, se podria decir*/

    }

    De esta manera, te quedará la imagen flotando a la derecha y con un borde de 4px alrededor… más bien, los elementos que marques con esta clase, sean imágenes o no</code>

  • Estoy usándolo de nuevo.

    Una cosa, cómo consigo que no salga el cuadro celeste detrás del title.png??

    He probado a ponerle el fondo blanco pero ni por esas.

    Me gusta más cuanto más lo uso.

  • De hecho, me cuesta hasta centrar la imagen title, ya por fin he solucionado lo del fondo celeste que se veía.

    Gracias.

  • Y porqué no se debe editar la página de Archivos???

    Antes salía la tagcloud y las categorías, pero ahora me aparece que no edite el archivo.

    Se creará automáticamente?

    Me gustaría tenerlo más o menos como tú, o sea, una de categorías y otra de archivos.

    Espero que puedas ayudarnos.

    Gracias

  • – cavalleto: la presentación del título está controlado en el css (en el archivo style.css) como reemplazo de un <code>h1</code> con un enlace adentro, es decir, <code>h1 a</code>… cualquier cambio que necesites hacer a la presentación del título, debes hacerlo en ese selector (en la hoja de estilos original las dimensiones de ese selector están limitadas mediante las propiedades <code>width, height</code>, si quieres tener el título centrado deberías modificar las dimensiones del bloque y luego en la propiedad <code>background</code> especificar que quieres que la imagen de fondo esté posicionada al centro del bloque.

    Sobre la página de archivos, no sé por qué te aparece <q>No editar esta página</q>, pero te puedo indicar que el theme no la crea automáticamente, quizás sea por algún plugin que has instalado. En este blog, lo que he hecho fue crear una página de categorías y una de archivos y luego insertar los plugins SRG Clean Archives (para los archivos mensuales) y Weighted Categories para las categorías, utilizando Exec-PHP para poder insertar directamente el código php en las páginas

  • Genial como siempre.

  • El enlace al plugin de los últimos comentarios no funciona :(

    No sé porqué pero he tenido que controlar que no se redifinieran las funciones del archivo functions.php, si no me salía un error.

    Gracias por compartirlo :)

  • DraXus: el enlace ha sido arreglado. Lo de functions.php quizás podría haberse debido a otro tema que tuvieras instalado y que utilizara el "WordPress Theme Toolkit"…

  • Por algun motivo al activar Satori aparece este error:

    Fatal error: Cannot redeclare satori_about() (previously declared in /home/perdi20/public_html/blog/wp-content/themes/satori/functions.php:76) in /home/perdi20/public_html/blog/wp-content/themes/satori/functions.php on line 75

    Y hasta ahi hemos llegado. Tanto que ya no funcionaba ningun otro theme y he tenido que reinstalar WP y los backups!!! :_(

    Alguna sugerencia???

  • Javier: siento lo que te ha ocurrido… me parece que, al igual que DraXus, podría haberte sucedido porque probablemente tenías instalado otro tema que usaba el "WordPress Theme Toolkit", con lo que se produce dicho conflicto. Acabo de subir una nueva versión que debería arreglar este problema (y además implementa otras novedades), gracias a la solución aportada por <cite>DraXus</cite>

  • Adaptado.

    Gracias.

    ;)

  • Al

    Felipe, is there any way to get title and description displayed in the center of the header above the pages links? Should I change something in the header.php or is the stylesheet? Beautiful theme!

  • Al: sure there is, you would just have to edit the stylesheet, the selector h1 a. That’s inside of a <div id="header">, so you might want to tweak some of those properties too… it should be very simple, good luck with it!

  • The solution for Al :

    in style.css :

    div#tietul
    {text-align:left;
    font-size:220%;
    fonr-weight:bold;
    font-family:Tahoma,’Lucida Grande’,Verdana,Arial,sans-serif;
    margin-left:40;
    padding:5;
    color:#666666;
    text-decoration:none;
    }

    in header.php :

    ” title=””>

    Good luck !

    Philip

  • Oops, the php code failed to appear in my posting

    so I’ll write it with spaces in between :

    ” title=””>

  • Okay guys, when I post some php script code, it does not taske it as regular text, so this time without the proper php code in the header.php

    This blog should allow to enter php code, and have it appear as entered, please …

  • Philip: sorry for your troubles. I haven’t installed any plugins on WordPress to could cause those kind of problems with the comments (only Akismet would affect comments, just for spam-control), so I guess that must be standard WordPress behaviour. I think the problem it’s probably caused for not encoding entities (for instance, < & >), but selecting some way of automatic conversion would result on a lot of code showing up on places were we would like to act as markup. If you know of some plugin that could fix this, please let me know.

    Oh, and (last but not least) thanks for your tip for Al :-)

  • Saludos, como puedo limitar el tamano de las imagenes dentro de todos los posts, para que siempre sean de un maximo de 400px de ancho?, he probado con lo que encuentro en google, pero no logro que funcione, Salduos!.

  • Felipe, quiero modificar el theme para poder incluir “algo” en la columna vacía que queda a la izquierda, debajo de “artículos+recientes”.

    Creo que es un buen sitio para colocar algo de publicidad no intrusiva, tipo adsense.
    También me gusta donde la pones tú, debajo del Autor del post.
    Podrías decirme cómo hacerlo?

    Gracias de nuevo, maestro!!!

  • De hecho podrías trabajar en la complementación de los nuevos plugins que van apareciendo.
    Por ejemplo el plugin para gestionar la publicidad Adsense.

    Saludos.

  • Hola a todos/as

    Acabo de hacer un par de mejoras al tema añadiendo inserción de comentarios ajax y un menú deslizante para el pie de página tan ancho. Podeis ver las explicaciones en la sección wordpress de mi blog. Dejo aqui lo que he hecho:

    http://www.uploadtemple.com/view.php/1160764654.zip

    Esta “versión” beta tiene los siguientes fallos:

    + El sistema de comentarios ha perdido el diseño anterior.
    + El menú desplegable para el menu de pie de página funciona para single.php aunque se haría igual para todos los demás archivos.

    Espero que os sirva a los que useis este tema para implementarlo y quien sabe si estas mejoras son tenidas en cuenta en próximas versiones.

    Saludos!

  • Paco

    Felipe,

    Satori me parece un tema realmente bueno y quisiera saber si es posible limitar el largo de los comentarios que aparecen _en la primera página_ a sólo unos pocos y que los siguientes aparezcan en una página específica de comentarios sobre cada tema.

    Por ejemplo, esta misma página tiene muchos más comentarios que tu propio texto. Yo desearía usar tu tema en un sitio informativo donde los comentarios no pueden ser más importantes (en el espacio que usan) que el propio contenido, pero sí me interesa que puedan extenderse por varias páginas mas (si fuera necesario).

    Es esto posible? Desde ahora gracias y felicidades ;)

    1. javier: gracias por tu aporte, y disculpa no haber podido responderte antes. Probaré la versión que has enviado y trataré de integrar los cambios en una futura versión
    2. Paco: para ello, puedes utilizar un plugin como Paged Comments.
  • Me dirijo de nuevo a ti, ¡¡¡¡ohhh gran creador del Satori!!!!, por que le he dado muchas vueltas a mi problema y no hallo la solución.

    Le estoy dando mil vueltas a tu theme pero me he encontrado con el problema siguiente en mi nuevo diseño. Mientras que los post se ven bien… http://unmundomejoresposible.awardspace.com las páginas no, podrás ver que todo el encabezado ahora está fijado en la pantalla, pero en las páginas el texto se encuentra demasiado arriba, en los post normales lo solucioné colocando un padding-top en el lugar adecuado, pero no encuentro un lugar adecuado para las páginas.

    Un cordial saludo y gracias por todo tu trabajo, tanto en satori como en Internet en general.

    José Enrique.

    PD: ¿Para cuando una nueva versión del Satori? jejejeje en el comentario superior dabas atisbos de esperanza a todos los usuarios del mismo… me ha sorprendido lo de la nueva versión pero vamos, te doy todos mis animos para ello… jejeje gracias de nuevo.

  • José: por lo que he visto en tu sitio, has desistido del look que buscabas, pero bien…

    Sobre una nueva versión de Satori, es algo que tengo planificado hace algún tiempo pero por dedicarme a otros proyectos (como Perestroika, este nuevo tema) he venido postergando… de todos modos, lo más probable es que los cambios sean más bien a nivel de código y estructura, no presentación, aunque me gustaría incluir un par de estilos nuevos aparte del que utiliza hasta ahora (por ejemplo, el que tenía acá antes)

  • Pingback: cambiar diseño Wordpress — Viciao2k3 - PHP, musica, software, disseño, juegos, TV()

  • Como puedo crear un tema yo?
    Saludos…
    iniciándome en los blog’s

  • Puedes consultar la documentación oficial (en inglés) en http://codex.wordpress.org o esta lista de recursos en español recopilada por Andrés Nieto: Si no haces un theme es porque no quieres

  • Gracias por el tema en primer lugar.
    tengo una duda, ¿cómo puedo eliminar la frase artículos+recientes que aparece en la página principal?
    Muchas gracias

  • Pingback: Blog del Proyecto R4P v3i » Blog Archive » Novedades en el Blog!()

  • Muy bueno :)
    Me gusta el diseño.
    Será posible cambiar algunos colores creo yo xP

    Salu2!!

  • @Diego: por supuesto, sólo tienes que editar el CSS

  • Pingback: Pequeña actualización de Satori — yukei.net()

  • Pingback: Theme de WordPress recomendados | Kaos Klub()

  • Yon

    Muchas gracias por el tema, lo hemos usado en nuestro blog ya que nos encanta. Un abrazo!

  • Pingback: Nueva imagen en el Blog — FlySharing - Blog()

  • Iñaki

    Un theme enorme. Qué difícil es hacer a veces las cosas tan sencillas.

    Lo utilizaré! ;-)

  • primero, Felipe, gracias por este tema increible. Satori y tambien Typographic. Me gusto tanto el look de los dos . . hice un poco de remix (use el font de typo para los posts).

    Bueno, una pregunta. Anoche instale Intense debate (http://intensedebate.com/) y funciona bien, pero por algo se queda pegada contra la izquierda del footer en vez de estar en el centro. No es un problema grave, pero me gustaria usar este plugin–funciona bastante bien para administrar nuestra red de sitios (matadortravel.com)–y no quiero ruinar el buen flujo y diseno de la pagina.

    me podes ayudar?

    mil gracias,

    david

  • Buenas Felipe el tema me ha encantado, me gusta su sencillez, pero le hecho en falta el soporte para tags, aun estas desarrollando para este theme o ya lo tienes olvidado?

    Un saludo.

  • Pingback: Cambio de diseño()

  • @zordor: hace algún tiempo he estado preparando una nueva versión de este tema (pero ¡shhh! no le digas a nadie), pero ha ido quedando postergada entre otros proyectos… de todos modos, puedo adelantar que está basada en el theme Sandbox y usa los frameworks Yahoo User Interface para CSS y jQuery de javascript… y de hecho, la función para “responder” que está en el tema actual, la escribí primero para la nueva versión de Satori.

    De todos modos, si quieres agregar soporte para tags de una manera fácil, podrías instalar el plugin Simple Tags, que permite insertar automáticamente las tags al final de cada post y mucho más.

  • Que buenísimas noticias! Si quieres que te eche una mano con el nuevo diseño estaría encantado ya que el anterior me parece tremendamente bueno, de verdad de lo mejor que he visto hasta ahora y creo que merece la pena actualizarlo. Aunque sea sería genial ayudarte como beta-tester en cerrado. Tengo un par de ideas que creo que mejorarían bastante el theme. Si quieres agregarme a gtalk mi cuenta es zordor@gmail.com.

    Un saludo!

  • @Felipe Lavín Z.: Si, por favor. Satori es un tema excelente. Una actualización sería un gran regalo de Navidad.

  • @Jordi, @zordor: he estado trabajando en él, y lo he puesto en Google Code, así que pueden revisarlo acá satorii (sí, la nueva versión se ha pasado a llamar satorii).

    Si desean, pueden sumar sugerencias enviando un ticket de “mejoras” (Enhancement), o, si es el caso, de algún defecto que encuentren, también. Sólo en este caso haré las modificaciones correspondientes antes del lanzamiento; las mejoras tendrían que esperar a una nueva versión.

    Durante la semana publicaré el post para anunciarlo oficialmente.

    :)

  • @Felipe Lavín Z.: ¡Excelente noticia! Muchas gracias. Ya estoy “jugando con la nueva versión, aunque creo que tendré que actualizar a la versión 2.7.: sale un error en lugar del formulario para dejar comentarios en mi 2.6. Quería esperar a la 2.7.1, (ya han encontrado algunos errores en la 2.7) pero si en unos días no se publica la 2.7.1, actualizaré a la 2.7.
    Observo que ha desaparecido el formulario de búsquedas (no si los lectores la utilizaban demasiado, creo que no), los bookmarks sociales (yo no los usaba) y la referencia al feed RSS está en el pie de página (buena idea: todos los navegdores muestran ya si la página tiene feeds). Lástima la desaparición de los monos voladores… me caían bien los monos voladores (mis amigos preguntaban qué era eso de “los monos voladores” :-) ). Quizá retoque un poco el tamaño de todos los tipos (aumentádolos un poco… cosa de la edad y la vista :-) ).

    En fin, Satorii me gusta tanto o más que Satori. Mi enhorabuena. Es un excelente regalo de Navidad.

  • @Jordi: ese error es debido a que en la 2.7 se ha agregado una nueva función para agregar el enlace para hacer logout (o “salir”). Antes había que construirlo a partir de la ubicación del blog, ahora lo pone automáticamente y además de una forma más segura (incluye un “nonce”). Satorii está pensado para ser utilizado con 2.7 (de hecho, como tarea pendiente para el próximo release queda el habilitar las nuevas funciones en los comentarios).

  • @Felipe Lavín Z.: Sí, ya he actualizado a la 2.7 y ha desaparecido el error. Gracias.

  • Pingback: Theme de WordPress recomendados (II) | Kaos Klub()

  • Hey, just wanted to thank you for the Satorii. Clean, minimal. I modified it a bit, hid away traces of blogging elements, and used it for my static website.

    • Thanks for using Satorii, I’m glad you like it. Pretty nice customization!

  • Pingback: El nuevo theme de blogpocket tendrá una columna - Blogpocket()