Advertisement:

Author Topic: Alternative quote styles for Curve (RC2)  (Read 51295 times)

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Alternative quote styles for Curve (RC2)
« on: November 13, 2009, 07:15:24 AM »
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.
« Last Edit: November 13, 2009, 07:18:32 AM by Antechinus »

Offline Marcus Forsberg

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,608
  • Gender: Male
    • marcus.t.forsberg on Facebook
    • marcusforsberg on LinkedIn
    • @marcusforsberg on Twitter
    • marcusforsberg.net
Re: Alternative quote styles for Curve (RC2)
« Reply #1 on: November 13, 2009, 07:17:26 AM »
Looks great from the screenshots. Good one, ant!

Offline Joey Smithâ„¢

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 6,356
  • Gender: Male
Re: Alternative quote styles for Curve (RC2)
« Reply #2 on: November 13, 2009, 07:31:59 AM »
Like rockin duuuude :P

Offline MultiformeIngegno

  • Sophist Member
  • *****
  • Posts: 1,086
  • Gender: Male
  • Id quo maius cogitari nequit
    • RockCiclopedia
Re: Alternative quote styles for Curve (RC2)
« Reply #3 on: 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"!

Offline SoLoGHoST

  • SMF Hero
  • ******
  • Posts: 1,795
  • Gender: Male
  • Real coders do not need to comment their code!
    • Dream Portal
Re: Alternative quote styles for Curve (RC2)
« Reply #4 on: November 13, 2009, 08:40:45 AM »
Awesome, Thank You Very Much Antechinus!  I love these quotes!!

Offline Arantor

  • Resident Overthinker
  • SMF Friend
  • SMF Legend
  • *
  • Posts: 68,035
    • Arantor on GitHub
Re: Alternative quote styles for Curve (RC2)
« Reply #5 on: November 13, 2009, 10:28:30 AM »
Awesome, thanks Antechinus :)
To assume is to hope that those who came before had the presence of mind and capacity to implement the dreams of those who would come after.

You either die a hero or live long enough to see yourself become the villain. It seems you have chosen which, and now I must do the same.

Offline Afro

  • SMF Hero
  • ******
  • Posts: 1,855
  • Gender: Male
  • http://twitter.com/afrowall
    • Global Runs
Re: Alternative quote styles for Curve (RC2)
« Reply #6 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
« Last Edit: November 13, 2009, 11:03:52 AM by Afro »

Offline Powerbob

  • Full Member
  • ***
  • Posts: 673
  • Gender: Male
Re: Alternative quote styles for Curve (RC2)
« Reply #7 on: 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

Offline SoLoGHoST

  • SMF Hero
  • ******
  • Posts: 1,795
  • Gender: Male
  • Real coders do not need to comment their code!
    • Dream Portal
Re: Alternative quote styles for Curve (RC2)
« Reply #8 on: November 13, 2009, 11:24:38 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).

Offline Arantor

  • Resident Overthinker
  • SMF Friend
  • SMF Legend
  • *
  • Posts: 68,035
    • Arantor on GitHub
To assume is to hope that those who came before had the presence of mind and capacity to implement the dreams of those who would come after.

You either die a hero or live long enough to see yourself become the villain. It seems you have chosen which, and now I must do the same.

Offline SoLoGHoST

  • SMF Hero
  • ******
  • Posts: 1,795
  • Gender: Male
  • Real coders do not need to comment their code!
    • Dream Portal
Re: Alternative quote styles for Curve (RC2)
« Reply #10 on: November 13, 2009, 11:31:13 AM »
Cheers Arantor :)

Offline butchs

  • SMF Hero
  • ******
  • Posts: 1,712
  • Lost 7GB bandwidth!
    • EastCoastRollingThunder
Re: Alternative quote styles for Curve (RC2)
« Reply #11 on: November 13, 2009, 11:51:53 AM »
Good stuff!   :)

I wonder if this can improve it?
« Last Edit: November 13, 2009, 12:01:27 PM by butchs »
I have been truly inspired by the SUGGESTIONS as I sit on my throne and contemplate the wisdom imposed upon me.

Offline Afro

  • SMF Hero
  • ******
  • Posts: 1,855
  • Gender: Male
  • http://twitter.com/afrowall
    • Global Runs
Re: Alternative quote styles for Curve (RC2)
« Reply #12 on: November 13, 2009, 11:54:39 AM »
ok fixed. it was a bug in the rc2

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Alternative quote styles for Curve (RC2)
« Reply #13 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. ;)

Offline ford1001

  • Jr. Member
  • **
  • Posts: 272
  • Gender: Male
  • Community Support Helper
    • Respawn Gamers
Re: Alternative quote styles for Curve (RC2)
« Reply #14 on: November 14, 2009, 01:20:26 AM »
good work ant

Offline Afro

  • SMF Hero
  • ******
  • Posts: 1,855
  • Gender: Male
  • http://twitter.com/afrowall
    • Global Runs
Re: Alternative quote styles for Curve (RC2)
« Reply #15 on: November 14, 2009, 04:36:31 AM »
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.

Offline MultiformeIngegno

  • Sophist Member
  • *****
  • Posts: 1,086
  • Gender: Male
  • Id quo maius cogitari nequit
    • RockCiclopedia
Re: Alternative quote styles for Curve (RC2)
« Reply #16 on: November 14, 2009, 09:25:09 AM »
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"!

Offline SoLoGHoST

  • SMF Hero
  • ******
  • Posts: 1,795
  • Gender: Male
  • Real coders do not need to comment their code!
    • Dream Portal
Re: Alternative quote styles for Curve (RC2)
« Reply #17 on: November 14, 2009, 10:04:02 AM »
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

Offline MultiformeIngegno

  • Sophist Member
  • *****
  • Posts: 1,086
  • Gender: Male
  • Id quo maius cogitari nequit
    • RockCiclopedia
Re: Alternative quote styles for Curve (RC2)
« Reply #18 on: 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"!

Offline Nolt

  • Language Moderator
  • Full Member
  • *
  • Posts: 485
  • Gender: Male
  • /dev/null
    • smfpolska on Facebook
    • Wizzi
Re: Alternative quote styles for Curve (RC2)
« Reply #19 on: November 14, 2009, 02:12:30 PM »
Good looking changes, code can be redone like quote also?