Afinar con los tipos de letra

Inicio Foros WordPress Themes y Diseño Afinar con los tipos de letra

Este debate contiene 6 respuestas, tiene 2 mensajes y lo actualizó  miseroprospero hace 8 años, 10 meses.

  • Autor
    Publicaciones
  • #15645

    miseroprospero
    Participante

    <p>!Hola a todos!<br />
    Me estreno en este foro con una pregunta sobre diseño, ya que estoy dejando el blog a punto antes de "lanzarlo".<br />
    Tengo instalado el WP 2.7, podéis acceder al blog en http://www.miseroprospero.org/blog/. La plantilla que he instalado es la Atahualpa 3.4.3 (de http://forum.bytesforall.com/). Mis conocimientos de CSS, PHP, etc son casi nulos aunque parece que no es necesario, ya que en Atahualpa Theme Options se pueden cambiar un montón de cosas de forma más o menos sencilla.<br />
    Por ejemplo, he cambiado el fondo con una imagen mía, los 3 headers con una composición propia, el pequeño logo al lado del nombre del blog.<br />
    Pero al meterme con los tipos de letra es cuando me he encontrado con problemas que no he podido resolver.<br />
    Lo que quiero es cambiar las fuentes de el titulo del post, el contenido, lo que hay en el left and sidebar. En el editor del Atahualpa, en la sección Body, text and Links, si escribo el nuevo tipo de letra delante de los otros:</p>
    <p>font-family: Cicle, tahoma, arial, sans-serif;</p>
    <p>TODOS los textos del blog se ponen en este tipo.<br />
    He seguido adentrandome en el editor de Atahualpa, en otras secciones y no he encontrada nada más sobre fuentes o tipos de letra. (A veces tamaño, posición).<br />
    ¿Que tendría que hacer para cambiar uno por uno? Me tengo que meter en el Editor CSS?<br />
    Por favor, echadme un cable!!<br />
    MIL GRACIAS<br />
    Saludos
    </p>

  • #35959

    pixel
    Participante

    Hola,

    para modificar los tipos de letras del theme, tienes que modificar el css. Cada etiqueta html tiene un identificador en css para que me entiendas, por ejemplo,

    Normalmente los titulos de los posts, están dentro de etiquetas h2 en html, y lo más usado, es heredar el identificador dentro del div, si por ejemplo la etiqueta h2 esta dentro del div con el class contenido, tienes que modificar el siguiente código css, en esta caso para cambiar el color,

    . contenido h2 { color:#fff}

    Si tienes pocos conocimientos creo que no me entenderás muy bien, de todas formas, entrado en tu blog y he buscado el código css que tienes que modificar para cambiar el tipo de fuente o color, para cambiar el titulo de los posts es

    div.post-headline h2 a:link, div.post-headline h2 a:visited, div.post-headline h2 a:active, div.post-headline h1 a:link, div.post-headline h1 a:visited, div.post-headline h1 a:active {
    color:#666666;
    text-decoration:none;
    }

    Si lo que quieres es modificar el tipo de letra solo en el titulo, modifica lo siguiente:

    div.post-headline h2 a:link, div.post-headline h2 a:visited, div.post-headline h2 a:active, div.post-headline h1 a:link, div.post-headline h1 a:visited, div.post-headline h1 a:active {
    color:#666666;
    text-decoration:none;
    font-family: Arial, tahoma, arial, sans-serif;
    }

    Pero si quieres usar el mismo texto en toda la página lo mejor es modificar el body, por ejemplo:

    body {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:transparent url(/blog/wp-content/themes/atahualpa/images/backgr.gif) repeat scroll 0 0;
    color:#FFFFFF;
    font-family:Arial,tahoma,arial,sans-serif;
    font-size:0.8em;
    margin:0;
    padding:0;
    text-align:center;
    }

    Espero poder ayudarte, aunque sin conocimientos al principio cuesta un poco, por cierto, me fijado que todo el css lo tiene introducido directamente en el theme, antes de la etiqueta </head>, es muy importante para un buen posicionamiento añadir todo el css, en un archivo diferente y vincularlo, hay que tener el código lo más limpio posible.

    Suerte.

  • #35971

    miseroprospero
    Participante

    ¡Gracias por la información!
    Me pongo a ello, a ver que tal. Te cuento,
    Un saludo,
    Carlos

  • #35996

    miseroprospero
    Participante

    Genial, Pixel!!!!
    Ha funcionado. Mil gracias.
    Aquí está el resultado: http://www.miseroprospero.org/blog/
    Ahora voy a ver qué se puede hacer con el texto del post. He añadido un plugin que me parece muy útil y os lo recomiendo: TinyMCE. Permite editar el post con más detalle. Por ejemplo, en cuanto a los tipos de letra, hay varios. ¿Se pueden agregar más? Con esto no hay que tocar otra vez el CSS y además permite elegir siempre qué tipo de letra queremos para el post.
    En fin, tema resuelto.
    A otra cosa.
    Un saludo,

    Carlos

  • #36332

    pixel
    Participante

    Hola Carlos,

    puedes usar más tipos de letras, pero tienes que tener cuidado con este tema, porque hay la posibilidad de que puedas usar un tipo de fuente especial que otros usuarios no la tengan instalada en su pc, entonces no verán el texto igual que tu.

    Lo mejor es usar un tipo de fuente genérico, en el que sabes que todo sistema operativo la incluye de serie, por ejemplo arial, verdana, etc.

    Un pequeño truco, es usar el letter-spacing en el css, para que de un aspecto diferente, si por ejemplo pruebas con Arial y pones lo siguiente:

    h2 { font:normal 12px Arial, Verdana, Times, serif; letter-spacing:-1px; }

    Ahora el aspecto de la fuente (desde mi punto de vista) no se ve tan sosa como puede ser un fuente como Arial, pero bueno, es cuestión de gustos. Por último, cuando he puesto los atributos en el css, pongo distintas fuentes por orden, eso significa, que si un usuario no tiene instalada Arial, se mostrara Verdana y si no, la siguiente, espero poder ayudarte y aclararte un poco más el tema de css y las fuentes,

    un saludo!

  • #36432

    miseroprospero
    Participante

    ¡Saludos!
    Pues sí, estoy experimentando este problema. Es una pena que otros usuarios no puedan ver el diseño original. Voy a trabajar en esto que dices, para que al menos haya otras alternativas…
    Pero, ¿seguro que no se puede haver nada? Nos pasó una cosa muy extraña… Le enseñé como iba el blog a mi colega en su casa, usando su portatil. Todo fue perfecto. Luego me lo traje a la oficina y no se podían ver el original… Me quedé de piedra.
    ¿Tú lo puedes ver? En fin. Te paso las letras por si tienes ganas de charle un vistazo.

    [url=http://www.filefactory.com/file/a2c7d90/n/Fonts_blog.rar]Fuentes del blog[/url]

    ¡¡Gracias!!

  • #36434

    miseroprospero
    Participante

    ¡Me dejaba la más importante!
    Es la Gutter Vomit, que usamos en nuestro logo.

    [url=http://www.filefactory.com/file/a2c7e9c/n/Fonts_blog_2_.rar ]Pack completo[/url]

El foro ‘Themes y Diseño’ está cerrado y no se permiten nuevos debates ni respuestas.

Pin It on Pinterest