Blockquote styling

Hello, thanks for all your support so far. On the whole I love the Sydney theme but I don’t like the styling of blockquotes with the black background and no quuote marks.

I’ve tried adding my own CSS in the style.css to change this but its not working.

I’d like a white background with dark grey text. Can you let me know what CSS code I’d need to implement this?

thanks
Sarah

Hello Sarah,

Please try to use the following CSS code.

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard -> Appearance -> Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

blockquote {
    color: gray !important;
    background: white !important;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi - I’ve been having the same issue. I tried the css provided, and it worked in the preview of the customisation, but when I saved and published it reverted to the old style (even though the new css is still there in the custom field)

You can see it here: http://www.thebuddhisttherapist.com/mindfulness-sessions/

I’ve just checked, and when I go back into the custom css field, it now looks like this:

nnblockquote {n color: gray !important;n background: white !important;n}

So pressing save and publish is changing what is actually saved there, and adding some "n"s…

Any ideas?

It’s wordpress 4.7.3 and I downloaded sydney from you today

Hello @kaspalita,

Please try to add CSS code in DashboardAppearanceCustomizeAdditional CSS.

Also you can add CSS code directly to style.css file of your child theme.

Please feel free to create a new topic if you have any other questions.

Kind Regards, Roman.

Hi there,
I am trying to restyle my blockquote in Sydney with this custom CSS in Dashboard → Appearance → Customize → Additional CSS:

/*
blockquote
*/
blockquote{
  display:block;
  background: #211f22;
  padding: 70px 30px 70px 30px;
  margin: 0 0 20px;
  position: relative;
  
  /*Font*/
  font-family: Times, serif;
  font-style: italic;
  font-size: 32px;
  line-height: 1.2;
  color: #fff;
  text-align: left;
  
  /*Borders - (Optional)*/
  border-left: 6px solid #81d8d0;
  border-right: 0px solid #81d8d0;
  
}

blockquote::before{
  content: "\201C"; /*Unicode for Left Double Quote*/
  
  /*Font*/
  font-family: Georgia, serif;
  font-size: 100px;
  font-weight: bold;
  color: #81d8d0;
  
  /*Positioning*/
  position: relative;
  left: 0px;
  top:5px;
}

blockquote::after{
  /*Reset to make sure*/
  content: "\201D";

/*Font*/
  font-family: Georgia, serif;
  font-size: 100px;
  font-weight: bold;
  color: #81d8d0;
  
  /*Positioning*/
  position: relative;
  right: 10px;
  bottom: -30px;
}

blockquote a{
  text-decoration: none;
  cursor: pointer;
  padding: 0 3px;
  color: #81d8d0;
}

blockquote a:hover{
 color: #a93339;
}

blockquote em{
  font-style: italic;
}

With page builder I designed this page as having one row with two columns.
Left column has two SiteOrigin widgets: 1) Editor (holds image and quote) and 2) Social Media buttons (I have tried to put image and quote in separate widgets, but the result is the same).
Right column holds Editor widget with text only.

My issue is that the blockquote seems to float on top of the other content and does not stay in the box.

Would love to hear your suggestions.

TYVM,
Eva

Hello Eva,

Please create a new topic for your issue in order to make it easier to help you.

Kind Regards, Roman.

Hey @roman

When I added the above CSS, it’s affecting my testimonial section on the homepage. How should I remove that?

Take a look at this pic.

Best
Shadab

Hello Shadab,

Please create a new topic for your issue to keep forum in good order and make it easier to help you (you can mention this topic link there). I will close this topic to avoid confusion.

Kind Regards, Roman.