styles question.

[sokol]

Hello, I'm trying to modify my boards to have more of a graphical feel.
I have made several menu pieces IE.....
top-left
top-middle
top-right
middle-left
middle-middle
middle-right
bottom-left
bottom-middle
bottom-right

For example this is what I have now.


What I'm trying to create.


I've been browsing the forums and haven't seen anything in particular yet, but if any one has a link to a good post on this subject I'd be very appreciated.

(I know the pictures are the menu's from vbadvanced, but the same hold true for what I'm trying to do for the forums aswell. IE more of a graphical look)

Sincerly,
Duston

[Freesteyelz]

A suggestion: If you know the exact width you can eliminate all but:

Header
Top
Middle
Bottom

Rather than using Table elements to define each graphics side use the <div> tag withinn the <td>, assuming that you're using Tables. Here's a generic example (but a technique I use):

<table cellpadding="0" cellspacing="0" border="0" align="center">
  <tr>
      <td class="c1">
          <div class="c_header">Header Title</div>
          <div class="c_top"></div>
          <div class="c_middle">Content...</div>
          <div class="c_bottom"></div>
      </td>
  </tr>
</table>

The class "c1" in the <td> tag is where you define the padding and spacing values for the column.

*Are you asking how to implement the change from the default vBa style to your new look? If so I can try to help you in the right direction.

[Rich]

From what I see of what it is you are trying to create, there are only 2 images required and the code is very simple.

It appears that you have a table that is padded housing another table. The first table has a gradient background image (should be handled via CSS) and the inner table has 2 classes to define colors/images. The first would be the header. That could be a custom class with an image that repeats and the text area can be another "alt" (like alt3) and the color specified in the style.

[sokol]

Originally Posted by Freesteyelz

*Are you asking how to implement the change from the default vBa style to your new look? If so I can try to help you in the right direction.

Yes, I'd like to make the front "home" page of VBA use my new artwork rather then the default values for menus.

Please forgive my newness here, just began tackling this.

Sincerly,
Duston

[Rich]

I took 5 minutes to toss this together to show you a visible example. The attached file contains the styles I used and your images. (I cut the pic above up for them.)

The width for this table is 100% so it spans the whole page, but it would actually be confined to the width of the column it is inserted in.

You can upload this file to your server and view how it looks and then look at how I did it. I have the style classes at the top but they can easily be renamed. You will also need to change the links to your images as I won't be hosting those images forever. lol

This should get you started on HOW to do it.

[Rich]

After reading your pm, I believe you want to modify the adv_portal_module_shell template under the vBadvanced CMPS Templates in the style manager.

The css would need to be added directly to the style the site is using at the bottom in the "Additional CSS Definitions" location.

[sokol]

Ok, here is what I have now.
Vanguard-soh.org

I added the styles at the end of the style css files in the CP
I changed the code in adv_portal_navigation
to
<div align="center" class="tborder">
<center>
<table border="0" cellpadding="5" cellspacing="0" width="0" height="124" class="tab1">
<tr>
<td width="0" align="center">
<table border="1" cellpadding="0" cellspacing="0" width="0" height="100%" bordercolor="#000000" style="border-collapse: collapse">
<tr>
<td width="0" class="tcat2" height="22" align="center"> &gt;&gt;Navigation Menu </td>
</tr>
<tr>
<td class="$bgclass">
&nbsp; $navigationbits
&nbsp; $customnavigationbits
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</div>

Any ideas how to get it back into shape?

-Duston

[Rich]

Ummm, you can't remove their code bud! lol Brian added that code because the modules need it. What you needed to do was modify his code. Replace your adv_portal_module_shell with this:

(If you changed the names of the original classes, change them in the code below as well.)

Let me know if that works for you.

$mods[formcode]

 <table border="1" cellpadding="5" cellspacing="0" width="100%" class="tab1" bordercolor="#000000" style="border-collapse: collapse">
  <tr>
   <td width="100%" align="center">
<table align="center" border="0" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" class="tborder" width="100%">
	<thead>
		<tr>
			<td class="tcat2" colspan="$mods[colspan]">
			<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"><strong>$vba_style[portal_blockbullet] <if condition="$mods['link']"><a href="$mods[link]">$mods[title]</a><else />$mods[title]</if></strong></span></td>
		</tr>
	</thead>
	<tbody id="collapseobj_module_$mods[collapse]" style="$modcollapse">
		<if condition="$show['tablerow']">
			<tr>
				<td class="alt3" height="100%">
					$modulehtml
				</td>
			</tr>
		<else />
			$modulehtml
		</if>
	</tbody>
</table>
</td>
</tr>
</table>
<div><img src="$vboptions[bburl]/$vboptions[cleargifurl]" height="$vba_style[portal_vspace]" alt="" /></div>

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

[sokol]

Beautifull, thats the file I was needing to edit.
Leason learned and I think I can handle it from here!

Again many many thanks!

-Duston

[Freesteyelz]

Thanks Rich for taking care of it.