Simple Machines Community Forum

Customizing SMF => Tips and Tricks => Topic started by: Antechinus on November 13, 2009, 07:15:24 AM

Title: Alternative quote styles for Curve (RC2)
Post by: Antechinus 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.
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Marcus Forsberg on November 13, 2009, 07:17:26 AM
Looks great from the screenshots. Good one, ant!
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Joey Smith™ on November 13, 2009, 07:31:59 AM
Like rockin duuuude :P
Title: Re: Alternative quote styles for Curve (RC2)
Post by: MultiformeIngegno on November 13, 2009, 08:03:45 AM
Thanks Antechinus!! 8)
Title: Re: Alternative quote styles for Curve (RC2)
Post by: SoLoGHoST on November 13, 2009, 08:40:45 AM
Awesome, Thank You Very Much Antechinus!  I love these quotes!!
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Arantor on November 13, 2009, 10:28:30 AM
Awesome, thanks Antechinus :)
Title: Re: Alternative quote styles for Curve (RC2)
Post by: 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
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Powerbob on November 13, 2009, 11:02:17 AM
Nice work Antechinus 8)
Title: Re: Alternative quote styles for Curve (RC2)
Post by: SoLoGHoST 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...

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Facs.graphicsmayhem.com%2Fimages%2FSMFRC2_BUGinCHROME.png&hash=cac9ee2c0610ffeb4b08195bf93e12fe) (http://acs.graphicsmayhem.com/images/SMFRC2_BUGinCHROME.png)

This is a BUG in SMF RC2 in CHROME (not sure if they are aware of this).
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Arantor on November 13, 2009, 11:26:41 AM
Please see http://www.simplemachines.org/community/index.php?topic=347252.0
Title: Re: Alternative quote styles for Curve (RC2)
Post by: SoLoGHoST on November 13, 2009, 11:31:13 AM
Cheers Arantor :)
Title: Re: Alternative quote styles for Curve (RC2)
Post by: butchs on November 13, 2009, 11:51:53 AM
Good stuff!   :)

I wonder if this (http://www.simplemachines.org/community/index.php?topic=20208.0) can improve it?
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Afro on November 13, 2009, 11:54:39 AM
ok fixed. it was a bug in the rc2
Title: Re: Alternative quote styles for Curve (RC2)
Post by: 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. ;)
Title: Re: Alternative quote styles for Curve (RC2)
Post by: ford1001 on November 14, 2009, 01:20:26 AM
good work ant
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Afro 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.
Title: Re: Alternative quote styles for Curve (RC2)
Post by: MultiformeIngegno 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..?
Title: Re: Alternative quote styles for Curve (RC2)
Post by: SoLoGHoST 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
Title: Re: Alternative quote styles for Curve (RC2)
Post by: MultiformeIngegno on November 14, 2009, 10:51:06 AM
Thanks Solo! ;)
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Nolt on November 14, 2009, 02:12:30 PM
Good looking changes, code can be redone like quote also?
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Antechinus on November 14, 2009, 07:57:03 PM
Code blocks could be done like that but with them usually having scroll bars they don't look nearly as smooth with the rounded corners. The scroll bars break the look, if you see what I mean. If you really want to try it with code blocks it is not hard to do but you will need to make some small edits to Subs.php.
Title: Re: Alternative quote styles for Curve (RC2)
Post by: MultiformeIngegno on November 14, 2009, 08:17:32 PM
I think that the font used for code is too small! Isn't it?
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Antechinus on November 14, 2009, 08:31:12 PM
I think so too. I have no idea why it is specified as Times New Roman either, since unless you went for something like Bleeding Cowboys it would be difficult to choose a less legible font at that scale. My preference would be to have it set to 0.9em Verdana for clarity. I'll try and push that one through for the next build as I think it makes sense.
Title: Re: Alternative quote styles for Curve (RC2)
Post by: MultiformeIngegno on November 14, 2009, 08:34:53 PM
Yeah I think 0.9em Verdana would be really better!
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Arantor on November 14, 2009, 09:03:21 PM
Times New Roman? I thought code blocks were Courier.

Reason that's the choice is to have it mono-spaced as code is often more readable that way.
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Antechinus on November 14, 2009, 09:06:21 PM
Well Times is the second choice. "courier new", "times new roman", monospace;

Monospace being the main thing I suppose, but there are better monospace fonts around.
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Shotster on November 14, 2009, 09:31:23 PM
Details and screenshots follow.

I don't see any screenshots. Should they appear inline in the message, or do I have to click a link or icon or something? I must be overlooking something obvious.

-Steve ???
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Arantor on November 14, 2009, 09:32:12 PM
There are screenshots in the attachments at the foot of the post.
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Shotster on November 14, 2009, 10:15:29 PM
There are screenshots in the attachments at the foot of the post.

Not in Safari 4 on Mac. I found them hanging off to the right side at the top of the post when I enlarged my window!  It's apparently a browser-specific flake-a-delic layout issue.  :( See below...

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fwww.adeptool.com%2Fgrabs%2Fsmfscreenshots.jpg&hash=08cd14b632a77d2153fcec1c339e65f6)

-Steve
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Antechinus on November 14, 2009, 10:20:22 PM
Yes we know about that. Safari has bugs when trying to deal with fluid css-based layouts. Give Apple some stick about it and they may get around to fixing it (which would save us having to hack our code to deal with their mistakes).
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Arantor on November 14, 2009, 10:21:05 PM
Ah, yes, THAT problem. It is specific to Webkit - so Safari and Chrome have it. Seems to be some debate whether it's an SMF bug or a Webkit bug, with the latter not adhering to the standards correctly.

I use Chrome but the reason it works as intended for me is because I have the inline modify because I'm a moderator.
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Crip on November 17, 2009, 07:33:12 PM
Cool Antech.
Title: Re: Alternative quote styles for Curve (RC2)
Post by: MyMuK on November 26, 2009, 07:04:30 AM
in search results this mod looks not correctly.
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Antechinus on November 26, 2009, 03:49:31 PM
Search results page is getting changed. ;)
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Massl on December 06, 2009, 06:58:38 AM
Very beautiful the  "rounded_quotes",  I think that should be included in the official theme !!
Title: Re: Alternative quote styles for Curve (RC2)
Post by: MyMuK on January 04, 2010, 08:10:01 AM
what about serch results ?
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Antechinus on January 04, 2010, 08:18:43 AM
Search results page is completely different for RC3.
Title: Re: Alternative quote styles for Curve (RC2)
Post by: ~DS~ on January 06, 2010, 03:23:51 PM
Very beautiful the  "rounded_quotes",  I think that should be included in the official theme !!
Agreed, just did this. It should be in the official RC3
Title: Re: Alternative quote styles for Curve (RC2)
Post by: SoLoGHoST on January 06, 2010, 04:21:49 PM
We all feel this way Dismal Shadow.  This is amazing work by Antechinus.  But whether they will decide to use it or not remains unknown :(
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Arantor on January 06, 2010, 04:24:06 PM
I get the feeling it won't be in RC3 however it's easy to add if you want it.
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Antechinus on January 06, 2010, 05:14:22 PM
Yup. Opinion seemed to be split half and half on preference for my quotes or Bloc's quotes so we went with the simplest for default. Changing it is easy if you want to.

ETA: Well actually we changed it a little bit for RC3. I'll give you a bit of a sneak preview. This is how the default quotes and code will look in future. Note that the font for code is not that horrible old Courier New or Times New Roman any more. :D
Title: Re: Alternative quote styles for Curve (RC2)
Post by: SoLoGHoST on January 06, 2010, 05:49:20 PM
Quote from: SoLoGHoST
Yup. Opinion seemed to be split half and half on preference for my quotes or Bloc's quotes so we went with the simplest for default. Changing it is easy if you want to.

ETA: Well actually we changed it a little bit for RC3. I'll give you a bit of a sneak preview. This is how the default quotes and code will look in future. Note that the font for code is not that horrible old Courier New or Times New Roman any more. :D
Well, atleast it's a bit better than what it is like now.

EDIT:  Not sure I agree with the message being on top of the quote inside of the outer quote though.  I almost feel that the message should remain under the quote, as it makes more sense to me that way as it is in here.  Just my opinion though...
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Antechinus on January 06, 2010, 05:56:08 PM
Well really there are umpteen ways you can style them. With most browsers these days, apart from the abysmally primitive one, starting to support quite a range of CSS3 tricks you have all sorts of options. I quite like the new default style for what it is. Whether I would use square or rounded quotes would depend on the theme.
Title: Re: Alternative quote styles for Curve (RC2)
Post by: LC on January 06, 2010, 06:00:25 PM
I like the second screenshot, it looks nice. But I kinda like the big quotation mark in the beginning of the quote style. It gives it a little bit of character.

Note that message is for the OP. :P
Title: Re: Alternative quote styles for Curve (RC2)
Post by: TurtleKicker on January 06, 2010, 11:39:31 PM
ETA: Well actually we changed it a little bit for RC3. I'll give you a bit of a sneak preview. This is how the default quotes and code will look in future. Note that the font for code is not that horrible old Courier New or Times New Roman any more. :D

You're still using the wrong quote, though. Since it's in the beginning, it should be the opening quote, not a closing quote.

Visually, it's very confusing and makes no sense. I'd like to see SMF hold to a higher level of polish than to let such obvious things slip through (especially when they've been pointed out so many times now and would be trivial to fix). ;)
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Antechinus on January 07, 2010, 01:30:39 AM
Oh it has been changed to the the way around. That was just my initial trial screenshot from my local site when I was running it past the team. I agree the old quote image looks silly so I made a new one before committing the changes to svn. ;)
Title: Re: Alternative quote styles for Curve (RC2)
Post by: ~DS~ on March 12, 2010, 01:44:43 AM
I noticed the codes are now different in RC3. 
I hope this trick still works.
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Antechinus on March 12, 2010, 02:10:52 AM
It will need some adjustments to the css (changed class names, etc) but basically it should still work.
Title: Re: Alternative quote styles for Curve (RC2)
Post by: ~DS~ on March 12, 2010, 02:17:28 AM
It will need some adjustments to the css (changed class names, etc) but basically it should still work.
So it's just names? I can search using the code that way, no?
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Makar on March 12, 2010, 03:00:17 AM
Antechinus,   I used your code and arrange it in a mod
fixed mapping in RC3
you will not be against it?


 can not attach a file


Code: [Select]

<?xml version="1.0"?>
<!DOCTYPE package-info SYSTEM "http://www.simplemachines.org/xml/package-info">
<package-info xmlns="http://www.simplemachines.org/xml/package-info" xmlns:smf="http://www.simplemachines.org/">
<id>grafitus:Nise_Quotes_Antechinus</id>
<name>Nise Quotes</name>
<version>1.0</version>
<type>modification</type>
<install for="2.0 RC2, 2.0 RC3">
<readme type="inline">This will install Nise Quotes for SMF 2.0.  Thank you for graphics, and code Antechinus http://www.simplemachines.org/community/index.php?topic=347845.0 .</readme>
<modification>install_RC_3.xml</modification>
<require-file name="quote_ends.png" destination="$imagesdir/theme" />
<require-file name="quote_slices.png" destination="$imagesdir/theme" />
</install>
<uninstall for="2.0 RC2, 2.0 RC3">
<readme type="inline">This will install Nise Quotes for SMF 2.0.  Thank you for graphics, and code Antechinus http://www.simplemachines.org/community/index.php?topic=347845.0 </readme>
<modification reverse="true">install_RC_3.xml</modification>
<remove-file name="$imagesdir/theme/quote_ends.png" />
<remove-file name="$imagesdir/theme/quote_slices.png" />
</uninstall>
</package-info>


Code: [Select]

<?xml version="1.0"?>
<!DOCTYPE modification SYSTEM "http://www.simplemachines.org/xml/modification">
<modification xmlns="http://www.simplemachines.org/xml/modification" xmlns:smf="http://www.simplemachines.org/">
<id>grafitus:Nise_Quotes</id>
<version>1.0</version>
<file name="$themedir/css/index.css">
<operation>
<search position="replace"><![CDATA[/* A quote, perhaps from another post. */
blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote
{
font-size: x-small;
color: #000;
line-height: 1.4em;
background: url(../images/theme/quote.png) 0.1em 0.1em no-repeat;
border-top: 2px solid #99A;
border-bottom: 2px solid #99A;
padding: 1.1em 1.4em;
margin: 0.1em 0 0.3em 0;
overflow: auto;
}

/* Alterate blockquote stylings */
blockquote.bbc_standard_quote
{
background-color: #d7daec;
}
blockquote.bbc_alternate_quote
{
background-color: #e7eafc;
}

/* A code block - maybe PHP ;). */
code.bbc_code
{
display: block;
font-family: "dejavu sans mono", "monaco", "lucida console", "courier new", monospace;
font-size: x-small;
background: #eef;
border-top: 2px solid #999;
border-bottom: 2px solid #999;
line-height: 1.5em;
padding: 3px 1em;
overflow: auto;
white-space: pre;
/* Show a scrollbar after about 24 lines. */
max-height: 24em;
}
]]></search>
<add><![CDATA[/* 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.0em 0.5em;
}
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;
} ]]></add>
</operation>
</file>

<file name="$themedir/css/index.css">
<operation>
<search position="replace"><![CDATA[/* The "Quote:" and "Code:" header parts... */
.codeheader, .quoteheader
{
color: #666;
font-size: x-small;
font-weight: bold;
padding: 0 0.3em;
}]]></search>
<add><![CDATA[/* The "Quote:" and "Code:" header parts... */
.codeheader, .quoteheader
{
color: #666;
font-size: x-small;
font-weight: bold;
padding: 5 0.0em;
}]]></add>
</operation>
</file>



</modification>




sorry for my English
Title: Re: Alternative quote styles for Curve (RC2)
Post by: ~DS~ on March 12, 2010, 03:06:39 AM
Which quote is it?
The second quote style?
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Makar on March 12, 2010, 03:25:41 AM
fixed

link http://www.simplemachines.ru/index.php?topic=10006.msg68472#msg68472

attached mod and screenshot
Title: Re: Alternative quote styles for Curve (RC2)
Post by: †MavN† on March 12, 2010, 04:14:56 AM
fixed

link http://www.simplemachines.ru/index.php?topic=10006.msg68472#msg68472

attached mod and screenshot
mod and screenshot will not shown to guest.
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Makar on March 12, 2010, 04:39:38 AM
†MavN† ,  attach these files here

I do not have rights to add attachments
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Arantor on March 12, 2010, 04:42:13 AM
You can't attach files to topics in this board (just as you can't normally start topics in this board). You may have to start a new topic in Coding Discussion.
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Am' on March 12, 2010, 06:48:06 AM
check this :

http://www.simplemachines.org/community/index.php?topic=366792.msg2535632#msg2535632

new light alternative for quote and code style of curve
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Antechinus on March 12, 2010, 06:13:20 PM
Antechinus,   I used your code and arrange it in a mod
fixed mapping in RC3
you will not be against it?


 can not attach a file


sorry for my English

Go for it. I don't mind at all, as long as your mod is cleanly coded and installs without errors. I'll just code anything I like for my own use anyway, but I realise other people may need a mod to make things easy for them. :)
Title: Re: Alternative quote styles for Curve (RC2)
Post by: ~DS~ on March 13, 2010, 07:51:53 PM
For RC3


Open index.css and find:
Code: [Select]
/* Alterate blockquote stylings */
blockquote.bbc_standard_quote
{
background-color: #d7daec;
}
blockquote.bbc_alternate_quote
{
background-color: #e7eafc;
}

/* A code block - maybe PHP ;). */
code.bbc_code
{
display: block;
font-family: "dejavu sans mono", "monaco", "lucida console", "courier new", monospace;
font-size: x-small;
background: #eef;
border-top: 2px solid #999;
border-bottom: 2px solid #999;
line-height: 1.5em;
padding: 3px 1em;
overflow: auto;
white-space: pre;
/* Show a scrollbar after about 24 lines. */
max-height: 24em;
}

/* The "Quote:" and "Code:" header parts... */
.codeheader, .quoteheader
{
color: #666;
font-size: x-small;
font-weight: bold;
padding: 0 0.3em;
}

Replace it 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.0em 0.5em;
}
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;
}
/* The "Quote:" and "Code:" header parts... */
.codeheader, .quoteheader
{
   color: #666;
   font-size: x-small;
   font-weight: bold;
   padding: 5 0.0em;
}


http://www.empireofthesun.net/forum/index.php?topic=6090.0
Title: Re: Alternative quote styles for Curve (RC2)
Post by: .ABM. on June 02, 2010, 07:45:18 PM
I want to version 1.1.11
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Masterd on June 03, 2010, 06:37:44 AM
Can this work with Inferno theme?
Title: Re: Alternative quote styles for Curve (RC2)
Post by: .ABM. on June 04, 2010, 01:42:05 PM
I want to version 1.1.11
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Antechinus on June 04, 2010, 06:39:08 PM
Try it then. You'll need to edit Subs.php as well as the css. Take a look at how it's done in 2.0. :)
Title: Re: Alternative quote styles for Curve (RC2)
Post by: .ABM. on June 08, 2010, 08:45:28 AM
Try it then. You'll need to edit Subs.php as well as the css. Take a look at how it's done in 2.0. :)

Version 1.1.11

http://www.simplemachines.org/community/index.php?topic=384610.0
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Antechinus on June 08, 2010, 09:09:59 AM
Must throw Babel Fish at that sometime. ;)
Title: Re: Alternative quote styles for Curve (RC2)
Post by: .ABM. on June 08, 2010, 09:12:49 AM
Must throw Babel Fish at that sometime. ;)

babel fish?  :-X
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Antechinus on June 08, 2010, 09:21:43 AM
ROFL. Babel Fish is hilarious.
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Masterd on June 20, 2010, 06:12:18 AM
I tried Curved quotes on SMF 2.0 RC3 and I have a little problem. Look at the screenshot. One more thing. How can I remove this slide bar on right?

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimg28.imageshack.us%2Fimg28%2F9311%2Fproblemyo.png&hash=9aa686587987db33f0838c4aee338736)
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Masterd on June 21, 2010, 05:14:32 AM
Anyone? Sorry for the double post, but I really need this. Please...
Title: Re: Alternative quote styles for Curve (RC2)
Post by: lucas-ruroken on June 22, 2010, 01:41:04 AM
Omg, i don't see that.

Is beautiful ;)
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Masterd on June 22, 2010, 05:25:12 AM
How can I fix that?
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Masterd on July 22, 2010, 05:27:09 AM
Please, I really need this.
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Antechinus on July 22, 2010, 06:03:15 AM
I haven't tested these in RC3 as I've been too busy with other things. I'll take a look at it as the quotes code was changed quite a bit between RC2 and RC3.
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Joker™ on July 23, 2010, 04:00:29 PM
Masterd are you using some other theme than default , as for me "Curved quotes" worked perfectly on it .
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Masterd on July 24, 2010, 05:23:26 AM
It's some other theme. But, I tried the style on Deafult theme and I still have the same problem.
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Antechinus on July 24, 2010, 06:31:59 AM
Which browser?
Title: Re: Alternative quote styles for Curve (RC2)
Post by: Masterd on July 24, 2010, 09:17:02 AM
Firefox 4.0 beta 3pre.

EDIT: I tried this (http://www.simplemachines.org/community/index.php?topic=347845.msg2538359#msg2538359) and it works. Thank you for your time.
Title: Re: Alternative quote styles for Curve (RC2)
Post by: davyj on July 27, 2010, 04:16:13 AM
nice one ;)
Title: Re: Alternative quote styles for Curve (RC2)
Post by: ercijuana on June 25, 2011, 07:49:06 AM
I tried Curved quotes on SMF 2.0 RC3 and I have a little problem. Look at the screenshot. One more thing. How can I remove this slide bar on right?

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimg28.imageshack.us%2Fimg28%2F9311%2Fproblemyo.png&hash=9aa686587987db33f0838c4aee338736)
İ have the same problem in 2.0 all of browser what can i do _?
Title: Re: Alternative quote styles for Curve (RC2)
Post by: GraphicJunki on June 30, 2011, 08:02:36 PM
Thanks it really makes a diffrence, I like  :D