vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB3 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=168)
-   -   Rounded corner tables no images (only css) (https://vborg.vbsupport.ru/showthread.php?t=212366)

Mihalis 04-28-2009 04:28 PM
Rounded corner tables no images (only css)
 
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 04-29-2009 01:28 AM
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 04-29-2009 04:43 AM
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 04-30-2009 06:11 AM
1 Attachment(s)
Here is my code and what i have achived so far (note: this is only for front page vbadvanced CMPS) with no images...

https://vborg.vbsupport.ru/attachmen...1&d=1241074970

My module wrapper code:

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:

Code:
.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 04-30-2009 08:17 AM
1 Attachment(s)
And here is my final code for this example:

https://vborg.vbsupport.ru/attachmen...1&d=1241082714

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.

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="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:

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 05-01-2009 05:16 AM
1 Attachment(s)
Another alternative is to replace this class:

Code:
.spiffyfg{
  background:#94A3B3}
with a background image and get a gradient result.

https://vborg.vbsupport.ru/attachmen...1&d=1241158609


All times are GMT. The time now is 09:29 AM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01059 seconds
  • Memory Usage 1,758KB
  • 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
  • (5)bbcode_code_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (6)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