WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Unable to change font via css (17 posts)

  1. Franksplace2
    Member
    Posted 1 year ago #

    I created a child theme and a style.css file. I inserted this:

    font color="#0000FF" size="3" font-family="Comic Sans MS"

    Some text turned blue. Theme text did not change. Neither texts turned to Comic sans.

    How do I get all the text to change to the requested font?

    Thanks for your help.

    Frank

  2. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

  3. Jay Hoffmann
    Member
    Posted 1 year ago #

    That's not proper CSS. If you would like to change everything about your page you can try

    .body {
    font-family: 'Comic Sans MS';
    color: #0000FF;
    font-size: 3;
    }

    It's probably worth reading up on CSS (http://codex.wordpress.org/CSS) or CSS at http://css-tricks.com/

    Also, I feel like it's my duty as a designer to point out, if you're going to use Comic Sans, you better have a good reason. (http://comicsanscriminal.com/)

  4. Franksplace2
    Member
    Posted 1 year ago #

    alchymyth,

    The theme is twentyeleven.

    jhoffm34

    I have heard that comic sands has a bed reputation. I am building a wordpress site for a Catholic school for special needs children. I chose comic sans because I wanted something whimsical. CS was used on their current site which I built without knowing css.

    I have been trying to learn css but as you both point out, not very succesfully.

    I will take your advice and read the css codex.

    Thank you both,

    Frank

  5. Franksplace2
    Member
    Posted 1 year ago #

    I replaced the original css font line as suggested by jhoffm34. It did not make any difference. I spent some time researching fonts and comic sans.
    I found a plugin that promises to convert the entire site to comic sans. That worked. However I would like the capability to use another font.
    There is still a font problem because the home page text is black and the other pages are blue. Also the theme text (Home, About) are black and too large.

    Why doesn't my CSS control fonts?

    Thanks

    Frank

  6. Franksplace2
    Member
    Posted 1 year ago #

    I am trying to change the color and size of the page names (Home, About, etc) as well as the color of the text on the Home page. I am using twentyeleven and twentyeleven-child.

    twentyeleven css has this:

    'html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;'

    twenty-eleven=child has this

    .body {
    font-family: 'Comic Sans MS';
    color: #0000FF;
    font-size: 3;
    }

    How do I change the font for page names and home page text?
    http://www.franksplace2.com/wordpress/

    Thanks

  7. thoughtwell
    Member
    Posted 1 year ago #

    Try dropping the period from ".body" As of now, you have <body> as a class, where as it's actually an element, so the period is not needed.

  8. Franksplace2
    Member
    Posted 1 year ago #

    thought,

    That worked on the home page text!
    The titles problem remains. There must be something I should do to replace the twentyeleven font size and color with my choices.

    Thank you

    Frank

  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yes, you need to use Firebug to look at the CSS for that element -- and you'll see that it is:

    h1.entry-title

    But to override any other styles, you may need to increase the selectors so try this in the child stylesheet:

    .entry-header h1.entry-title {
       styles here;
    }

    You also need to use a unit of measurement with the font size (px, percentage, em, or rem are the basic options)

  10. Franksplace2
    Member
    Posted 1 year ago #

    WP,

    I did exactly what you have both with and without the . in front.

    I guessed info might be needed before and after the brackets so I tried adding this 'font-family: 'Comic Sans MS';
    color: #0000FF;
    font-size: 3;' inside the brackets. I tried both before and after the "styles here;'
    Nothing changes.

  11. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    The "styles here" was intended for illustration purposes on the post here. It should not be in your actual code. And you MUST have the period before "entry-header" -- it's a class and that's the syntax for classes. Also, as noted already, you MUST have a unit of measurement for the font-size -- or it does nothing.
    So this is what you need to use:

    .entry-header h1.entry-title {
        color: #0000FF;
        font-family: 'Comic Sans MS';
        font-size: 14px;
    }

    Change the 14px to whatever size you want.

  12. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    This is a good basic reference site on CSS:

    http://www.w3schools.com/css/css_intro.asp

  13. Franksplace2
    Member
    Posted 1 year ago #

    WP,

    Thanks That worked.

    BEGIN Rant
    I have spent multiple hours trying to understand CSS but the reality of changing themes is very different than what I read.

    Examples
    Comic sans is now out of favor so I have a work around to install it.
    The books show h1, not .entry-header h1.entry-title
    The books show some kind of div which I don't see here.
    When I used Dreameaver, I could see the css and change it directly.
    And the page title text is still black. It must be another secret h1.
    END Rant
    Clearly I under-estimated the effort to modify themes to match my plans.

    Thank you for helping .

    Frank

  14. Franksplace2
    Member
    Posted 1 year ago #

    http://www.franksplace2.com/wordpress/

    I am trying to control the css for twentyeleven headings and paragraphs.

    WPyogi was kind enough to use Firebug to determine that the CSS element for the subheading (Home) was h1.entry-title
    Now I am asking if someone can determine the css elements for the page header (St. Michael's Place) and tag line (yet another WP site)

    Then I can change them to do what I want. Maybe.

    Thanks

    Frank

  15. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    For CSS-specific issues, consider CSS-specific forums.

  16. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Frank - you can easily download and use Firebug yourself :). There's excellent documentation as to how to use it and it will be well worth the time to learn it well. Really makes CSS into a totally different thing :)!

    What you need to use for these is:

    #site-title a

    and

    #site-description
  17. Franksplace2
    Member
    Posted 1 year ago #

    I installed firebug and am learning CSS slowly.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.