Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
prolost

How can I change the appearance of blockquotes?

Question

I'm trying to change the appearance of my blockquotes. I'm using this CSS:


blockquote {
   width: 90%;
   border-color: #ef420d;
   border-width: 5px 5px 5px 5px;
   border-style: solid solid solid solid;
   padding: 5px 5px 5px 5px;
   background-color: #eee;
}

But only the width: 90% line is having any effect. The rest of the blockquote appearance is unchanged. What am I doing wrong?

Edited by edokken

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 5

I've had some blockquote issues using different templates. Some seem to need the !important tag. Try adding it after each line like this and see if it does the trick.


blockquote {
   width: 90% !important;
   border-color: #ef420d !important;
   border-width: 5px 5px 5px 5px !important;
   border-style: solid solid solid solid !important;
   padding: 5px 5px 5px 5px !important;
   background-color: #eee !important;
}


Squarespace Designer / Developer over @ Hop Creative.

Share this post


Link to post
  • 1

Here is my CSS for my personal site. Hopefully, you can manage to swap in what you want.


.quote-block .quote {
background-color: #f5f5f5;
padding: 30px 20px 30px 55px;
font-family: Georgia, serif;
font-size: 14px;
letter-spacing: 1px;
font-style: italic; 

blockquote {
   margin: 0 30px;
}

span {
   display: block;
   font-size: 64px;
   margin-left: -55px;
   margin-bottom: -45px;
   padding-top: 20px;

   &:last-child { display: none; }

}

}

.quote-block .source {
   background-color: #eee;
   color: #4cb982;
   padding: 5px 20px;
   font-style: italic;
}



Edited by Nick Scola

Squarespace developer since 2007.

I create a professional process for each client to ensure that your objectives are met and users are happy. Something I love to embrace.

I'm available for hire

Get in touch at http://www.nickscola.com or via email at squaretuts@gmail.com

Share this post


Link to post
  • 0

Can someone here tell me what CSS to use to just change the font color of the quote block? I am using the Marquee Template and it wont let me adjust the color in the style editor. I'd really appreciate it, thanks

Share this post


Link to post
  • 0

is this code all you have to insert to the header? In my case (montauk template) it does not do anything and the "span" and "blockquote" lines are even considered errors (shown in red)...

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...