Blockquote

Unite Theme
1

Hi there!

I’d like to know the CSS code for making the text in a blockquote the same size font as the normal font on the site.

Thank you

2

Hi @thegoldenpathway,

I hope you are well today and thank you for your question.

You can make the blockquote the same size font as the normal font by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Theme Options -> Other -> Custom CSS

#content blockquote {
  font-size: 12px;
}

Best Regards,
Movin

3

Thank you so much. That worked, though the font size was too small. I changed it.

However, I’d also like to get rid of the white line that is to the left of blockquotes. I don’t like it at all. Can we do that too?

4

Hi @thegoldenpathway,

You can get rid of the white line that is to the left of blockquotes by changing the previously provided code as following.

#content blockquote {
  font-size: 12px;
  border-left: 0;
}

Regards,
Movin

5

Thank you. That took care of the line, but now there is no block quote. Everything is just slightly indented.It doesn’t look like a block quote at all.

6

Hi @thegoldenpathway,

Yes now it’s not looking like block quot because you have removed the styling of it.

Please let me know how you want it to display by sharing the example of it so that i can help you to make it display like that.

Regards,
Movin

7

Thanks for the response.

I’m including a link from another website that I work on. This page has many blockquotes. I was hoping to achieve something like this. Be DanceSassy! – Stairs, Astaire, and Fox’s Trot | Pure Derek Hough

If this is not possible, I will go back to the using the line, although, stylistically, I don’t prefer it.

Thanks. :slight_smile:

8

Hi @thegoldenpathway,

I visited your shared site and found the block quote displayed there is indented and contains opening & closing block quote symbols.

Our block quote is already indented and you can add the opening and closing block quote symbols to it as following which will be displayed as shown in the attached screenshot.

“Your iTunes library is a database that iTunes uses to organize your media. It’s made up of all of the music and other content that you add to iTunes. iTunes uses iTunes library files and your iTunes Media folder to organize and store your media.”

Best Regards,
Movin

9

Adding quotation marks does nothing to make it look like a blockquote, as you can see here. Test of block quote – The Golden Pathway

So I guess you’re basically telling me that I can’t have blockquotes look like blockquotes normally look unless I have that unattractive line to the left of it. Is that what you are saying? Most sites have the blockquotes indented left AND right. As you can see in the link I shared, yours only are indented on the left.

10

Hi @thegoldenpathway,

So I guess you’re basically telling me that I can’t have blockquotes look like blockquotes normally look unless I have that unattractive line to the left of it. Is that what you are saying?
No but there are different ways to display the block quote and we are displaying it using one of those method but you want to display it other way so we have to customize it.
Most sites have the blockquotes indented left AND right. As you can see in the link I shared, yours only are indented on the left.

You can also indent the blockquotes left and right in Unite theme by using the following CSS code.

blockquote {
  padding: 0 3em;
}

Regards,
Movin

11

Hi there,

Somehow, we are not communicating very well. I will try again.

I put in the code you suggested, but as you can see, the block quote looks only “slightly” indented. Test of block quote – The Golden Pathway

As mentioned earlier, I want the blockquotes to be indented far more, in relation to the main text, so it appears like the blockquotes on this page. See attachment.

I don’t know CSS, so I don’t know how to change the numbers to get more indentation.

Thank you.

12

Hi @thegoldenpathway,

You can indent the blockquote more by using the following CSS code.

#content blockquote {
  padding: 0 160px;
}

Change the value 160px in the above code to whatever you want to set which will increase / decrease the indention space.

Regards,
Movin

13

That did it! THANK YOU soooooo much! :slight_smile:

14

You are most welcome here :slight_smile: