Quote Re-design

Hey guys, me again,

I really do not like the way “Quotes” look in the Sydney Theme. They are put in a black box with a red stripe on top of it. I would prefer something more clear like this:

Is it possible to change the design of something I use the quote function for?

Hello there,

Thank you for reaching out to us here.

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

.hentry blockquote{
  background: transparent;
  color: inherit;
  border-left: none;
  padding-left: 40px;
}

.hentry blockquote:before{
  content: "\201C";
  display: block;
  font-size: 70px;
  height: 0;
  left: -50px;
  position: relative;
  top: 18px;   
}  

Regards,
Kharis

Thanks Kharis,

almost what i´d like to have.
I would love a bigger font, however, if i change the font-size to… lets say 100… it does not change. Now the Quote is in a smaller font than the actual post… :confused:

Hello there,

Try this code, please:


.hentry blockquote{
  background: transparent;
  color: inherit;
  border-left: none;
  padding-left: 40px;
  font-size: 30px;
  line-height: 40px;
}

.hentry blockquote:before{
  content: "\201C";
  display: block;
  font-size: 70px;
  height: 0;
  left: -50px;
  position: relative;
  top: 15px;   
}  

Regards,
Kharis

Worked, thanks.

two things left.

  1. How can i make the font size darker?
  2. There is this: " Symbol with every quote. Can i change the color to e24f60 ?

Cheers,
Johannes

Dear Johannes,

You would use the following final code:


.hentry blockquote{
  background: transparent;
  color: inherit;
  border-left: none;
  padding-left: 40px;
  font-size: 30px;
  line-height: 40px;
  color: #444; /* Change default color */
}

.hentry blockquote:before{
  content: "\201C";
  display: block;
  font-size: 70px;
  height: 0;
  left: -50px;
  position: relative;
  top: 15px;   
  color: #e24f60; /* Quote color */
}  

Regards,
Kharis

cheers mate :slight_smile:

Solved

Same problem for me too. I tried the code above but all I get is the a black box with white text.
I want grey text and this colour background please: #e9f5f8

No matter what I try nothing works. Can you assist please.

Hello @inonews,

So sorry for the delay.

Could you please confirm whether the group of CSS code where you added the new ones is error free? Please check it here. If no error be found, please share the link to the page where I can see that blockquote.

Regards,
Kharis

The link is here: http://israelnewsonline.org/no-bbc-coverage-of-energy-sector-agreements-between-israel-and-the-pa/

Your link above seems dead.

I copied the css that you suggested above but it had no effect.
Thanks Kharis

???

Hello there,

So sorry for the delay. You site is being cached by WP Super Cache. Could you please empty all cache then reload your site to see code addition takes affect?

Regards,
Kharis

I did, every time I make a change I do but the same

Where did you put the code? Could you please try to move the code I suggested into the most top line?

Regards,
Kharis

Same but I got the quote mark now…

Please replace this code:


.hentry blockquote{
  background: transparent;
  color: inherit;
  border-left: none;
  padding-left: 40px;
  font-size: 30px;
  line-height: 40px;
  color: #444; /* Change default color */
}

with:


.hentry blockquote{
  background-color: transparent !important;
  color: inherit !important;
  border-left: none !important;
  padding-left: 40px !important;
  font-size: 30px !important;
  line-height: 40px !important;
  color: #444 !important; /* Change default color */
}

Regards,
Kharis

Yay! Thanks Kharis. I have a big space underneath the quote though - how can I reduce that? This is the code I now have as I changed the font size and line height.

.hentry blockquote{
background-color: transparent !important;
color: inherit !important;
border-left: none !important;
padding-left: 40px !important;
font-size: 18px !important;
line-height: 22px !important;
color: #444 !important; /* Change default color */
}

.hentry blockquote:before{
content: “\201C”;
display: block;
font-size: 75px;
height: 0;
left: -50px;
position: relative;
top: 15px;
}

Try adding this code, please:


.hentry blockquote {
   margin-bottom: 0;
}

No it didn’t help :frowning:

This post is easier to see the issues. I turned off WP super cache by the way, for now.