Personalizando TU Coctelera (I): Añadir una hoja de estilos propia
Hola a todos. Por fin he podido sacar unos minutos para explicaros un poco el tema de personalizar tu blog de La Coctelera con tu propio CSS. Vamos a ir de menos a más, asi que hoy os explico lo más sencillo de todo: como añadir tu propia hoja de estilos al blog y así añadir alguno de tu propia creación. Asumo que al menos sabeis leer CSS.
Lo que vamos a hacer, en resumen es crear un archivo CSS y despues subirlo, para terminar enlazandolo correctamente y ponerlo en funcionamiento.
Como simple ejemplo vamos a añadir un marco personalizado a las fotos que publiquemos simplemente por personalizar un poco más su presentación.
1. Crear tu archivo CSS
A mi, como de momento me va el rosa superstrong que estoy aplicando, lo que voy a hacer es darle un borde del mismo rosa con 1 pixel de ancho a todas las imagenes que suba. Para ello voy a crerar un nuevo archivo de hoja de estilos y lo voy a llamar "thenine.css".
Ahi dentro incluiré el siguiente código
#bordeimg { border: 1px solid #FF4FFF; margin:2px; padding:1px;}
2. Subir el archivo CSS y realizar la llamada para que funcione
Subimos el archivo CSS mediante el enlace normal de añadir un archivo que hay en la ventana de editar artículo, y despues lo tenemos que llamar para que pueda funcionar correctamente y aplicarse a nuestro código.
Para ello, en el apartado "Sobre mí", lo que vamos a hacer es pegar este código encima de todo, o al final. Es la llamada al archivo CSS y se hace mediante el método import. Muy fácil.
<style type="text/css">
@import url("http://www.lacoctelera.com/myfiles/thenine/thenine.css");
</style>
3. Hacer funcionar nuestro CSS
Y ya solo nos quedaría aplicarlo. Al subir una nueva imagen, por ejemplo esta:
podemos ver en su código:
<img src='http://www.lacoctelera.com/myfiles/thenine/hexagons.jpg' id='img_0' height='180' width='240' align='middle'/>
lo que haremos para añadir nuestro estilo será copiar una llamada a nuestra clase #bordeimg dentro de la etiqueta img, quedando así:
<img src='http://www.lacoctelera.com/myfiles/thenine/hexagons.jpg' id='img_0' height='180' width='240' align='middle' class="bordeimg"/>
veis, la llamada class="bordeimg" al final, ¿verdad?
y este sería el resultado final:
¿Por qué pasa esto?
Cuando subes una imagen por defecto pone un borde con un estilo propio que viene definido en la hoja de estilos de La Coctelera. Nosotros lo que hemos hecho ha sido pisar ese estilo con uno propio, modificando el aspecto.
Creo que es un ejemplo del todo sencillo, facilmente comprensible y que os da buenas pistas para empezar a controlar todo esto. Habrá un próximo episodio en el que veremos dónde están definidos los estilos en La Coctelera, y cual es su estructura, para que podais así pisar los que os apetezca y modificar el aspecto final de vuestro blog.
19 comentarios
http://www.megafriki.es
27 mar 2007 | 10:03 PM
Me falta saber crear el archivo CSS....Lammer al teclado! :S
28 mar 2007 | 12:09 PM
un archivo CSS es como un TXT. Abres un archivo con el editor de textos, en blanco, y escribes eso que puse, y lo salvas como nombredearchivo.CSS y ya lo tienes ;)
De todas formas yo aconsejo leer algo sobre CSS si no se tiene ni idea. Ya que ponerte a cambiar el CSS de La Coctelera necesita algo de experiencia..no mucha, pero un poco si.
Aqui tienes algo para empezar: http://www.w3c.es/Divulgacion/Guiasbreves/HojasEstilo
28 mar 2007 | 12:13 PM
¿Verdad de la buena que vas a poner más cosas? Las principiantas con ínfulas te lo agradeceremos ;-) ¿Alguna posibilidad con las plantillas? ¿contadores? Mira que te idolizo, digo idolatro :-D
3 abr 2007 | 11:13 AM
Como se crea el archivor CSS
Geacias mil por la informacio,si me la puedes extender!
Un abrazo,Dios los bendiga!
4 abr 2007 | 01:18 AM
Hola, una pregunta, ¿y si lo que yo quiero es que no tenga marco alguno? es que no me gusta que haya un marco rodeando la imagen, como seria?
muchas gracias
4 abr 2007 | 02:05 AM
Por partes :)
bebesfelices: Iré poniendo más cosas, en función del tiempo que tenga para ir ampliando la información. Con CSS de hecho lo que estás haciendo es modificar la plantilla, ya ves lo que he hecho yo.
Lucía Giraldo: respondí a esa cuestión unas lineas más arriba. Puedes crear un archivo CSS igual que uno de texto, y despues cambiarle la extensión por .CSS y ya tienes uno. Lo que importa es que lo que hayas escrito dentro tenga sentido
Rafiki: Como ves, en este mismo tutorial, al explicar qué codigo añadir a tu fotografía original me sale sin borde si yo no lo quiero. Fijate en el código que se añade al incluir la foto, en este caso:
En ese código no hay definido ningún borde, por tanto no lo tendrías al añadirla. También puedes buscar si se te añade algúna etiqueta que añada estilo y borrarla.
Saludos a todos y paciencia, no tengo todo el tiempo que desearía para escribir aqui.
4 abr 2007 | 09:45 AM
Perdón, Rafiki, el código:
<img src='http://www.lacoctelera.com/myfiles/thenine/hexagons.jpg' id='img_0' height='180' width='240' align='middle'/>
4 abr 2007 | 09:47 AM
Me parece estupendo este post...a los que estamos "verdes" nos viene muy bien. Felicidades, ante todo un post práctico.
Saludos, Adela
4 abr 2007 | 10:04 AM
como haces para poner tu diseño propio con la foto que quieras en la cabecera del blog? gracias
5 abr 2007 | 01:48 PM
He hecho los pasos que has indicado pero el recuadro no aparece por ningún lado. ¡!!!???
6 abr 2007 | 07:52 PM
Jo, me vienes como caído del cielo, te cuento:
Pretendo darle una nueva imagen al blog de Tarantino y he estado experimentando con el HTML en el sobre mi. Como tengo una versión antigua del blog aún abierta, estoy testeando allí: http://www.espacioblog.com/leemarvin
Por favor, pásate por ahí y dime qué te parece. He notado que con ciertas resoluciones de pantalla la sangre se ve debajo de los textos, lo cual es un coñazo, en lugar de verse en el margen. ¿Sacarás pronto el tutorial para cambiar el fondo?
Muchas gracias adelantadas, tienes un blog genial!
(Cualquier consejo sobre el diseño estético del blog será bienvenida!!!)
8 abr 2007 | 07:14 PM
Acabo de llegar de vacaciones de Samana Santa y he visto estos comentarios, mañana con mas tiempo los leere, creo que me interesa para el cambio de luck de mi pagina.
Un saludo
10 abr 2007 | 06:17 PM
Me podriasd guiar un poco de como poner eun contador, pero que se quede en la columna de la derecha, donde salen todos los articulos y demas informacion del blog ?
Gracias y te un saludo
16 abr 2007 | 11:23 PM
Joan, para introducir servicios externos en tu blog puedes hacerlo a traves de la sección "Sobre mi"
mirate esta documentación: http://wiki.lacoctelera.com/sobre_mi
ahi te explica cómo has de hacerlo. Lo único que no te puedo decir es dónde se consiguen los buscadores porque como has visto yo no tengo ninguno, pero seguro que verás otros blogs que lo tengan y en la mayoría de ellos pinchando encima del contador te suelen llevar a la página de donde salieron.
Saludos
17 abr 2007 | 12:24 AM
excelenye
pero una regunta si quiero cambiar tu fondo por uno mio???
4 jul 2007 | 05:41 PM
qiero cambiar de luck mi foto es tengo el pelo por el brazo pues por la rayita esa de color marron y soy morena , ojos marrones oscuros qu eme recomendais ?
28 ago 2007 | 01:58 PM
Me he quedado alucinado con lo del fondo. ¡ Has tenido que haber trabajado en la NASA para hacer esto ! yo entendía por fondo de blog la foto de un perrito blanco o el típico paisaje tropical, pero veo que es mucho más que eso. Cuando tenga tiempo, intentaré hacerlo. Un saludo.
6 nov 2007 | 07:36 PM
yo quiero una de estas
24 may 2008 | 02:02 AM
Escribe un comentario