Square Modules

[Nautiqeman]

Is there a way to make the modules with rounded edges or even a drop shadown instead of the square look that vB has?

[Albus]

Yes! There is. But it involves a slight hack...

Consider a standard module template:


<table cellpadding="$stylevar[cellpadding]" $cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center" class="tborder">
<tr><td class="tcat"><span class="smallfont"><strong>$vba_options[portal_blockbullet] MODULE NAME</strong></span></td></tr>
<tr><td class="$getbgrow">$content</td></tr>
</table>


Augment it like this:


<div class="module_open"></div>
<div class="module_body">
<table cellpadding="$stylevar[cellpadding]" $cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center" class="tborder">
<tr><td class="tcat"><span class="smallfont"><strong></strong>$vba_options[portal_blockbullet] MODULE NAME</span></td></tr>
<tr><td class="$getbgrow">$content</td></tr>
</table>
</div>
<div class="module_close"></div>


Now just add definitions for the new classes to your Main CSS. For example:

.module_open {
background: transparent url(images/misc/module_open.gif) no-repeat top left;
height: 10px;
overflow: hidden;
width: 150px;
}

.module_body {
background: transparent url(images/misc/module_body.gif) repeat-y top left;
padding: 0px 10px 0px 10px;
width: 150px;
}

.module_close {
background: transparent url(images/misc/module_close.gif) no-repeat top left;
height: 10px;
overflow: hidden;
width: 150px;
}

module_open.gif should be 150x10 in this sample and can look anyway you want.

module_body.gif should be 150x? in this sample and can look anyway you want.

module_close.gif should be 150x10 in this sample and can look anyway you want.

You'll have a module nested in a custom box with 10px worth of images as a border to play with.

You may need to make different versions for left, center and right modules though in reality, but that's the basics.

[Nautiqeman]

Will I need to make any images to use for this?

and thank you for the help!

[Albus]

Three. The ones I mentioned. You can name them anything you want of course. The above was just a sample. If they are different sizes, make sure to adjust the classes as well.

[Albus]

For further demonstration, please see this (http://ragingpenguin.com/module).

[Nautiqeman]

Ok Ill try that and see if it works, thanks again

[Nautiqeman]

yea whenever I do that, it just makes my tables all messed up on the front page. The only thing I can think of is that I'm putting the CSS code in the wrong place

[Albus]

Way down at the bottom of the "Main CSS" editor for your style there are two boxes under the heading "Additional CSS Definitions". Put your custom classes in the second box.

[Nautiqeman]

Ok, Ill try that... it was just completely changing every table on my home page and not just the module I put the code in... I'll try it again and make sure I do it exactly how you have it down

[Nautiqeman]

Here is the code, I'm putting your code at the top and bottom of this code and it just messes the entire page up. I have to be doing something wrong lol...

<table align="center" border="0" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" class="tborder" width="100%">
<tr>

<td class="tcat"><span class="smallfont"><strong><center> News Updates
</center></strong></span></td>

</tr>
<tr>
<td class="$getbgrow" width="100%">
<!-- Content for your module goes here -->
This coming weekend is the Memorial Day holiday so have fun and be safe. Practice is on Tuesday, not Monday next week.<br><br><center><font color=red><b>***New Feature***</b></font></center>If you check the footer bar (bottom left corner on every page) you'll see a drop down box that says: Default Style, you can now change the look of the site by selecting what 'Style' you want to use. I'll add more styles as time goes on.

</td>
</tr>
</table>
<br />

[Albus]

I have plenty of time. Let's do this one step at a time. I am going to assume that code is your current module template? Replace it with this:


<div class="module_open"></div>
<div class="module_body">

<table align="center" border="0" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" class="tborder" width="100%">
<tr>

<td class="tcat"><span class="smallfont"><strong><center> News Updates
</center></strong></span></td>

</tr>
<tr>
<td class="$getbgrow" width="100%">
<!-- Content for your module goes here -->
This coming weekend is the Memorial Day holiday so have fun and be safe. Practice is on Tuesday, not Monday next week.<br><br><center><font color=red><b>***New Feature***</b></font></center>If you check the footer bar (bottom left corner on every page) you'll see a drop down box that says: Default Style, you can now change the look of the site by selecting what 'Style' you want to use. I'll add more styles as time goes on.

</td>
</tr>
</table>

</div>
<div class="module_close"></div>
<br />


Do that then come back here so I can see you page live before going to the next step. Without the CSS classes in place, this shouldn't change the look of the site any just yet. I simply want to verify it's being rendered in the source html correctly.

[Nautiqeman]

done

http://ucwaterski.cheaphack.com

[Nautiqeman]

when I add the CSS code, that's when it messes up
the images I'm using are:
http://ucwaterski.cheaphack.com/images/misc/category_topsmallmini_left.gif
http://ucwaterski.cheaphack.com/images/misc/category_topsmallmini_right.gif

[Nautiqeman]

that is the site I'm testing it on but it's one of the features I want to add to a site I'm building for a band that just signed a deal and with how many people will be using the site, I want it to look pretty good.

[Nautiqeman]

and
http://ucwaterski.cheaphack.com/images/misc/category_bottomsmallmini_left.gif
http://ucwaterski.cheaphack.com/images/misc/category_bottomsmallmini_left.gif

[Albus]

Ok. I see the problem. At least in part. My sample focused on a fixed width left or right module. Dynamically sized modules are a bit trickier and required more div's. You'll need to split your image up into eight pieces. They are as follows:

upper-left-corner
upper-right-corner
lower-left-corner
lower-right-corner

top-center
left-center
right-center
bottom-center

Post your main image here and I'll prepare them, the css and the template for you. All you'll have to do is apply it.

[Nautiqeman]

there are 4 of them... I'm doing the center ones now

[Nautiqeman]

http://ucwaterski.cheaphack.com/images/misc/category_bottomsmallmini_center.gif
http://ucwaterski.cheaphack.com/images/misc/category_topsmallmini_center.gif
http://ucwaterski.cheaphack.com/images/misc/category_topsmallmini_left_center.gif
http://ucwaterski.cheaphack.com/images/misc/category_topsmallmini_right_center.gif

[Albus]

Ok. Give me a few to work this up. Last two links don't work...

[Nautiqeman]

not a problem, thanks a million for the help

[Albus]

Take a look at this (http://ragingpenguin.com/nautiqueman/) and tell me if it is about what you had in mind. The border images you provided didn't completely match up, so I improvised.

[Nautiqeman]

LOL

yea that would work but I was talking about having them across the top and bottom but down the side is just fine

[Albus]

You want the darker strip along the top and bottom? I can do that. Just let me know before I continue.

[Nautiqeman]

I actually like the way that looks better!

[Albus]

Here are the images. Please keep the names intact. Upload them to /images/misc/.

[Nautiqeman]

i saved 6 images

[Nautiqeman]

ok got them all in the zip file, thanks

[Albus]

Next, place the entire contents of this text file into the second box under "Additional CSS Definitions" in the "Main CSS" editor. Cut and paste the whole thing, replacing any classes I told you to place there earlier. There's one last step so let me know when both of these are done.

[Nautiqeman]

done.. nothing has changed yet

[Albus]

This is the step where things change. :)

This is the basic format for your new module style:


<div class="m1"><div class="m2"><div class="m3">
</div></div></div>
<div class="m4"><div class="m5"><div class="m6">

<!-- module template goes here minus the trailing br -->

</div></div></div>
<div class="m7"><div class="m8"><div class="m9">
</div></div></div>

<br />


Therefore, cut and paste this as your News Updates module template:


<div class="m1"><div class="m2"><div class="m3">
</div></div></div>
<div class="m4"><div class="m5"><div class="m6">

<table align="center" border="0" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" class="tborder" width="100%">
<tr>

<td class="tcat"><span class="smallfont"><strong><center> News Updates
</center></strong></span></td>

</tr>
<tr>
<td class="$getbgrow" width="100%">
<!-- Content for your module goes here -->
This coming weekend is the Memorial Day holiday so have fun and be safe. Practice is on Tuesday, not Monday next week.<br><br><center><font color=red><b>***New Feature***</b></font></center>If you check the footer bar (bottom left corner on every page) you'll see a drop down box that says: Default Style, you can now change the look of the site by selecting what 'Style' you want to use. I'll add more styles as time goes on.

</td>
</tr>
</table>

</div></div></div>
<div class="m7"><div class="m8"><div class="m9">
</div></div></div>

<br />


Follow that procedure for all modules you want to give this look to. Post back when done so I can see the results on your board. Just to make sure there are no last minute adjustments.

[Nautiqeman]

I did it for that one module and it looks different than the images you posted... did I do something wrong?

[Albus]

Well, there's a few errors. I've been watching your progress. Do you have an MSN messenger ID? This would go a lot faster if I could talk to you easier. It's actually pretty simple, but you stopped applying things to the white style and restarted on the default before everything was done.

MSNM: penguin@ragingpenguin.com

[Nautiqeman]

msn: mmayleben@hotmail.com

[Albus]

All fixed. :)