Plurkland

Este post es una traducción no oficial de la Guía de personalización que ofrece Plurk.

Personalizar Plurk

Es posible personalizar Plurk con estilos (styles) CSS. Esto significa básicamente que se puede personalizar el aspecto de cualquier elemento de un perfil de Plurk. Se pueden cambiar los colores, modificar los fondos, etc.

La estructura básica

Hay tres elementos que es importante destacar:

• body:
  El elemento body decide el fondo de la página, el tamaño de la letra y los colores del texto
• #timeline_holder:
  Este elemento es el que contiene la línea de tiempo (timeline)
• #dashboard_holder:
  Este elemento es el que contiene el panel (dashboard)

Este es un ejemplo de cómo crear un tema blanco muy sencillo:

/* USE_DARK_ICONS */
body, html {
    background: none;
    color: black;
}

#timeline_holder {
    background: none;
}

#top_bar a, #top_login a, #dashboard_holder a, #footer a {
    color: black !important;
}

USE_DARK_ICONS es un comentario especial que hará que Plurk use iconos más oscuros.

Además, recomendamos instalar y explorar el DOM de Plurk vía Firebug. Hace que la tarea de asignar estilos sea mucho más sencilla.

Tema de ejemplo (Infected mushroom)

Un tema (theme) verdoso que usa fondos alojados en tinypic.com

El código:

body, html {
    background-image: url(http://i37.tinypic.com/24fb3f6.gif);
    background-repeat: repeat;
    color: white;
}

#timeline_holder {
    background-image: url(http://i34.tinypic.com/6hs5d1.gif);
    background-repeat: repeat;
}

#top_bar a, #top_login a, #dashboard_holder a, #footer a {
    color: white;
}

Personalizar el título de la página

Puedes pegar este código para cambiar el estilo del título del perfil (fondo rojo con texto en blanco):

#page_title {
    background-color: #ff4e4e;
    padding: 1px;
    color: white;
}

Personalizar el panel

Pega este código para poner el panel en rojo con texto y bordes en blanco:

#plurk-dashboard {
    background-color: #ff4e4e;
    color: white;
    border: 2px solid white;
}

Recursos

Aprende e inspírate en estos sitios:

• CSS Beginner Tutorial: Introducción a CSS
• CSS Tutorial: Aprende la magia y los trucos detrás del CSS en un completo tutorial
• Temas para Plurk en Flickr: Una muestra de muchos temas para Plurk, ¡inspírate!
• Resultados de Google para la búsqueda CSS tricks: Busca en Google o en otros sitios para aprender algunos trucos

P.S.: Tanto Hades87 como yo mismo ofrecemos “soporte” vía plurk para las dudas que tengáis acerca de cómo personalizar vuestros perfiles ;O)