vb.org Archive - BB Code Enhancements - IBP Style bbCode: Quote

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 3.7 Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=229)

- - BB Code Enhancements - IBP Style bbCode: Quote (https://vborg.vbsupport.ru/showthread.php?t=192448)

IBP Style bbCode: Quote

//////////////
// For SEO Chat and Webmaster Forums
// By: vBulletin Services
// Released for free use @ vB.org only!
/////////////

This will change the boring vBulletin quote into something with a little more life and spice for your forums. Change the boring quote bbCode to a little more snazz.

go to your styles and templates and locate the bbCode template group.
Double click the bbcode_quote template and replace the entire contents with

Code:

<div style="margin:20px; margin-top:5px; <if condition="$show['iewidthfix']">width: 100%;</if>">



<div style="width:100%">

                

                        <if condition="$show['username']">



                                <div class="quotetop">

                                        $vbphrase[quote]: <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>

                                <div style="font-style:italic" class="quotemain">$message</div>

                        <else />

        <div class="smallfont quotetop">$vbphrase[quote]:</div>

                                <div class="quotemain">$message</div>

                        </if>

</div>

</div>

Save your new template, and open up the Main CSS editor (choose Main CSS From drop down)

All the way at the bottom under additional CSS enter

Code:



.quotetop

{

        width=98%

        color: #000;

        margin: 8px auto 0px auto;

        font-weight:bold;

        font-size:10px;

        padding: 8px;

        background-color:#E4EAF2;

        border-left: 4px solid #8394B2;

        border-top: 1px dotted #000;

        border-right: 1px dotted #000;

}

.quotemain

{

        width=98%

        color: #465584;

        background-color: #FAFCFE;

        border-left: 4px solid #8394B2;

        border-right: 1px dotted #000;

        /*border-top: 1px dotted #000;*/

        border-bottom: 1px dotted #000;

        padding: 4px;

        margin: 0px auto 8px auto;

}

End result is the attached image.

Reserved for future changes.

Demo: http://seotips4.com/forum/t2514/

installed..thanks for the share i most say it looks cleaner...:up:

Thanks, i'll be releasing the code, html, php layouts soon as well. Should look alot better all around

hey great mod. I am a beginer in with vb, so I had a question. I already have some stuff in the "Additional CSS Definitions", should i just add this above it?

Here's what I have in the upper box

Code:

/* ***** styling for 'big' usernames on postbit etc. ***** */

.bigusername { font-size: 14pt; }



/* ***** small padding on 'thead' elements ***** */

td.thead, th.thead, div.thead { padding: 4px; }



/* ***** basic styles for multi-page nav elements */

.pagenav a { text-decoration: none; }

.pagenav td { padding: 2px 4px 2px 4px; }



/* ***** de-emphasized text */

.shade, a.shade:link, a.shade:visited { color: #777777; text-decoration: none; }

a.shade:active, a.shade:hover { color: #FF4400; text-decoration: underline; }

.tcat .shade, .thead .shade, .tfoot .shade { color: #DDDDDD; }



/* ***** define margin and font-size for elements inside panels ***** */

.fieldset { margin-bottom: 6px; }

.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }

lower box:

Code:

.warning-box,

.attention-box,

.notice-box,

.help-box,

.information-box

{

        color: #000;

        border: 1px solid #000;

        -moz-border-radius: 5px;

        background-color: #FCF8C7;

        padding: 6px;

        text-align:left;

}



.warning-box img,

.attention-box img,

.help-box img,

.notice-box img,

.information-box img

{

        float:left;

        margin-top: 10px;

        margin-right: 5px;

        vertical-align:middle;

        border: 0px;

}



.warning-box h2,

.warning-box p,

.notice-box h2,

.notice-box p,

.attention-box h2,

.attention-box p,

.help-box h2,

.help-box p,

.information-box h2,

.information-box p

{

        padding: 0px;

        margin:  0px;

        margin-left: 60px;

}



.warning-box h2,

.attention-box h2,

.notice-box h2,

.help-box h2,

.information-box h2

{

        padding-bottom: 4px;

        font-size: 14px;

        border-bottom: 1px solid #000;

}



.warning-box h1,

.attention-box h1,

.notice-box h1,

.help-box h1,

.information-box h1

{

        padding: 0px;

        margin:  0px;

        margin-left: 60px;

        font-size: 12px;

        font-weight:normal;

}



.warning-box h6,

.attention-box h6,

.notice-box h6,

.help-box h6,

.information-box h6

{



        margin:  20px;

        padding: 0px;

        margin-left: 60px;

        font-size: 12px;

        font-weight:normal;

}



.warning-box

{

        background-color: #FFCCCC;

}



.help-box

{

        background-color: #d5eeb6;

}



.warning-box ul,

.attention-box ul,

.notice-box ul,

.help-box ul,

.information-box ul

{

        margin-left: 30px;

}

thanks

Put it in your lower box, all the way at the very end

Installed :D

But how do I remove the italics?

nvm, found it :D

change:

Code:

<div style="font-style:italic" class="quotemain">$message</div>

to:

Code:

<div style="font-style:normal" class="quotemain">$message</div>

Code:

<div class="quotemain">$message</div>

Should also work

Quote:

Originally Posted by FRDS (Post 1636840)

Put it in your lower box, all the way at the very end

thanks!
and where can I find that small icon (magnifying glass) it seems to suit the style better than the original icon of the '>'

this is really nice.

Quote:

Originally Posted by ricky_s (Post 1643726)

thanks!
and where can I find that small icon (magnifying glass) it seems to suit the style better than the original icon of the '>'

famfamfam.com i think was the name of the site.

I know its in the silk icon pack

For sure its much more cleaner and better design than the original vb layout.
Thanks a lot for this lovely/clean design.
I will appreciate it a lot if you also share this kinda layout for code, html and php too...
Thanks in advance...

how can i add a quote image?

Quote:

Originally Posted by puertoblack2003 (Post 1649893)

how can i add a quote image?

by modifying the .quotetop css class ... example

Code:

background:#color_here url(images/your_image.gif) no-repeat right;

Quote:

Originally Posted by Delphiprogrammi (Post 1649915)

by modifying the .quotetop css class ... example

Code:

background:#color_here url(images/your_image.gif) no-repeat right;

thank you sir :up:

Thank you. This is the best quote solution I have tried!

:D

is there one for vb 4.x?

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.03609 seconds Memory Usage 1,766KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (9)bbcode_code_printable (4)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (22)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: