News:

Wondering if this will always be free?  See why free is better.

Main Menu

Alternative quote styles for Curve (RC2)

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

Previous topic - Next topic
Print
Go Down Pages1 2 3 4
User actions

Antechinus

November 13, 2009, 07:15:24 AM Last Edit: November 13, 2009, 07:18:32 AM by 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:

Code Select
/* 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:

Code Select
/* 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:

Code Select
/* 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:

Code Select
/* 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

#1
November 13, 2009, 07:17:26 AM
Looks great from the screenshots. Good one, ant!

Tyrsson

#2
November 13, 2009, 07:31:59 AM
Like rockin duuuude :P
PM at your own risk, some I answer, if they are interesting, some I ignore.

MultiformeIngegno

#3
November 13, 2009, 08:03:45 AM
Thanks Antechinus!! 8)
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

#4
November 13, 2009, 08:40:45 AM
Awesome, Thank You Very Much Antechinus!  I love these quotes!!

Arantor

#5
November 13, 2009, 10:28:30 AM
Awesome, thanks Antechinus :)
Holder of controversial views, all of which my own.

Afro

#6
November 13, 2009, 10:56:40 AM Last Edit: November 13, 2009, 11:03:52 AM by Afro
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

#7
November 13, 2009, 11:02:17 AM
Nice work Antechinus 8)



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

SoLoGHoST

#8
November 13, 2009, 11:24:38 AM
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).

Arantor

#9
November 13, 2009, 11:26:41 AM
Holder of controversial views, all of which my own.

SoLoGHoST

#10
November 13, 2009, 11:31:13 AM
Cheers Arantor :)

butchs

#11
November 13, 2009, 11:51:53 AM Last Edit: November 13, 2009, 12:01:27 PM by butchs
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

#12
November 13, 2009, 11:54:39 AM
ok fixed. it was a bug in the rc2

Antechinus

#13
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. ;)

ford1001

#14
November 14, 2009, 01:20:26 AM
good work ant

Afro

#15
November 14, 2009, 04:36:31 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. ;)

lol, good then.

MultiformeIngegno

#16
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..?
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

#17
November 14, 2009, 10:04:02 AM
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

#18
November 14, 2009, 10:51:06 AM
Thanks Solo! ;)
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

#19
November 14, 2009, 02:12:30 PM
Good looking changes, code can be redone like quote also?
Print
Go Up Pages1 2 3 4
User actions
Advertisement: