Andrew

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!

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.

Thank you — this is exactly what I needed. The error was driving me nuts!

[confused] But it’s the paid version that didn’t work.

Did you mean I should switch to the free version for now? And any idea how long before these fixes roll out?

Super, and thanks! I tested it and it worked (yay!), but now it’s asking for my license key again, and it won’t accept it — so I can only send plain text. Any ideas?

Update, in case it helps:

I tried using the {TABLE} code, and I get the same thing — nothing. {TITLETEXT} doesn’t work either (which may be because this is a digest).

Some shortcodes do work: If I use “{COUNT} new posts” it does say “1 new posts.” And using {POST} gives me the excerpt from my latest post.

I’m at a loss. Help!

Thank you again! I do have one more very quick question, if you’re willing:

Is there a way to adjust the thresholds for the different ranks? For example, to say that only 100% correct answers gets you a rank of 1, 75-99% gets you a rank of 2, etc.?

Thanks SO much!

HAHA! It was the wp_footer()!

W00t! Thank you thank you thank you!

Honest and for true, it’s activated. Ditto that the shortcode is there. But now I’ll check that wp_footer(); is in place….

You want the code for the entire page? (Well, post?) Okey doke:
https://pastebin.com/4tS5P8gr

Here’s something interesting: I have several domains and several site hosted in the same place, off of the same account — meaning the directory structure is the same as the one I’m having trouble with.

Just for fun, I tried SlickQuiz on another site and it worked perfectly.

In other words, the site that’s having a problem has a path like

/public_html/varbuzz/wp-content…

while the site where SlickQuiz is working has a path of

/public_html/varwow.com/wp-content…

So it doesn’t look like it would be a problem with absolute or relative paths. (Then again, I’m no coder.) So I’m thinking maybe it’s a conflict with another plugin. Trouble is, we have a lot, so before I start disabling them I’d like to get an idea of which ones (or which kinds) are likely to cause a problem.

Thanks for your help with this!

Hey there! I’m having the same problem. The quiz consists of the name (with the apostrophes being escaped out for some reason — Andrew\’s Test Quiz) and

Get Started
Your Score:

Your Ranking:

The words “Get Started” have the styling of a link (underline appears on hover, for example), but they’re not actually a link. Also, there’s no neat background image for the button.

I tried uploading the version you linked to above, as well as the one that installs with “Add New” (in case there was a difference). No joy.

Any ideas? I’m using the latest WP, and I’m happy to give whatever details you need!

I’m not clear about that. I’ve got two channels “coming in” to External Videos, and I’d like to be able to decide which of those channels to display in a given location.

Is there a shortcode for this? For example, let’s say I get videos from “johnsmith” and “johndoe.” I may have a box on my site “Videos from John Smith” where I only want to show that channel, and a different place I want to show John Doe’s vids.

I’m imagining something like [external-videos author=”johnsmith”] in one spot and [external-videos author=”johndoe”] in another.

Does that make sense? ??

Ha! Never mind — figured it out. My fault (as expected).

Hey, Otto — I’ve got a slightly different problem. My posts appear on Facebook, but when someone comments there, all that appears on my blog is “So-and-so says:” with a blank text area.

In other words, it’s correctly pulling in the name of the commenter, but not the text of the comment itself.

This is happening on the single post page, and the only code in my theme is the basic comments_template();.

Any ideas? (If you need more info, let me know — and thanks!)

Ditto — same question here. I want create links that say something like “Add new post to Whatever category” and “Add new post to This&That category.”

Any way to do that?