Indent text in blockquote ?

  • LandyVlad

    (@landyvlad)


    5 years ago

    How can I indent the text in blockquote elements?

    I’d like to align it to the left + (indent x pixels to the right) if that makes sense.

    CSS changes in my theme ‘additional CSS’ for blockquote are:

    blockquote::before {
    left: 0%;
    color: #000000;
    font-size: 40px;
    font-family: Arial;
    }
    blockquote {
    font-size: 20px;
    font-family: Georgia;
    color: #000000;
    text-align: left;
    }

    The first portion is for the quotation mark itself.
    The 2nd is for the block text so it’s probably here I need to add something.

    Can anyone assist with the css needed please?

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Aoba Momouchi

    (@aoixtreme)

    5 years ago

    Try this for left margin of whole blocks.

    .wp-block-quote{
    margin-left:20px;
    }

    If you want indent only the first line, try this.

    .wp-block-quote{
    text-indent:1em;
    }

    Thread Starter LandyVlad

    (@landyvlad)

    5 years ago

    Thank you mate I’ll give that a crack

    Thread Starter LandyVlad

    (@landyvlad)

    5 years ago

    Thanks. Why would that margin info not just go into the existing blockquote code like this:

    blockquote {
    font-size: 20px;
    font-family: Georgia;
    color: #000000;
    text-align: left;
    margin-left: 20px;
    }

    would that work?

    Aoba Momouchi

    (@aoixtreme)

    5 years ago

    If there are multiple same specificity rules, then the last rule occurring in the stylesheet is applied.

    In order, 1 is the lowest specificity and 5 is the highest.

    1. Element
    2. Class selectors
    3. ID Selectors
    4. Inline styles
    5. !important

    In this theme, the specificity of “blockquote” element is overridden by “wp-block-quote” class selector specified elsewhere.

    Therefore, if you want to specify style in the “blockquote” element, add “!important” as shown below. This may work.
    margin-left: 20px !important;

    Thread Starter LandyVlad

    (@landyvlad)

    5 years ago

    So am I correct in thinking

    .wp-block-quote is the default wordpress format
    and
    ‘blockquote’ is the format specific to the theme?

    I am finding this confusing, so thank you for your help with this @aoixtreme

    (I deleted !important in some of the css as I assumed they were merely comments, so silly me)

    Re comments I just looked it up and now I know
    /* This is a single-line comment */
    and

    /* This is
a multi-line
comment */

    and it can also be used as

    p {
  color: red;  /* Set text color to red */
}

    so I learned several useful things today 🙂

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Indent text in blockquote ?’ is closed to new replies.