Better Quote Box (just like on vbulletin.org)

[vietfancy]

Upload this image to your image/misc folder: https://vborg.vbsupport.ru/external/2008/01/444.gif

Add this to your Additional CSS:


.quote {
margin:15px 10px;
background: url(images/misc/q.gif) 0 0 no-repeat;
padding-left:25px}
blockquote.bq {
font: italic 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
border-left:3px solid #ccc;
margin:0px;
padding:0 5px}





then replace templates bbcode_quote and blog_bbcode_quotewith this code:


<div style="margin:3px; margin-top:5px; <if condition="$show['iewidthfix']">width: 100%;</if>">
<table cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="100%">
<tr>
<td><div class="quote" style="margin-bottom:2px">
<if condition="$show['username']">
<div class="smallfont" style="margin-bottom:2px">
<phrase 1="$username">$vbphrase[originally_posted_by_x]</phrase>
<if condition="$postid"><a href="showthread.php?$session[sessionurl]p=$postid#post$postid" rel="nofollow"><img class="inlineimg" src="$stylevar[imgdir_button]/viewpost.gif" border="0" alt="$vbphrase[view_post]" /></a></if>
</div>
<blockquote class="bq" style="font-style:italic">$message</blockquote>
<else />
<blockquote class="bq" style="font-style:italic">$message</blockquote>
</if>
</div></td>
</tr>
</table>
</div>


Done!


And here is what it looks like:


This code can be use for many versions, not just 3.6.8 . Have fun people.


==========================
If you want to have quote at the end then upload this image https://vborg.vbsupport.ru/attachment.php?attachmentid=74266&stc=1&d=1199648444 to misc folder and use this css instead.


.quote {
margin:15px 10px;
background: url(images/misc/q.gif) 0 0 no-repeat;
padding-left:25px}
blockquote.bq {
background: url(images/misc/q1.gif) no-repeat bottom right;
font: italic 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
border-left:3px solid #ccc;
margin:0px;
padding:0 5px}

[eNforce]

Cool thanks!

Here's a white version of the quote image for those of you with dark styles.

(demo) (http://www.deathbridge.net/showpost.php?p=64&postcount=7)

[FaNtAzY]

WOW... thank u very much dude... i postet a request some days ago and here it is.... awesome... it's such a nice look :) thank you man! :up:

[nothing4me]

Compressed CSS:
.quote{margin:15px 10px;background:url(images/misc/q.gif) 0 0 no-repeat;padding-left:25px}blockquote.bq{font:italic 10pt verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;border-left:3px solid #ccc;margin:0;padding:0 5px}
Thanks by the way. :)

[Snake]

Thanks for this! But is it possible to have a quote at the end, too? :D

[FaNtAzY]

Thanks for this! But is it possible to have a quote at the end, too? :D

.... i have not so good abilities in coding but I think you can easily add a vertical flipped version of the quote icon at the end of the code... (I have no time atm for testing it myself ^^) or wait for the coder who possibly can add your request... because your idea interesst me too :)

[TTG]

I'd be interested in adding this if it could be coded to include the end quote.
I always thought it looked unfinished when I see it used on vborg.

[ran_iu_Conan]

i very very like it
thanks thanks so much ;)

[ran_iu_Conan]

and bbcode php , code , htm ?
do you know ? ^_^

[Snake]

I'd be interested in adding this if it could be coded to include the end quote.
I always thought it looked unfinished when I see it used on vborg.
Yeah, that what I was talking about. It looks like a bit incomplete so it would be nicer if there's one at the end as well.

[vietfancy]

and bbcode php , code , htm ?
do you know ? ^_^

Will do when i have time

Thanks for this! But is it possible to have a quote at the end, too? :D

You can do that easily just by adding a few lines of css code. But it wouldn't look good anymore.

[Snake]

It's easy for you to say. :p The quote icon needs to be vertical flipped and I'm not really good at graphics, and not to mention CSS editing. Maybe you can help a brother out?

[vietfancy]

It's easy for you to say. :p The quote icon needs to be vertical flipped and I'm not really good at graphics, and not to mention CSS editing. Maybe you can help a brother out?

hahahaha bro! I'm not going to make that button for ya. you have to make it yourself and named it q1.gif, then upload it to misc folder, then replace the css with the code below.


.quote {
margin:15px 10px;
background: url(images/misc/q.gif) 0 0 no-repeat;
padding-left:25px}
blockquote.bq {
background: #FFF url(images/misc/q1.gif) no-repeat bottom right;
font: italic 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
border-left:3px solid #ccc;
margin:0px;
padding:0 5px}

[Quantnet]

thanks, bro
do you have to change the bb_quote template as well if you want quote at the end ? It only show the first quote after i add the q1.gif and the css

[SBlueman]

Not showing at the end for me either.

[drhimadri82]

Any solution for legacy???

[vietfancy]

Any solution for legacy???

Not showing at the end for me either.

thanks, bro
do you have to change the bb_quote template as well if you want quote at the end ? It only show the first quote after i add the q1.gif and the css

Done, sorry, i misspelled "images" in the css

[drhimadri82]

Images now not appearing in quotes.....I mean these https://vborg.vbsupport.ru/

[vietfancy]

Images now not appearing in quotes.....I mean these http://lacloi.com/forum/FancyiMac/misc/q1.gif

had you uploaded the image yet?

use this css instead:


.quote {
margin:15px 10px;
background: url(images/misc/q.gif) 0 0 no-repeat;
padding-left:25px}
blockquote.bq {
background: url(images/misc/q1.gif) no-repeat bottom right;
font: italic 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
border-left:3px solid #ccc;
margin:0px;
padding:0 5px}

[drhimadri82]

had you uploaded the image yet?

use this css instead:


.quote {
margin:15px 10px;
background: url(images/misc/q.gif) 0 0 no-repeat;
padding-left:25px}
blockquote.bq {
background: url(images/misc/q1.gif) no-repeat bottom right;
font: italic 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
border-left:3px solid #ccc;
margin:0px;
padding:0 5px}


I already found the images in the previous code when the legacy layout got messy....so images are fine I guess....still I am checking once again...

EDIT: working...

*installed

[princeedward]

thanks for sharing this... ;)

[chimaira]

Worked for me. Cheers

[BigDog56]

Works for me too! Thank you!

[Derek Chai]

Thanks!

[alqloob alsahya]

nice thank"S

[kiFF]

The space between quotes is too big.

http://politicity.net/showpost.php?p=3038&postcount=6

Also, since I added this mod, the code for the quoted text and the new text are automatically moved to the same line. For example:

Quoted TextNew Text

Instead of:

Quoted Text

New Text

If I type the new text on a second line, when I press "Preview", it automatically puts it on the same line. I don't like this because some people like to space their quotes differently to make it easier to read.

EDIT: I think I figured out how to change the spacing in the CSS. However, I still don't know why it won't let you add a space between the quoted text and the new text. Can someone help me please?

[Ozdemir]

thanx ı will try

[ultrmn]

That's great. Thanks very much.

[Pirat3]

did everything you said, does not work on my custom theme. any ideas?

[vietfancy]

did everything you said, does not work on my custom theme. any ideas?


look into the css and change this images/misc/q.gif and images/misc/q1.gifto fit yours

[bhen13]

I like it, it looks great :D Installed

[RedFoxy]

hey i'm searching the q1.gif image... the link is broken

[RedFoxy]

i did it: http://www.softairmania.it/forum/images/misc/q1.gif

[sensimilla]

Worked fine for me , thanks!

[Pirat3]

I edited this on my new theme, would their be a images/misc directory for it? (not sure).

Also which block of additonal.css would I edit? There are 2, the first box or second?

[bluvega]

Thanks, I like it!!!

[RedFoxy]

I edited this on my new theme, would their be a images/misc directory for it? (not sure).

Also which block of additonal.css would I edit? There are 2, the first box or second?yep! Always in images/misc an you must use the alternative css (edit it by admin control panel) in the second box

[Pirat3]

Never mind working now!

[tanyeri24]

doesnt work on pm's

[vietfancy]

doesnt work on pm'syes, it does!

[Hornstar]

Looks good. nice work.

[USAMustangs.com]

Cool, but how do you decrease the huge space between the quote symbols?

[demgel]

could you do something to the CODE bbcode? :D

[vietfancy]

could you do something to the CODE bbcode? :D

Please be more specific. Thanks

[demgel]

Please be more specific. Thanks

I mean, the normal CODE template is a little bit ugly... with courier new, and just a box with normal borders... if you could do something like this quote box with the code box, will be nice... may be a image of this: https://vborg.vbsupport.ru/external/2009/07/3.gif instead the quotes...

I hope you understand me :)

[MissKalunji]

woohoo works thank u!

[Mike08]

great!! Thanks for share ;)

[Gez]

Thank you, i have been looking for this for a long time :)

[kiFF]

No one answered my question yet. :(

My problem is very simple. Let's say I type the following code:

[quote.]How are you?[/quote.]

I'm fine, thanks!


If I press "Preview", it automatically changes the code to this:

[quote.]How are you?[/quote.]I'm fine, thanks!


As you can see, it automatically puts the text on one line. This is annoying because some people like to add spaces to make it easier to read or edit their posts.

Why is it doing this? Thanks.

[vietfancy]

No one answered my question yet. :(

My problem is very simple. Let's say I type the following code:




If I press "Preview", it automatically changes the code to this:




As you can see, it automatically puts the text on one line. This is annoying because some people like to add spaces to make it easier to read or edit their posts.

Why is it doing this? Thanks.

I don't know why it happened to you, but everything is ok with me, and i guess it's ok for everyone else as well.

[yeku]

Installed

thank

[SpeedJunkyz]

how do you add to additional CSS, im lost

[steve1966]

how do you add to additional CSS, im lost

Hi go into your acp

Style Templates/Style Manager/

Main Css in dropdown

then go to bottom of the page

add the code here

Additional CSS Definitions

[sedline]

Thanks very much :)

[DieselMinded]

Why wont this qoute an above post that had a qoute in it also

It drops the qoute posted in the Post your qouteing

[Baldilocks]

Yeah, I would also like to know how to get rid of the huge space between the last word of the quote and the quote image itself.

Example:
"This is a quote..............................."

[Baldilocks]

Another question. What if the second CSS box is in use?? Just add this code to the end of it??

[vietfancy]

Yeah, I would also like to know how to get rid of the huge space between the last word of the quote and the quote image itself.

Example:
"This is a quote..............................."

Not possible at the moment.

Another question. What if the second CSS box is in use?? Just add this code to the end of it??

right on.

[m_k]

thanks :-)

nice mod

[snowman872]

Great mod! =)

[electrolov]

nicely done.

[SpreadingLight]

Very nice!

I installed but the quote symbols aren't showing.

My first guess is that I didn't input the CSS where it needs to be?

[atlambros83]

Very nice!

I installed but the quote symbols aren't showing.

My first guess is that I didn't input the CSS where it needs to be?


just installed it on mine, i by no means would really say that i especially know what i'm doing but it worked fine after my install. i installed mine in the second text box under additional css, it looks like you installed yours in the first. maybe that will help you.

[SpreadingLight]

thanks. I was forgetting the */ at the end of the description I added.

the first quote symbol shows now, but not the end quote yet.

add: Working.

The end-quote image didn't FTP, so I saved it as file and then FTP'ed it over.

Looks great :)

suggestion: set the end-quote to be as far to the right, as the quoted text extends.... or right after the last quoted character

[stwilson]

My end-quote is right justified, versus being up against the quoted text. Any suggestions? Thanks for the MOD.

[Smoox]

I installed but my users told that looks nice but it is not clear (quote - post)
It is possible to make frame or background to separate quote from post.
Like on my pic.

Maybe you have other idea.
Thanks

[Cybershaolin]

I installed but my users told that looks nice but it is not clear (quote - post)
It is possible to make frame or background to separate quote from post.
Like on my pic.

Maybe you have other idea.
Thanks

I support this idea of adding a background. This would be great. Having other options for the code, html and php would also be nice. Just like the new IPB styles would be the best.

I tried the BBCodes manager hack here https://vborg.vbsupport.ru/showthread.php?t=120073 but it conflicts with AME hack here: https://vborg.vbsupport.ru/showthread.php?t=150863

[za3bour]

how can i modify it in order to fit in Arabic Forum ? alignment should be right not left

[FatalBreeze]

Hello!
For all those who has a forum in Hebrew, Arabic or any other language which is Right to Left,
Use this CSS:

.quote {
margin: 15px 10px;
background: url(images/misc/q1.gif) 100% 0 no-repeat;
padding-right:25px
}
blockquote.bq {
font: italic 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
border-right:3px solid #ccc;
margin:0px;
padding:0 5px
}



Please notice that the pic is q1.gif and not q.gif because that's how it goes on RTL langs.

If you want to use the second gif too, use this CSS:

.quote {
margin: 15px 10px;
background: url(images/misc/q1.gif) 100% 0 no-repeat;
padding-right:25px
}
blockquote.bq {
background: #FFF url(images/misc/q.gif) no-repeat bottom left;
font: italic 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
border-right:3px solid #ccc;
margin:0px;
padding:0 5px
}


again notice that i used the q1.gif for the upper right image, and q.gif for the left bottom image.

[za3bour]

Thanks a lot :up:

[edgeyveggie]

I can't get this to work. Is it a problem if I do all of the modifications to a parent style and have it effect the children of that style or will this not work? I tried it with the template part of the installation and that worked but I had to manually go into the child styles to do the CSS and it still didn't work, I would get the 3px border on the left side but no quote image even though it was in the image/misc folder, and even after moving it into my styles respective "misc" image folder it still didn't work, I don't know what the problem is. (The image is prior to me doing the custom CSS for each child style so it does not show the gray 3px border)

[edgeyveggie]

Anone..?:confused::confused::confused:

[GremlinPrince]

lovin it thanks

[silly rabbit]

Nice look vietfancy!

I added 1 thing to your quote design. I created a user profile field giving the user the choice of the original 'vBulletin' quote or your 'custom' style. Rather than "replace" the templates I placed a conditional:
<if condition="$bbuserinfo['field25'] == 'sharp'">
. . . your code
<else />
. . . original code
</if>
Seems to work OK and gives the board a little more individuality and flare. I love it when someone says "how'd you do that?" and I of course reply "you should check your usecp options a little more often".

Oh, I also added a very thin:
border-bottom:1px solid #ccc;
to the CSS and like it just fine!

thx from Rabbit

(Oops! Users have choice of three styles now! Just saw "Better Quote Box (https://vborg.vbsupport.ru/showthread.php?t=177322)" which I labeled as "rounded". Why Not? Might have to play with text size and color on this one, kinda jumps out at ya.)

[leannet]

I installed it and its working fine.

Is it possible to have a border around it and a different background colour so that it stands out.

This is what is currently looks like on my site.
https://vborg.vbsupport.ru/external/2008/05/33.jpg






This is an example of how I want it to look.
https://vborg.vbsupport.ru/external/2008/05/34.jpg

[Atlantean]

Is it possible to have a border around it and a different background colour so that it stands out.

I would also like to be able to do this.

[GrendelKhan{TSU]

simple easy goodness. THANKS!1

btw, viet.. you back? I'd LOVE to see some updates to some of your skins for 3.7.x :)

[Master_Biji]

I like this mod. Thanks a lot!!

Installed!

[dfc005]

I like it but can't get the quotes to appear.... Have uploaded the image files and have made the changes. But no quotes....

[dfc005]

I changed the CSS around a bit and it's working fine for me. Nice.

[GFiSH]

Thanks, I've installed this.

Could only find bbcode_quote, where is blog_bbcode_quote located? Don't have the blog setup on my forums, is that why I can't find it?

[eJM]

Vietfancy, you did an excellent job on this. I made a custom quote symbol and colored the left border to fit my site design. I'm very happy with it and I appreciate the quality work you put into it.

Best R'gards,

Jim McClain

[FReeSTER]

Thanks, I've installed this.

Could only find bbcode_quote, where is blog_bbcode_quote located? Don't have the blog setup on my forums, is that why I can't find it?

Yes my friend just do as it is and forget it about blog_bbcode_quote and should work just fine

[Sworm]

A question,

Can be use this mod with BBcode Manager (https://vborg.vbsupport.ru/showthread.php?t=120073)?

Thanks in advance.

Bye

[eJM]

They appear to be 2 different modifications.

[tony adams]

installed - thanks

[K4GAP]

Really love this but, I have all dark styles and none of the quote images I've found look very good on the dark. I've tweaked a few but just can't get them clean looking. Would anyone just happen to have some laying around :)

[Trillian]

Thanks for the great mod!

Fwiw, I was having trouble with all the space before the closed quote, so I tried a slightly different layout (you can see it in my attachment).

Now I don't know much about css, so my method probably isn't all that efficient. If anyone can improve on it, I'd appreciate it.

Here's my css:

.quote {
margin:15px 10px;
background: url(images/misc/q.gif) 0 0 no-repeat;
padding-left:25px}
blockquote.bq {
font: italic 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
border-left:3px solid #ccc;
margin:0px;
padding:0 5px}
.endquote {
margin:0px 10px 15px;
background: url(images/misc/q1.gif) 0 0 no-repeat;
padding-left:25px}

Here's my template:
<div style="margin:3px; margin-top:5px; <if condition="$show['iewidthfix']">width: 100%;</if>">
<table cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="100%">
<tr>
<td><div class="quote" style="margin-bottom:2px">
<if condition="$show['username']">
<div class="smallfont" style="margin-bottom:2px">
<phrase 1="$username">$vbphrase[originally_posted_by_x]</phrase>
<if condition="$postid"><a href="showthread.php?$session[sessionurl]p=$postid#post$postid" rel="nofollow"><img class="inlineimg" src="$stylevar[imgdir_button]/viewpost.gif" border="0" alt="$vbphrase[view_post]"/></a></if>
</div>
<blockquote class="bq" style="font-style:italic">$message</blockquote>
<else />
<blockquote class="bq" style="font-style:italic">$message</blockquote>
</if>
</div>
<div class="endquote" style="margin-bottom:2px">&nbsp;</div>
</td>
</tr>
</table>
</div>

[farsgsm]

what's the code to put q.gif to upside right?

code
background: url(images/misc/q.gif) no-repeat up right
not works!!

[yamahapaul]

Works great on 3.8.3 and the multi quotes look ok too-

http://www.midlandsheritage.co.uk/showthread.php?p=10050#post10050

Thanks for the mod :up:

[jankie]

https://vborg.vbsupport.ru/

pls help

[Trillian]

http://img10.imageshack.us/img10/6695/quotelayout.jpg

pls help
jankie, did you install the css that I suggested in my earlier post, or did you only install the original code as published by the author of this thread?

And what version of vB are you using?

I'll do my best to help.

[vijayninel]

Thanks. Installed. :)

[gopherhockey]

Anyone get this to work with 4.04?

[Sworm]

Should be really great to adapt this in vb 4 :)

[ricardoNJ]

I would also like to be able to do this.
It will be a nice modification: background color like.... grey color? :up:

[tommydamic68]

I added an additional line at the bottom in the CSS - looks cleaner and separates the quote better in my opinion - just replace the original CSS with this.

.quote {
margin:15px 10px;
background: url(images/misc/q.gif) 0 0 no-repeat;
padding-left:25px}
blockquote.bq {
background: url(images/misc/q1.gif) no-repeat bottom right;
font: italic 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
border-left:3px solid #ccc;
border-bottom:3px solid #ccc;
margin:0px;
padding:0 5px 5px 5px}