Need help? Check out our Support site, then


editor css wordpress.com

  1. Hola:

    Hace un tiempo que tengo un blog en wordpress.com y me gustaria cambiar la plantilla por otra... no pretendo hacerla desde cero, prefiriría encontrar una que se ajuste a mis preferencias y después con el tiempo modificar pequeñas cosas para que se adapte más a mi estilo. Pero para hacer esto encuentro muchos problemas y realmente pense que sería más sencillo.

    No se como usar la caja de editar css del blog (ya compre los creditos), no encuentro soporte en español, lo cual creo que debería ser algo imprescindible.

    Me he bajado temas completos y veo que no es posible usarlos porque tendría que subir los archivos via ftp y eso no se puede hacer con este blog, me he bajado styless.css pero no se como usarlos.

    He mirado en infinidad de sitios, pero solo encuentro manuales para editar css, para hacer mis propias plantillas o modificarlas, pero nada de como editar css en blogs gratuitos de wordpress.com

    Miré información antes de comprar los creditos y entendí(aunque ahora creo que mal) que se podía modificar css de una plantilla e incluso incluir una plantilla nueva sin necesidad de tener acceso al html, ya que se supone(según entendí) que con esto solo cambiaba la apariencia del blog, dejando la estructura interna del blog intacta.

    Pensé que tan solo sería copiar/pegar, pero por lo que parece tengo que hacer un master completo de css y hml y evidentemente ese no es mi caso.

  2. Muy buenas, Paovia, qué tal.

    Lo primero, que no cunda el pánico; ya veo que te has preocupado de buscar soporte por tu cuenta, y eso te ha generado un buen montón de dudas, lo cuál está muy bien.

    Somos muchas bitácoras en español aquí, en wordpress.com, así que tendrás siempre soporte sin problemas. No sé si hay planes de traducir las FAQ a varios idiomas, así que entretanto nos echaremos una mano cómo buenos arrieros.

    Ahora que te has gastado unos eurillos verás que es muy fácil personalizar tu blog. Lo primero que debes saber es que no podemos modificar el contenido HTML de las plantillas; en tu caso actual, no podrías, por ejemplo, colocar la hora en la que se publicó el post junto al enlace de los comentarios. Tampoco podemos cambiar el pie de página de nuestros blogs, aunque puedes ocultarlo con el CSS.

    Lo primero que tienes que mirar es el código fuente de tu página. Vete a tu blog, cliquea con el botón derecho sobre cualquier lugar y elige la opción "Ver código fuente de la página". Al principio te aparece la dirección de tu hoja de estilos (en realidad la hoja de estilo para cualquiera que utilice ese tema): http://s.wordpress.com/wp-content/themes/pub/rounded/style.css En esta hoja viene todas las propiedades de diseño que caracterizan tu blog. Te sugiero que la imprimas si vas a seguir adelante con tu actual plantilla.

    Editar el CSS es más fácil de lo que parece. Yo no sabía absolutamente nada, pero poco a poco voy aprendiendo. Si no tienes tiempo, ni te dedicas a diseñar webs, te recomiendo que te leas los principios básicos de algunas propiedades, y poco más. Después, si tienes dudas puntuales (cambiar márgenes, la posición de las imágenes o el tamaño del texto) recurras a Google a este mismo foro.

    En Dashboard - Presentación - Editar CSS, puedes añadir el CSS que quieres modificar. Mira, el CSS que añades, se coloca al final de la hoja de estilo, de tal forma que cuándo el navegador la lee, tiene en cuenta los cambios. Es decir, que puedes añadir nuevas propiedades, o (ésto es lo mejor) cambiar las antiguas por las que tú elijes. Por ejemplo, al principio de tu hoja de estilos original tienes:
    <br /> body {<br /> background: #4F402A url(img/bg.jpg) no-repeat top left;<br /> }<br />

    En la caja de edición del CSS tú puedes poner:
    <br /> body {<br /> background: #bgbvfc url(img/miarchivo.jpg) no-repeat top left;<br /> }<br />
    y el navegador leerá los cambios que añadas.

    Cuándo estés en la caja de edición del CSS tienes dos opciones:

    (1) Add to existing CSS (View stylesheet): Añades tus propiedades a la hoja de estilo, tal y cómo has visto ahí arriba.

    (2) Start from scratch and just use this: Sólo tiene en cuenta el CSS que tú añadas, sin contar el que trae la plantilla por defecto. No te lo recomiendo.

    Si pulsas "Vista previa", verás los cambios sin guardarlos, y te será más fácil ir modificando propiedades. Ve haciendo copias de seguridad en archivos de texto de este código que añades por si ocurre un desastre.

    Ten en cuenta que el código fuente de la página es vital para modificar el CSS. Cada capa lleva su propio nombre y lo necesitas para cambiar sus propiedades. Por ejemplo, al final del código fuente verás las capas del pie de página ("footer"). Podrías cambiar el fondo del pie de página:

    <br /> #footer {<br /> background: #f5k2c4<br /> }<br />

    También verás que dentro de la capa <div id="footercontent"> hay una clase ("class") llamada "credit", que caracteriza la frase "Obtenga un blog gratuito en WordPress.com. Theme: Rounded by Release." Puedes modificar sólo esta parte de pie de página modificando esta clase:

    <br /> .credit {<br /> color: #fff;<br /> font-size: 13px;<br /> border: 1px #ccc;<br /> }<br />

    Si quieres ocultar cualquier componente, cómo por ejemplo la fecha que acompaña a un post cuándo lo publicas, sólo tienes que buscar la capa o la clase correspondiente en el código fuente de la página:

    <br /> .date {<br /> display: none;<br /> }<br />

    En WordPress.com no puedes instalar plantillas nuevas, ni subir archivos que no sean de las extensiones jpg, jpeg, png, gif, pdf, doc ó ppt. Tampoco sirve que te bajes archivos .css de otras bitácoras (a menos que utilicen la misma plantilla que tú), ya que tal y cómo puedes ver en el código fuente de tu blog, los componentes de tu web que puedes modificar (capas, clases, etc.) cambian entre un blog que esté en MySpaces o en Bitacoras.com (el pié de página podría llamarse #pie en vez de #footer), aunque puedes coger ideas, colores, o imágenes de fondo o de cabecera que luego tú puedes insertar con tu propio código.

    Espero que todo esto te resulte de ayuda. Ten en cuenta que tienes que decidirte por una plantilla que cubra tu idea general de tu diseño final: una o más columnas (sidebars), botones en la cabecera, disposición de los componentes de cada post (fecha, autor, etc.) y demás.

    Evidentemente necesitarás pringar un poco y saber cómo modificar el CSS: márgenes, tamaños de letra, colores, y poco más. Hay miles de tutoriales en la red, talleres y ayuda a través del Google. Aquí también te contestaremos.

    ¡Un saludo!
    Alex.

  3. Hola Alex:

    Muchas gracias por responder y por hacerlo de forma tan detallada, me ha servido de mucho todo lo que me has comentado, aunque alguna cosa no me ha quedado demasiado clara.

    Ya me había imaginado que no se puede coger archivos .css de otros bitacoras. Los style.css que me había bajado eran de la página de Alexking que están creados para wordpress.

    Lo que no entiendo es como trabajar en la caja de editar css... Ya había mirado "ver codigo fuente" de mi blog y cogido la pagina http://s.wordpress.com/wp-content/themes/pub/rounded/style.css

    Escribí la dirección en el navegador para ver el css, pero no se se que hacer con él.

    No se si te he entendido bien, pero ¿Hace falta qué copie todo el css de la página y modifique sobre él al final? O ¿Sólo escribo en el editor las partes que quiero cambiar? Porque lo he intentado de las 2 formas y siempre obtengo el mismo resultado en vista previa; me aparece el blog sin estilo, es decir todo esta ahí los post y todo, pero como si estuviera solo en html, fondo blanco, texto lineal...

    Otra cosa, si cometo algún error, o no me gustan los resultados, ¿Puedo volver después a mi plantilla predefinida de wordpress?

  4. entomoagricola
    Member

    Hola de nuevo, me alegra ser de ayuda :)

    El CSS de tu bitácora te sirve para ver las propiedades de los componentes del blog. Es decir, cómo están caracterizados el pie de página, la cabecera, el color de fondo de los posts o la anchura de tu menú lateral (el sidebar). Ya sé que es largo y aparentemente ininteligible, pero en todo ese texto está la clave para personalizar tu bitácora. Con este CSS no tienes que hacer nada, no puedes quitarle líneas, sólo te sirve de guía para conocer las propiedades de cada componente (capas, clases, etc), para saber cómo modificarlas; también porque algunas propiedades no vendrán definidas y tú podrás añadirlas.

    Precisamente en la caja del CSS añades el código. Ya te comentaba que el código que añadas sustituye a las propiedades que vienen en el archivo .css original del blog. Si quieres el pie de página burdeos, sólo tienes que indicarlo en la caja del CSS, elegir la primera opción ("Add to existing CSS"), y darle a "Vista Previa". Si has escrito bien el código, el "footer" se pondrá burdeos.

    Así que no tienes que escribir el código CSS de tu página entero en la caja del CSS, sólo el código que quieras CAMBIAR o quieras AÑADIR al existente.

    Si cometes algún error, no es el fin del mundo. Puedes elegir otra plantilla, y luego volver a la tuya, para recuperar el estado original, siempre que en la caja del CSS no haya código escrito. Por eso te insisto en que uses la primera opción, "Add to existing CSS", para que te resulte más fácil.

    Si tienes dudas en concreto, no tienes más que preguntar, para ir haciendo pruebas.

    ¡Saludos!
    Alex.

  5. Muchas gracias Alex, aunque todavía creo que falta bastate para conseguir hacer algo decente en mi blog, al menos ahora tengo las cosas más claras...no entendía la manera de manejar el editor.

    He mirado tu blog el diseño es muy chulo y me gustan mucho las fotos, aunque los bichos no son lo mio,jeje

    De nuevo te doy las gracias y si me surjen nuevas dudas te las haré saber.

  6. Hola de nuevo:

    Me han surgido algunas dudas...

    Ya se que no se puede cambiar la estructura de la plantilla, es decir: si los comentarios estan al final de los post, no los puedo poner al principio o si el blog tiene la barra lateral a la derecha ponerla a la izquierda o ese tipo de cosas.

    Por lo que entendí, aunque no pueda mover los elementos que componen la plantilla, si puedo ocultarlos a la vista, como el pie de página.

    Lo que me gustaria saber es si puedo añadir cosas que no están; como poner subtitulo al título del blog, si la palntilla no lo tiene, añadir las páginas a la cabecera, en vez de en la barra lateral como pasa con algunas plantillas, ocultar algo y crearlo en otro sitio, como por ejemplo los comentarios...

    Me da a mi que no... pero es que no encuentro ninguna plantilla que sea exactamente como a mi me gustaria.

    Bueno gracias de todas formas.

  7. Hola amigos, desde hace poco estoy en wordpress y me gustaría preguntar si alguien sabe cómo puedo poner música en mi blog, he visto algunos que tienen incluido un reproductor y todo. Por favor si alguien sabe que me ayude que lo necesito hacer pronto :-).
    No sé bien como funciona este foro y les dejo la dirección de mi blog y mi correo http://www.mauri1.wordpress.com y [email redacted].

    Desde ya les doy las gracias.
    chao

  8. @mauri1, tu pregunta no tiene nada que ver con este tema. La proxima vez, te sugiero que abras otro tema.

    Si usas el campo de busqueda en la parte de arriba de este foro, veras que el tema de la música ya ha sido discutido.

  9. entomoagricola
    Member

    Buenas de nuevo :)

    Ya veo que has solucionado el tema del subtítulo del blog. En My Dashboard - Opciones - Descripción corta, puedes cambiarlo cuándo quieras.

    Lo de "añadir las páginas a la cabecera" no lo entiendo, pero los widgets (estadísticas, flickr, texto, etc.) sólo pueden utilizarse en las barras laterales (sidebars), o en algunas plantillas, en el pié de página (footer), si no me equivoco. Todo depende de la plantilla que utilices.

    Los comentarios sólo se muestran acompañando a cada post. También puedes mostrar los últimos comentarios con un widget en tu barra lateral, si te refieres a eso.

    Respecto a ocultar componentes, sólo tienes que poner esto en la caja de CSS, según lo que quieras ocultar:
    <br /> .date {<br /> display: none;<br /> }<br />
    Tienes que ser más específica con las dudas, para que pueda contestarte con más precisión ;)

    Una opción es mirarte la plantilla "Sandbox" (que tiene después varios estilos dónde elegir). Es una plantilla totalmente en blanco, muy bien estructurada, dónde tú vas diseñando la bitácora desde cero. Así la he hecho yo. Fíjate cómo Engtech (http://engtech.wordpress.com) ha conseguido su diseño partiendo de cero y le ha quedado un blog de puta madre (¿se puede decir "deputamadre" aquí? :p). Evidentemente, hay que echar bastantes horas para que quede todo más o menos en condiciones, y sigues con limitaciones para poner ciertos componentes dónde más te gusta.

    Otra opción es que te crees otro usuario con otro blog, y vayas experimentando en él, para no tener que estar probando y desarmando tu blog principal.

    ¡Saludos!
    Alex.

  10. Perdona por no ser suficientemente explicita, es que a veces es dificil plasmar con plabras lo que uno quiere exactamente y mas dificil aun conseguir que otro te entienda.

    Mi plantilla si acepta poner subtitulo, solo que hay alguna que me gusta más como está estructurada pero no tiene subtitulo.

    Con lo de las paginas en la cabecera, me refiero que hay plantillas como la que uso yo ahora que las páginas aparecen en la cabecera (about me, divagaciones) y en otras plantillas no aparece y tienes que ponerlas mediante un widget en la barra lateral.

    Con lo de los comentarios me refería a que si por ejemplo en mi blog la opción de los coments esta abajo y yo la quiero arriba, puedo ocultar la de abajo con none y crearla arriba debajo del título del post (es un ejemplo, no quiero cambiar los comentarios de sitio)

    Ya había pensado crear otro blog para ir experimentado, solo que de momento toy leyendo, leyendo, mirando, buscando información.

    La idea de la plantilla esa que me has dicho me interesa, como puedo añadirla si abro otro blog ¿está en presentaciones?

    Si creo otro blog, tendré que volver a comprar los credios para editar el css?

    Alex!! muchas gracias por tu tiempo y por tupaciencia, significa mucho para mi.

  11. Alex ha sido muy detallado en sus explicaciones. (¡Que paciencia!) :)

    Pao, si podés cambiar la posición de tus comentarios (ponerlos arriba) sin necesidad de ocultar los de abajo. Todo esta en saber hacerlos a través de CSS, el cual, puede ser algo intrincado dependiendo que tan interesada estés que tu blog se vea bien en todos los navegadores, lo que es recomendable.

    CSS no es complicado, pero si necesita tiempo de aprender. Está por de mas decirlo, pero si seguís los consejos de Alex, investigas y leés, te vas a volver una experta en CSS :)

    @Alex, con lo de "puta madre", se puede pero no se debe ;)

    ¡Exitos para los dos!

  12. entomoagricola
    Member

    Bueno, Paovia, cómo hace poco que estoy echando una mano en los foros, mi paciencia aún no se ha quebrado :p Al menos no preguntas nada que pueda encontrarse fácilmente en las FAQ.

    Ya veo que estás experimentando con la plantilla Sandbox, aunque con el diseño básico. Para elegir entre distintos diseños de Sandbox, vete a Presentación - Temas de Sandbox y verás varios modelos distintos (con una o dos sidebars, etc.).

    Si quieres personalizar más tu cabecera, puedes optar por hacerte una tú con algún programa de diseño gráfico (cómo el GIMP o el Photoshop, o cualquiera más sencillo), para que pongas un subtítulo cómo te guste.

    Lo que tú llamas "páginas en la cabecera", yo lo llamo "pestañas" (manía de uno), y son intrínsecas a cada plantilla.

    Sí puedes tener más de un blog para ir probando, sin tener que comprar más CSS. Ten en cuenta, que en WordPress.com son bastante competentes, y te dejan probar la caja de CSS sin tener que pagar, para que veas hasta qué punto puedes modificar tu diseño si pagas. Lo único es que sólo te aparecerá un botón, el de "Vista previa", y no el de "Guardar hoja de estilo", de tal forma que siempre te aparecerá el nuevo estilo en la dirección http://tunuevoblog.wordpress.com/?csspreview=true

    Devblog, si sabes cómo mover los componentes con el CSS, ¿podrías comentarlo? Yo he intentado hacerlo de varios modos, pero sin éxito.

    ¡Un saludo!
    Alex.

  13. Alex, lo voy a hacer primero y te cuento como sale

  14. Bueno poco a poco voy viendo la luz al final del tunel, pero anda que no me queda.

    Pa no variar me ha sugido otra duda, como inserto una imagen que se cargue con el blog (una imagen en la cabecera o de fondo)

    he visto que las imagenes tienen esta forma:

    ejemplo: Background-image: url("img/closed.jpg")

    donde deduzco que "img" es la ruta y "closed.jpg el nombre de la imagen.

    ¿Pero donde hay que tener la imgen?

    muchas gracias

  15. entomoagricola
    Member

    ¡Buenos días!
    Ya veo que te vas aclarando :) y que has vuelto a tu diseño original sin problemas.

    Todas las imágenes del sistema están en la carpeta "img", pero las que subimos los usuarios cambian de ubicación.
    Vete a la DashBoard-Redactar y busca el recuadro para subir archivos al blog.
    Elige la fotografía del disco duro y pulsa el botón "Subir". El archivo quedará alojado en tu blog en unos segundos. Cuándo esto ocurra, si quieres conocer su dirección, pulsa en el botón "Editar", y copia el link.
    Para ver, editar, o conocer el link de los archivos que YA hayas subido, vete a Administrar-Uploads.

    Para no quebrarte la mollera, tendrás que caracterizar la propiedad background. Cómo te dije, si no eres experta ni quieres estudiarte un manual de CSS, vete a google y pones por ejemplo "Background CSS". Te saldrá una de las mejores páginas en español con información de sobra: http://www.ignside.net/man/css/color.php

    También puedes caracterizar la propiedad background en una sola línea:
    <br /> body {<br /> background:#dbdbdb url('img/bg.jpg') top repeat-y;<br /> {<br />
    Así le indicas en la misma línea que la imagen de fondo es bg.jpg, que el color de fondo es #dbdbdb (también puedes utilizar el formato "rgb (125,241,62)" para indicar los colores), que la imagen está centrada en lo alto y en medio del "body", y que se repite verticalmente ;-)

    ¡Ánimo!
    Alex.

  16. Ok Alex, muchas gracias

    Eso es lo primero que hice, pero como anoche no me salía ni a la de tres, pues pensé que sería de otra manera (también es que era muy tarde)

    Lo he probado ahora y con la plantilla sandbox funciona.

    Lo que me fastidia es que la plantilla que a mi me gusta "rounded", no le puedo hacer ninguna modificación al css, ni si quiera cambiarle el color al fondo o alguna chorrada de esas, al darle a "vista previa" la página aparece sin ningun estilo.

    Buscando, buscando, encontré una extensiones bastante chulas para el firefox, sobre el css: porque mi principal problema es saber cual es el css de la parte que quiero modificar y con estas extensiones, te lo dice y muchas cosas más claro, facilita el trabajo, aunque aun me queda probarlas a fondo, porque evidentemente vienen en inglés y seguro que no les sacaré todo el provecho que debería.

    De todas formas ya no te quiero cansar más, gracias por tu ayuda.

  17. entomoagricola
    Member

    Miraré lo de la plantilla Rounded.
    Para Firefox, te recomiendo "Web Developer", "CSSViewer", "MeasureIt" y "ColorZilla", para empezar. Échales un vistazo y ya me contarás. La segunda te vendrá bien para saber el elemento que quieres modificar.
    Alex.

  18. Agregando a las recomendaciones de Alex, te sugiero también la extensión Aardvark. Esa es una de mis principales herramientas.

    Esta extensión te ayuda a identificar elementos en la página, saber su ID y que classes lo afectan.

  19. thanks....

  20. entomoagricola
    Member

    Muy buena, sí señor. Parecida a CSSViewer (pero más completa), y no tan recargada cómo WebDeveloper :)
    Gracias.
    Alex.

  21. Hola, aunque esto que voy a preguntar no está directamente relacionado con el tema... me arriesgo a preguntar.

    No se porque motivo no se carga el estilo de mi blog, no he modificado nada; cree otro blog para las modificaciones.

    Hasta hace dos días todo estaba bien, pero ayer al abrirlo por la mañana, no se cargaba ningún estilo, da igual el que ponga, pense que sería algo momentaneo, pero como veo que no... si alguien le ha sucedido lo mismo le agradeceria la ayuda.

    He mirado otros blogs por si fuera tema del navegador, pero el resto de blogs se ven correctamente.

    Saluditos, Paola

  22. Por alguna razón esta halando el css de http://matt.wordpress.com/blank.css

    Deja voy a mandar un feedback con una explicación en inglés aqui para Mark.

    No vayas a cambiar la plantilla asi Mark puede ver que esta pasando.

    @Mark
    Paovia's blog for some reason is not loading the correct CSS file. Looking at the source, the CSS file that's being loaded is http://matt.wordpress.com/blank.css

    I don't think this is correct.

    Can you please take a look at this?

    Thanks!

  23. Muchas gracias dvblog, no cambiaré la plantilla, pero vamos que antes de escribir he probado con casi todas y o no cargaban o cargaban mal... Misterios de la blogosfera, jejeje

    EDITO: Bueno pues el problema ya se ha solucionado, muchas pero que muchas gracias, por la rapidez y por las molestias, siempre es agradable sentir que alguien te tiende la mano, sobre todo de forma desinteresada.

    Edito: Que torpe!!! esto se parece a la tipica llamada al servicio técnico, donde te responden "¿Ha probado a enchufar el ordenador, señora?

  24. Fixed :)

    The CSS upgrade was purchased and on the CSS page it has 2 choices:
    - add to existing css
    - use just what is in the CSS box.

    It was in the latter so I moved it to the former.

  25. Much obliged, Mark! **thumbs up**

  26. hola buenas tardes... mi consulta es la siguiente: ¿es posible instalar un template para word press de otro fabricante?, ya que las que ofrecen son re limitadas y siendo franco no me agradan mucho. obien poder editar estas en algun programa para modeficar al menos su cabecera? saludos cordiales

Topic Closed

This topic has been closed to new replies.

About this Topic