[tatami]

Thanks, Ginger, for your help and for your encouragement. I think I've done as you suggested but it seems to make no difference, Here's the code I'm using.

blockquote {
margin: 40px 40px 24px;
display: inline-block;
}

blockquote,
blockquote::before,
blockquote::after {
color: #999
}

blockquote::before {
content: "\201C";
font-size: 30px;
height: 0;
position: relative;
float:left;
top: -20px;
left: -20px;

}

blockquote::after {
content: "\201D";
font-size: 30px;
height: 0;
position: relative;
float: right;
top: -40px;
right: -10px;

}

Can you spot my undeliberate mistake?

Best wishes

Philip

[tatami]

Ginger

I couldn't resist updating my style.css file with the code you suggested. It does indeed put smart quotes at the end of each quotation, just as I wanted. There is one unintended consequence, though, which is bugging me, For some reason I can't fathom, it indents the first two lines of the quote. As an experiment, I enlarged the quote mark font size from 30pt to 60pt and that resulted in indenting the first four lines. Have you any idea what's going on here and how to correct it?

http://aenigma-images.com/2015/07/quite-a-trooper/

Thanks again

Philip

[tatami]

Ginger

I'd pretty much given up hope of getting help on this so it's a lovely surprise that you've taken the time to offer me some advice. This looks terrifically helpful and I'll certainly have a go at following what you've suggested. I'm on holiday right now and I'm going to wait until I get back home to make changes. I'll let you know how I get on. In the meanwhile, THANK YOU 🙂

Philip

[tatami]

Marcy, for some reason, it seems necessary to retain the border: none !important lines in the code. But I'm not worried about that because the final line of code you've suggested has got me to where I want to be. I'm really, really grateful for your help and I wish there was some way in which I could reciprocate. Thank you so much.

[tatami]

Marcy, you've solved it for me except that the mouseover state shows a black border. I tried this:

.su-button span:hover {
background: #28ac86; !important;
border: none !important;
}

But the black border persists. Is there a way of getting rid of it?

I hope I'm not pushing my luck by being so persistent! And thanks again.

[tatami]

Thanks for getting back to me, Marcy.

So the code I now have looks like this:

.su-button span:hover {
background: #28ac86; !important;
text-transform: none !important;
font-family: Oswald, Arial, sans-serif !important;
font-size: 13px;
font-weight:normal;
text-align:center;
background-color: transparent;
border: none !important;
}

Unfortunately it doesn't quite solve things. While the mouseover font is correct, the steady state font is Palatino. And the mouseover is not picking up the green of my theme. Do you have any more suggestions? Thanks again.

[tatami]

Marcy, thank you so much for your suggestions. Both code snippets work and provide a big improvement over what I had originally, except that the button font has reverted to Palatino instead of Oswald.

Tom, you're right that I'm getting a border when I mouseover the back button. I'd love to get this just right but I'm afraid I'll need you to give me step-by-step instructions for how to do that. Could I persuade you to? I'd really appreciate your help here.

[tatami]

Tom, thanks for taking an interest. As you can see, I have little experience of coding so I used a button from Shortcode Ultimate and messed around with it until it approximated to what I was looking for.

This is the shortcode:

[su_button background="#0b0c0b" size="3" radius="0" Back]Back[/su_button]

And this is what it references:

.su-button span {
text-transform: none !important;
font-family: Oswald, Arial, sans-serif;
font-size: 13px;
font-weight:bold;
text-align:center;
background-color: transparent;
}

The result is not great, though, and if you could help me get it right I'd be really grateful.

[tatami]

Marcy, thanks for noticing. I've resolved it to an extent but not entirely. What I'd really like to do is style the button so the roll-over color of button matches my theme – i.e. it looks and works like the other buttons on my website. Can you help with that?

[tatami]

Tom, that's really helpful and has solved my problem. Very many thanks.

[Author]

Posts