Rounded corner tables no images (only css)

[Mihalis]

I have been googling the internet to find resources about creating rounded corner tables with images in vbulletin, but haven't been extremely lucky so far. There are some information here and there (mostly using divs and css) but was not able to get the whole picture.

So my question is this: How is it possible to create rounded corner tables anywhere in vbulletin using images and which templates i have to change. Any help would be appreciated.

Thank you.

[napy8gen]

you can learn from my style, psd included. The rounded corner based on tables thus I have already started with div layout for my new themes.

see code in header and footer template and main css.
https://vborg.vbsupport.ru/showthrea...ghlight=forumo

[Mihalis]

Thank you for your answer.

Is it possible to use the same technic that you use for your outer table, on category tables for example? I think if you want to change the category tables look, you should modify the FORUMHOME templates?

[Mihalis]

Here is my code and what i have achived so far (note: this is only for front page vbadvanced CMPS) with no images...



My module wrapper code:

$mods[formcode]

<div style="padding-bottom:$vba_style[portal_vspace]px">
	<table class="bord" align="center" border="0"width="100%" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]">
		
			
 				
<div class="tcat" colspan="$mods[colspan]">
  <b class="spiffy">
  <b class="spiffy1"><b></b></b>
  <b class="spiffy2"><b></b></b>
  <b class="spiffy3"></b>
  <b class="spiffy4"></b>
  <b class="spiffy5"></b></b>

  <div class="spiffyfg">
				<if condition="$vba_style['portal_collapsemods']">
					<a href="#top" onclick="return toggle_collapse('module_$mods[collapse]')" style="float:$stylevar[right]"><img alt="" border="0" id="collapseimg_module_$mods[collapse]" src="$stylevar[imgdir_button]/collapse_tcat$modimgcollapse.gif" /></a>
				</if>
				<span class="smallfont" class="tex"><strong>$vba_style[portal_blockbullet] <if condition="$mods['link']"><a href="$mods[link]">$mods[title]</a><else />$mods[title]</if></strong></span>
			
		
		<tbody id="collapseobj_module_$mods[collapse]" style="$modcollapse">
			<if condition="$show['tablerow']">
				<tr>
					<td class="$bgclass">
						$modulehtml
					</td>
				</tr>
			<else />
				$modulehtml
			</if>
		</tbody>

	</table>
<b class="spiffy">
  <b class="spiffy5"></b>
  <b class="spiffy4"></b>
  <b class="spiffy3"></b>
  <b class="spiffy2"><b></b></b>
  <b class="spiffy1"><b></b></b></b>
</div>

  </div></div>

<if condition="$mods['formcode']"></form></if>

My CSS:

.bigfont {
font-size: 13px;
}
.spiffy{display:block}
.spiffy *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#ADBBCA}
.spiffy1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #dbe1e8;
  border-right:1px solid #dbe1e8;
  background:#c1ccd7}
.spiffy2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #f6f8f9;
  border-right:1px solid #f6f8f9;
  background:#bcc7d4}
.spiffy3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #bcc7d4;
  border-right:1px solid #bcc7d4;}
.spiffy4{
  border-left:1px solid #dbe1e8;
  border-right:1px solid #dbe1e8}
.spiffy5{
  border-left:1px solid #c1ccd7;
  border-right:1px solid #c1ccd7}
.spiffyfg{
  background:#ADBBCA}
.tex{
padding-left:10px;
}
.bord{
border: 1px solid #ADBBCA;
}

What I want to do next is, change the color in the bottom and keep the blue color border. Also to fix padding in title and have a fixed height. Any suggestions?

[Mihalis]

And here is my final code for this example:



Not what i want 100% but i like it.

Like I said, i made this only for vbadvanced CMPS so i have tweaked only the appropriate templates. If you find this useful and want to try in forum templates, be my guest and drop a note how you did it. Corrections in code is also appreciate.

$mods[formcode]

<div style="padding-bottom:$vba_style[portal_vspace]px">
	<table class="bord" align="center" border="0"width="100%" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]">
		 				
<div class="class1" colspan="$mods[colspan]">
  <b class="spiffy">
  <b class="spiffy1"><b></b></b>
  <b class="spiffy2"><b></b></b>
  <b class="spiffy3"></b>
  <b class="spiffy4"></b>
  <b class="spiffy5"></b></b>

  <div class="spiffyfg">
				<if condition="$vba_style['portal_collapsemods']">
					<a href="#top" onclick="return toggle_collapse('module_$mods[collapse]')" style="float:$stylevar[right]"><img alt="" border="0" id="collapseimg_module_$mods[collapse]" src="$stylevar[imgdir_button]/collapse_tcat$modimgcollapse.gif" /></a>
				</if>
				<div class="tex"><strong>$vba_style[portal_blockbullet] <if condition="$mods['link']"><a href="$mods[link]">$mods[title]</a><else />$mods[title]</if></strong></div>			
		
		<tbody id="collapseobj_module_$mods[collapse]" style="$modcollapse">
			<if condition="$show['tablerow']">
				<tr>
					<td class="$bgclass">
						$modulehtml
					</td>
				</tr>
			<else />
				$modulehtml
			</if>
		</tbody>

	</table>
<b class="spiffya">
  <b class="spiffya5"></b>
  <b class="spiffya4"></b>
  <b class="spiffya3"></b>
  <b class="spiffya2"><b></b></b>
  <b class="spiffya1"><b></b></b></b>
</div>

  </div></div>

<if condition="$mods['formcode']"></form></if>

And the additional CSS code:

.bigfont {
font-size: 13px;
}
.spiffy{display:block}
.spiffy *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#94A3B3}
.spiffy1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #d0d7de;
  border-right:1px solid #d0d7de;
  background:#aebac6}
.spiffy2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #f4f5f7;
  border-right:1px solid #f4f5f7;
  background:#a8b4c1}
.spiffy3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #a8b4c1;
  border-right:1px solid #a8b4c1;}
.spiffy4{
  border-left:1px solid #d0d7de;
  border-right:1px solid #d0d7de}
.spiffy5{
  border-left:1px solid #aebac6;
  border-right:1px solid #aebac6}
.spiffyfg{
  background:#94A3B3}
.tex{
padding-left:10px;
font-size:13px;
color: #ffffff;
padding-bottom: 5px;
link
}
.class1 A:link {text-decoration: none; color: #ffffff;}
.class1 A:visited {text-decoration: none; color: #ffffff;}
.class1 A:active {text-decoration: none; color: #ffffff;}
.class1 A:hover {text-decoration: underline; color: #ffff66;}
.bord{
border-left: 1px solid #dadada;
border-right: 1px solid #dadada;
border-bottom: 1px solid #dadada;
}
.tex1{
padding-left:10px;
font-size:11px;
color: #ffffff;
font-color: #ffffff;
padding-bottom:4px;
}
.spiffy{display:block}
.spiffya *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#DADADA}
.spiffya1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #efefef;
  border-right:1px solid #efefef;
  background:#e3e3e3}
.spiffya2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #fbfbfb;
  border-right:1px solid #fbfbfb;
  background:#e1e1e1}
.spiffya3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #e1e1e1;
  border-right:1px solid #e1e1e1;}
.spiffya4{
  border-left:1px solid #efefef;
  border-right:1px solid #efefef}
.spiffya5{
  border-left:1px solid #e3e3e3;
  border-right:1px solid #e3e3e3}

I have used this tutorial to make the spiffy class colors. If I could eliminate somehow the bottom grey color but keep the border, it would be perfect.

[Mihalis]

Another alternative is to replace this class:

.spiffyfg{
  background:#94A3B3}

with a background image and get a gradient result.