Alternative quote styles for Curve (RC2)

Started by Antechinus, November 13, 2009, 07:15:24 AM

Previous topic - Next topic

Antechinus

Since there was some disgruntlement about the default styling of quotes in Curve we have provided some alternatives.  ;D

Bloc was in favour of keeping rectangular quotes and I was in favour of having rounded corners on them. Some people preferred Bloc's idea and some people preferred mine. So, everyone gets a prize. I talked the devs into including the styling hooks in Subs.php so that anyone can choose which sort of quote they want. All it takes is some minor css adjustments, with a couple of images added if you want rounded corners (and want them to work in all browsers).

Details and screenshots follow. :)


First we have the code for Bloc's improved rectangular quotes. Css/index.css:
Find:

/* A quote, perhaps from another post. */
.quoteheader
{
color: #7a899c;
}
.codeheader, .quoteheader
{
font-size: 0.9em;
font-weight: bold;
padding-left: 5px;
}
blockquote, blockquote blockquote blockquote
{
font-size: 0.9em;
color: #000000;
line-height: 1.4em;
background: url(../images/theme/quote.png) 2px 2px no-repeat #D7DAEC;
border-top: solid 1px #000;
border-bottom: solid 1px #000;
padding: 1em 1em 1em 2em;
margin: 0.3em 0 0 0;
}
blockquote blockquote
{
background: #e7eAfC;
}

/* A code block - maybe even PHP ;). */
code
{
display: block;
font-family: "courier new", "times new roman", monospace;
font-size: x-small;
background: #eee;
border-top: solid 1px #000;
border-bottom: solid 1px #000;
line-height: 1.3em;
padding: 3px 1em;
overflow: auto;
white-space: pre;
/* Stop after about 24 lines, and just show a scrollbar. */
max-height: 24em;
}


Replace with:

/* A quote, perhaps from another post. */
.quoteheader
{
color: #7a899c;
font-style: italic;
}
.codeheader, .quoteheader
{
font-size: 0.9em;
font-weight: bold;
padding-left: 7px;
}
blockquote, blockquote blockquote blockquote
{
font-size: 0.9em;
color: #000000;
line-height: 1.4em;
background: url(../images/theme/quote.png) 100% 100% no-repeat #DDE3EC;
border-top: solid 4px #AAAABB;
border-bottom: solid 4px #AAAABB;
padding: 1em 1em 1em 2em;
margin: 0 0 0 0;
}
blockquote blockquote
{
background: url(../images/theme/quote.png) 100% 100% no-repeat #F7FAFF;
}

/* A code block - maybe even PHP ;). */
code
{
display: block;
font-family: "courier new", "times new roman", monospace;
font-size: x-small;
background: #eee;
border-top: solid 4px #AAAABB;
border-bottom: solid 4px #AAAABB;
line-height: 1.3em;
padding: 3px 1em;
overflow: auto;
white-space: pre;
/* Stop after about 24 lines, and just show a scrollbar. */
max-height: 24em;
}


The result will look like the first screenshot.


Now for the ones with curved corners. Yes, I know you can do them without images if you only want them in Firefox and Safari/Chrome but this method makes them work in all browsers.
Css/index.css:
Find:

/* A quote, perhaps from another post. */
.quoteheader
{
color: #7a899c;
}
.codeheader, .quoteheader
{
font-size: 0.9em;
font-weight: bold;
padding-left: 5px;
}
blockquote, blockquote blockquote blockquote
{
font-size: 0.9em;
color: #000000;
line-height: 1.4em;
background: url(../images/theme/quote.png) 2px 2px no-repeat #D7DAEC;
border-top: solid 1px #000;
border-bottom: solid 1px #000;
padding: 1em 1em 1em 2em;
margin: 0.3em 0 0 0;
}
blockquote blockquote
{
background: #e7eAfC;
}

/* A code block - maybe even PHP ;). */
code
{
display: block;
font-family: "courier new", "times new roman", monospace;
font-size: x-small;
background: #eee;
border-top: solid 1px #000;
border-bottom: solid 1px #000;
line-height: 1.3em;
padding: 3px 1em;
overflow: auto;
white-space: pre;
/* Stop after about 24 lines, and just show a scrollbar. */
max-height: 24em;
}


Replace with:

/* A quote, perhaps from another post. */
.codeheader, .quoteheader
{
font-size: 0.9em;
font-weight: bold;
padding-left: 20px;
}
.quoteheader, blockquote blockquote .quoteheader
{
color: #7a899c;
    background: url(../images/theme/quote_ends.png) 0 -100px no-repeat;
}
.topslice_quote, blockquote blockquote .topslice_quote
{
    background: url(../images/theme/quote_slices.png) 100% -100px no-repeat;
padding: 0.3em 0;
}
blockquote .quoteheader
{
color: #7a899c;
    background: url(../images/theme/quote_ends.png) 0 0 no-repeat;
}
blockquote .topslice_quote
{
    background: url(../images/theme/quote_slices.png) 100% 0 no-repeat;
}
blockquote, blockquote blockquote blockquote
{
font-size: 0.9em;
color: #000000;
line-height: 1.4em;
background: #FFFFFF;
border-left: 1px solid #DCE0F3;
border-right: 1px solid #DCE0F3;
padding: 0 1em 0 1.5em;
margin: 0 0 0 0;
}
blockquote blockquote
{
background: #F0F4F7;
border-left: 1px solid #D8DDF1;
border-right: 1px solid #D8DDF1;
}
.quotefooter, blockquote blockquote .quotefooter
{
    background: url(../images/theme/quote_ends.png) 0 100% no-repeat;
padding-left: 20px;
margin-bottom: -5px;
}
.botslice_quote, blockquote blockquote .botslice_quote
{
    height: 10px;
background: url(../images/theme/quote_slices.png) 100% 100% no-repeat;
}
blockquote .quotefooter
{
color: #7a899c;
    background: url(../images/theme/quote_ends.png) 0 -270px no-repeat;
padding-left: 20px;
}
blockquote .botslice_quote
{
    height: 10px;
background: url(../images/theme/quote_slices.png) 100% -230px no-repeat;
}
blockquote blockquote blockquote .quoteheader {display: none;}
blockquote blockquote blockquote blockquote {display: none;}
blockquote blockquote blockquote .quotefooter {display: none;}

/* A code block - maybe even PHP ;). */
code
{
display: block;
font-family: "courier new", "times new roman", monospace;
font-size: x-small;
background: #eee;
border-top: solid 4px #AAAABB;
border-bottom: solid 4px #AAAABB;
line-height: 1.3em;
padding: 3px 1em;
overflow: auto;
white-space: pre;
/* Stop after about 24 lines, and just show a scrollbar. */
max-height: 24em;
}


This will look like the second screenshot. You will need to copy the two attached images (quote_ends.png and quote_slices.png) to your default/images/theme folder.

Note that this uses the same styling for the code boxes as the first example. There is no point trying to put rounded corners on code boxes because they usually have scroll bars at the bottom and at the right, which makes them look silly if you try to add rounded corners. The code boxes are best kept simple IMO.

Enjoy.

Marcus Forsberg

Looks great from the screenshots. Good one, ant!

Tyrsson

PM at your own risk, some I answer, if they are interesting, some I ignore.

MultiformeIngegno

RockCiclopedia (wiki - forum), Tutta la storia del rock, scritta da voi ...
Rimanere aggiornati sul mondo della musica grazie al nuovo feed "RockCiclopedia Music News"!

SoLoGHoST

Awesome, Thank You Very Much Antechinus!  I love these quotes!!

Arantor


Afro

#6
nice one, but the signatures started to overlap

whats the fix ?

i am on rounded quotes

its ok on firefox and IE

just overlapping on chrome

Powerbob




My SMF 2.1 Beta test site; http://www.pplb.net/smf21/index.php

SoLoGHoST

Quote from: Afro on November 13, 2009, 10:56:40 AM
nice one, but the signatures started to overlap

whats the fix ?

i am on rounded quotes

its ok on firefox and IE

just overlapping on chrome

If you are referring to the pic here in Chrome, without this rounded quote installed...



This is a BUG in SMF RC2 in CHROME (not sure if they are aware of this).


SoLoGHoST


butchs

#11
Good stuff!   :)

I wonder if this can improve it?
I have been truly inspired by the SUGGESTIONS as I sit on my throne and contemplate the wisdom imposed upon me.

Afro


Antechinus

Well actually it is a bug in Safari/Chrome, not a bug in RC2. We are just stuck with compensating for it. ;)

ford1001


Afro

Quote from: Antechinus on November 13, 2009, 08:57:27 PM
Well actually it is a bug in Safari/Chrome, not a bug in RC2. We are just stuck with compensating for it. ;)

lol, good then.

MultiformeIngegno

Quote from: Antechinus on November 13, 2009, 08:57:27 PM
Well actually it is a bug in Safari/Chrome, not a bug in RC2. We are just stuck with compensating for it. ;)
Is there a temporary fix while waiting the next release..?
RockCiclopedia (wiki - forum), Tutta la storia del rock, scritta da voi ...
Rimanere aggiornati sul mondo della musica grazie al nuovo feed "RockCiclopedia Music News"!

SoLoGHoST

Quote from: lorenzone92 on November 14, 2009, 09:25:09 AM
Quote from: Antechinus on November 13, 2009, 08:57:27 PM
Well actually it is a bug in Safari/Chrome, not a bug in RC2. We are just stuck with compensating for it. ;)
Is there a temporary fix while waiting the next release..?
Arantor posted up a link earlier in the topic to another topic that has a few fixes for it.  Though this post worked best for me within that topic:  http://www.simplemachines.org/community/index.php?topic=347252.msg2353359#msg2353359

MultiformeIngegno

RockCiclopedia (wiki - forum), Tutta la storia del rock, scritta da voi ...
Rimanere aggiornati sul mondo della musica grazie al nuovo feed "RockCiclopedia Music News"!

Nolt

Good looking changes, code can be redone like quote also?

Advertisement: