It works!

Hi Andrew,

Thanks for the heads-up. I’m new to CSS. So far I’ve managed to write the following without crashing anything:

body .simplePullQuote
{
background-color:#FFFFCC;
min-width: 250px;
border:0;
float: left;
margin: 20px;
font-size: 1.2em;
font-style: italic;
}

However, I still have a few questions, and I wonder if you could help me.

1) Is there any way of targeting one specific Pull Quote, so as to have for instance one Pull Quote which aligns on the left, and one of the right (even on separate pages)?

2) How do you delete/change the default border (with the shadow) please? I’ve tried writing border:0; but got no results.

3) Do you have any suggestions on how to position the quotes outside the text area of the page, like they are e.g. on this page of the Guardian newspaper (see for example the quote by Marcus du Sautoy)?

I’d really appreciate some advice here!

Thanks

I can try, but while I’m comfortable with CSS I’m not an expert. And I’m certainly not a Simple Pull Quote expert.

First off, just for reference, here’s the full .simplePullQuote style (which is contained in the plugin itself). You’ll override it in your stylesheet:

.simplePullQuote {
  width: 200px;
  float: right;
  border-top: 3px #868686 solid;
  border-bottom: 3px #868686 solid;
  background: top left no-repeat url("../images/quote.png");
  text-indent: 10px;
  padding: 6px;
  margin: 10px 0 10px 10px;
  -webkit-box-shadow: 7px 7px 8px #818181;
  -moz-box-shadow: 7px 7px 8px #818181;
}

So, to change the border you would replace border-top and border-bottom in your own CSS. Specifically, you could use “border-top-style” and “border-bottom-style” to get rid of them:

body .simplePullQuote {
  border-top-style: none;
  border-bottom-style: none;
}

You could also change them, if you feel the urge, to whatever odd settings you like:

body .simplePullQuote {
  border-top: 2px dotted orange;
  border-bottom: 1px solid blue;
}

As for the quotes, you’ll notice that it’s done using an image (quote.png) that’s placed on the top left of the box. By playing with either the padding or the margin, you’ll be able to push that image a bit higher like in the Guardian piece.

Then you’ll want to add another quote image that will go on the bottom of your quote just like the Guardian. (You can’t just use quote.png again because you want a closing quote, not another opening quote.)

So use your image editor of choice and create a closing quote image called, say, “closequote.png.”

Remember I said I wasn’t perfect with CSS? You’ll have to play around with margins and padding to get it right, but I would start with something like this:

body .simplePullQuote {
  background: top left no-repeat url("../images/quote.png");
  background: bottom right no-repeat url("../images/closequote.png");
}

IMPORTANT: In my example, you’ll want to put this “closequote.png” image that you make in the same folder that Simple Pull Quotes has its quote.png image. You can put your image anywhere — just adjust the URL in the style.

That should let you have two images — one above your quote (quote.png) and one below it (closequote.png) just like the Guardian.

And you can go nuts, of course. You can create your own quote.png and closequote.png images from scratch and use those instead (just change the URL in the stylesheet). You can even look into messing with the opacity to have your quotes overlap and be partially transparent. ??

I hope this helps, and I hope if I’ve made a mistake someone comes in to correct me.

Oh, and as for your first question about different versions… I have no clue! That would involved playing with the plugin’s code itself.

Andrew,

I cannot thank you enough for your detailed reply – and you’ve replied so fast too! You have given me enough material to play with, and I will do so and, if the result is successful, I will share the resulting code on this board.

One more question, if I may: if you go back to that Guardian link, you will see that, depending on the size of the screen of the device you are using, and on the zoom ratio (e.g. 75%, or 125%, etc), the pull quote is either “outside” the main body of the article, in the white space on the left, OR (if you have increased the zoomed in too much), it is actually in the same area as the main body of the article, with the text of the main article wrapped around it. That I find a very sleek and responsive Pull Quote. In your opinion, is that responsiveness something that I can re-create with this plugin, or do does its depend instead on others settings specific to the Guardian website?

I understand that you may not know the answer to that… In any case, thank you very much again for your help earlier.

You’re welcome! I get the feeling that when it comes to learning CSS, I’m just a little bit ahead of you.

I know how the Guardian did it, but — because I don’t have a ton of time right now — I’m gonna teach you how to fish rather than actually give you the fish. ??

They are using media queries to make changes to the CSS depending on the browser-window size. So when the screen gets below a certain threshold (say, 800px), the pullquote goes from 200px wide to 100% wide.

First, media queries in 30 seconds.

This says, “if the browser window is at least 1024px wide, set the base font size to be 15px”:

@media all and (min-width: 1024) {
     html {font-size: 15px;}
}

And then this says, “if the window is between 700 and 1023px wide, make that base font only 14px”:

@media all and (min-width: 700px) and (max-width: 1023px) {
     html {font-size: 14px;}
}

You can take these “queries” to the extreme and completely change the CSS depending on the window size. For example:

@media all and (max-width: 699px) {
     h2 {color: purple;}
}

would turn all your h2s purple on small screens.

So the Guardian probably does something like this:

@media all and (max-width: 799px) {
     body .simplePullQuote {width: 100%;}
}

Which would force the quote to be the width of the screen as soon as the window got below 800px.

You can play around with those media queries and have your site do all sorts of things depending on screen size. I tend to do things like make some fonts smaller on smaller screens, and make things 100% wide at a certain point so they stack on top of each other, like the Guardian did.

I hope that helps!

By the way, I highly recommend adding this to all your stylesheets:

* { box-sizing: border-box; }

It makes your margins and padding work properly! You can read all about box sizing here: https://blog.teamtreehouse.com/box-sizing-secret-simple-css-layouts. I tell you, it made my life a lot easier!

Andrew,

apologies for the long delay in getting back to you. I cannot thank you enough for all the suggestions. I haven’t tried them yet, but as soon as I have some time, I will dive in and see how it goes!
Thank you again ??