Using CSS to change Pre-Formatted Text Style

  • Unknown's avatar
    upinvermont · Member ·

    Have Premium.

    In short, I don’t want a gray background (box) or Typewriter as a font. I’d like my preformatted text (poetry) to appear like the rest of a given post. So, using Elimin as a theme, I put the following code into the CSS customizer:

    pre{
    font-family: ‘Noto Serif’, Georgia, Times, serif;
    background-color: inherit;
    border: none;
    }

    Aaaaand nothing whatsoever changes. I copied this code from another post on this forum.

    The blog I need help with is: (visible only to logged in users)

  • darusja · Staff ·

    Hi upinvermont,

    could you give me an example (link) of the post, that you want to edit? I cannot see the gray box. Or maybe you have manged on your own?

    Let me know!

  • Unknown's avatar
    upinvermont · Member ·

    Okay, I’ve got it looking the way I want it using inline HTML:

    <pre style="background-color: inherit; overflow-wrap: break-word;"><span style="font-size: 16px; font-family: Georgia; color: #000000;">This is a test.
    with white background
         and indents and word wrap
</span></pre>

    Okay, go here:

    Me

    At the bottom of the page you will see two examples. The lower example is what I’m trying to accomplish through CSS. So, basically, I want to take the HTML above and transform it into CSS. Somehow it’s not working. But if I’m stuck with inline HTML, that doesn’t bother me one whit.

  • Unknown's avatar
    upinvermont · Member ·

    Got an an email from the support staff. I had initially entered the CSS as follows:

    /* Change background color and font of pre-formatted text */
    pre {
    font-family: Georgia;
    color: #000000;
    background-color: inherit;
    border: none;
    overflow-wrap: break-word;
    }

    This didn’t work. Turns out I needed to preface the CSS with .entry-content

    /* Change background color and font of pre-formatted text */
    .entry-content pre {
    font-family: Georgia;
    color: #000000;
    background-color: inherit;
    border: none;
    overflow-wrap: break-word;
    }

  • darusja · Staff ·

    Ok, thanks for the update, it looks like solved.

    Now there is no pre element in the linked post’s HTML, so it should work even without the CSS code.

    Text wrapped in pre element is displayed in a fixed-width, fixed font (usually Courier) and it preserves both spaces and line breaks. So CSS cannot work properly for this piece of code. If you notice this problem again check the HTML of your post and eliminate the pre elements.

    I hope it helps!

  • Unknown's avatar
    upinvermont · Member ·

    //Now there is no pre element in the linked post’s HTML//

    Right, I removed it once I got it working via CSS.

    //So CSS cannot work properly for this piece of code.//

    I tested it and it seems to work properly—regardless of whether Courier is used?

  • darusja · Staff ·

    It seems to me that the problem was the pre element not the CSS code, because pre element forces some styles (background, border, line breaks, font). If you try without this CSS and without pre tag it should work fine too.

  • Unknown's avatar
    upinvermont · Member ·

    Yeah, but no, I tried that without the pre tag and it didn’t work. But then maybe we’re not talking about the same things?

  • darusja · Staff ·

    Now there is no pre tag in the post, so the CSS adressing .entry-content pre does not make any change.

  • The topic ‘Using CSS to change Pre-Formatted Text Style’ is closed to new replies.