Improve blockquote styling

I totally forgot about RTL when I did this. I will re-roll a patch with RTL done and the image sprite asap.

Hey guys, thanks for the feedback.

@kika - I really like your point. I do not enjoy using images in places I do not have to, when things are able to be done in CSS it's just better in my opinion. In #5, bleen makes a good point. If we are to go with a style that has a big single quote and the beginning, this would be selected with the text if we went the route of CSS. Which if we chose another style, like a before and after quote, the quotation marks being selected wouldn't be a bad thing.

Guess what, there is already some CSS in bartik's style.css for this (line 105-110), but, it doesn't seem that it's working as is. Pretty simple fix though to get it to "work". Just put some single quotes around the doubles like this, at least I think thats what this was going for?

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '""';
}

The thing I do not like about this code is that it applies the quotes to the outer part of the blockquote, not the content within it (see attached screenshot).

You are right kika, the quotation image is not all that good. Ok, it's pretty bad. I didn't really do a lot of thinking into what quote would go good there (probably should), but a single image is pretty easy to switch out. Do you have any suggestions for what font would be good for the quotation there?

I am going to keep working on this using a background image as the quote as stated in #2. Creating RTL style for it, finding a better quotation, and using a sprite. I do not have any grandious ideas about what should be done for this element, I just think it needs at least a little styling. Gives the theme a more polished feel.

Please share your thoughts/ideas. I have no real agenda here for what I think it should look like, I am willing to work on whatever idea the majority thinks is best. Feel free to share.

I have moved away from the big quotation and the beginning look, it just doesn't flow well with the rest of the design I think.

What about something really simple like this?

I agree with the italicizing the quotes. It makes it look more distinguished from the rest of the content. Here is a patch that builds on the look of #7 and has italics. It applies blockquote styling to LTR and RTL, and removes some lines that are not necessary with this look. See attached screenshot.

Thanks for the feedback bleen. I really think the rounded corners look better to, the reason I took them out was because of the extra amount of CSS it took to override the LTR borders in RTL. I didn't know if the would quite "kosher", but, CSS is pretty cheap as far as processing goes. Here is a patch that applies the borders for both LTR and RTL styles. It will be really nice when all browsers have a universal way of doing border radius, until then I guess we are stuck having to add in extra bits of CSS.

Thanks ao5357. Something like that could definitely work well, it really just depends on what we want it too have. But as stated in #5 and 6, a quotation mark at the beginning the the quote means that it will be selected along with the text, resulting in a single quotation mark at the beginning of the quote if the text it copied. Not the worst thing in the world, but kind of quirky.

I stand corrected! The quotes generated by CSS are selected with the rest of the content of the blockquote. Here is a patch inspired by the code in #13 that creates a pull quote look. See screenshot attached.

@ao5357 - Thanks for the idea. I really didn't like targeted the paragraph as there is always the chance that the elements inside it might not be within one. Don't know why I did not think about targeting :first-child.

Here is a re-rolled patch that makes the change suggested in #16.

@vako - None of this work is version specific, or theme specific. It is just CSS.