IBP Style bbCode: Quote

[SEOvB]

//////////////
// For SEO Chat and Webmaster Forums (http://seotips4.com/forum)
// By: vBulletin Services (http://seovb.com/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


<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


.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.

[SEOvB]

Reserved for future changes.

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

[rizelim]

thanks

[puertoblack2003]

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

[SEOvB]

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

[ricky_s]

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
/* ***** 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:
.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

[SEOvB]

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

[Senzuri]

Installed :D

But how do I remove the italics?

[Senzuri]

nvm, found it :D

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

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

[SEOvB]

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


Should also work

[NAZIA]

Installed...

[ricky_s]

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 '>'

[ZomgStuff]

Hott, thank you!

[MentaL]

this is really nice.

[SEOvB]

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

[ishare]

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...

[puertoblack2003]

how can i add a quote image?

[Delphiprogrammi]

how can i add a quote image?

by modifying the .quotetop css class ... example


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

[puertoblack2003]

by modifying the .quotetop css class ... example


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


thank you sir :up:

[twgogo]

i like it~Thx

[Keesa]

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

:D

[Ravallojr]

is there one for vb 4.x?