I was playing around with quote block styling and figured out how to add font awesome as a pseudo. I'd imagine this is obvious to you css masters but figured I'd share.
div[class^="quoteheader"]:before, div[class^="quoteheader"]:after {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
color: #e2e2e2;
font-size: 1.5em;
} That applys the FontAwesome font to the before and after pseduo's on classes that start with quoteheader
.quoteheader::before {
content: "\f10e";
float: right;
transform: rotate(-30deg);
}
.quoteheader::after {
content: "\f10d\00a0\00a0";
float:right;
transform: rotate(-30deg);
}Thats just a demo, it adds the right and left quote symbols and rotates them as an example of things you can do.
Quality work
@Spuds . :thumbsup:
That's awesome :D I love the amount of stuff that's possible with icon fonts.
I overhauled the quote display entirely, using the HTML5 <cite> tag, although that required alterations to Subs.php unfortunately :(
(http://i.imgur.com/Q5hajpV.png)
Why? You should be able to do it with hooks on BBC.
That would be great. How can I go about doing that? Is there documented list of hooks anywhere?
Unfortunately the hooks documentation is still something to do... and is a pain of a problem. :'(
After reading this I decided to post a quick and very dirty grep of the (to be) 1.0.2 code:
http://www.elkarte.net/community/index.php?topic=2192.0
That said, in order to change a bbcode, you have anyway to rely on a trick...
You can use the integrate_pre_parsebbc hook, and loop through all the bbcodes looking for the quote tag (or maybe use array_filter with a callback), remove both and then add yours.
You can see the trick in action in the fancybox addon, I just do a loop on the BBC codes and change the actions of the one I want, in that case how IMG tags are rendered.