Need help changing the style of the block quote

leylaiten · Member · Nov 1, 2015 at 2:43 am
Copy link

Add topic to favorites
I’m using the Patch theme and the block quotes are capitalised. I want to change this so quotes are indented and in large quotation marks. New to CSS. Thank you

The blog I need help with is: (visible only to logged in users)
jameswelbes · Member · Nov 1, 2015 at 4:31 am
Copy link
This site is private, I can’t see anything.
leylaiten · Member · Nov 1, 2015 at 5:49 am
Copy link
hi, sorry, i just changed it to public
thesacredpath · Member · Nov 2, 2015 at 6:50 am
Copy link
Hi there, this should take care of the issue for you.
```
blockquote {
    text-transform: none;
}
```

kashmirilahsun · Member · Nov 2, 2015 at 7:19 am

blockquote {
    text-transform: none;
      text-indent: 50px;
    font-size:150%;
}

kashmirilahsun · Member · Nov 2, 2015 at 7:19 am
Copy link
Adjust font-size and indent according to your needs
leylaiten · Member · Nov 2, 2015 at 10:26 am
Copy link
Thank you everyone great help. Any ideas about how to put big quotation marks – by blog is predominantly block quotes w images, I need to make it super obvious that I didn’t write the piece. any other ideas welcome.
thesacredpath · Member · Nov 2, 2015 at 7:43 pm
Copy link
@leylaiten, let’s replace the blockquote CSS you have now with the following. The second rule adds a quote mark to the left and a light grey background. The quote mark is added from the icon font, Genericons, which is loaded with the theme you are using. It’s a little “blocky” looking and can be replaced with an image if you have one in mind. The best size, if you wish to use an image, would be about 40px on a side.
```
blockquote {
    font-size: 90%;
    text-transform: none;
    position: relative;
    background: #f8f8f8;
    padding: 10px 10px 10px 60px;
}
blockquote:before {
    content: "\f106";
    font-family: genericons;
    transform: rotate(180deg);
    margin-left: -20px;
    position: absolute;
    left: 25px;
    font-size: 40px;
    color: #777;
    top: 0;
}
```
If you wish to use an image, upload it to your media library and give us the URL and we can help get that in for you.

thesacredpath · Member · Nov 2, 2015 at 9:15 pm

Oops, on the second rule above, I made a booboo. Use this instead.

blockquote:before {
    content: "\f106";
    font-family: genericons;
    transform: rotatey(180deg);
    margin-left: -20px;
    position: absolute;
    left: 25px;
    font-size: 40px;
    color: #777;
    top: 0;
}

barbarakristaponis · Member · Nov 4, 2015 at 3:55 pm
Copy link
I had the same problem as I switched from the Oulipo theme to the Libretto theme. But blockquote problem via CSS now solved. Thanks.
thegoodpage.net.
thesacredpath · Member · Nov 4, 2015 at 7:12 pm
Copy link
@barbarakristaponis, you are welcome.
leylaiten · Member · Nov 4, 2015 at 10:56 pm
Copy link
THANK YOU!!! so good! I ended up using the first one though, not sure what your mistake was – first one is working.

So happy!
thesacredpath · Member · Nov 5, 2015 at 5:49 am
Copy link
@leylaiten, you are welcome.

The topic ‘Need help changing the style of the block quote’ is closed to new replies.

WordPress.com forums

Need help changing the style of the block quote