New Forum Layout + Look ?

US Marine · 02:27 PM

This is a suggestion to re-model and spruce up THESE forums. NOT switch over to new forums!

First off, I made these forums from InvisionFree boards. Soo this might be a little different seeing as vBulletin forums have a slightly different ADMIN CP than InvisionFree boards.

If people have questions ask away. If you think this is a good idea, then I could help out with setting it up if you want help.

I know this is alot to read..Sorry. If you do read it REPLY and let me know what you think!!! (VOTE TOO)

Exampe Forums I Made
http://z6.invisionfree.com/SilabGarza_V3/

Skinning and Styles

Board Wrappers > Header & Footer

Code:

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" alink="#000000" vlink="#000000"><body text="#000000" link="#000000" vlink="#000000" alink="#000000" leftmargin="2" topmargin="2" marginwidth="2" marginheight="0">
<table width="814" border="1" align="center" cellpadding="4" cellspacing="0" bgcolor="#141414" height="377" bordercolor="#141414">
<tr>
<td width="90%" height="100%"  bgcolor="#141414">
<% BOARD HEADER %>
<table align='center' width='95%' id='spoilert_1'><tr><td><b><center>Shoutbox</center><a href="javascript:spoiler('1');void(0)" id='spoiler_1'><center>[Show Shoutbox]</center> </a></b></td></tr><tr><td id='quote' style='display:none'><!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><****** frameborder="0" width="700" height="245" src="http://www6.cbox.ws/box/?boxid=477222&amp;boxtag=z8ytgy&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#DBE2ED 1px solid;" id="cboxmain"></******></div>
<div><****** frameborder="0" width="700" height="75" src="http://www6.cbox.ws/box/?boxid=477222&amp;boxtag=z8ytgy&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#DBE2ED 1px solid;border-top:0px" id="cboxform"></******></div>
</div>
<!-- END CBOX --></td></tr></table>
<% NAVIGATION %>
<% BOARD %>
<% STATS %>

<table width="100%"><tr><td class="titlemedium" align="center">Member Legend</td></tr><tr><td class="row1" align="center">
<SPAN style="FONT-WEIGHT: bold"><FONT style="FILTER: glow(color=blue, strength=2); COLOR: red; HEIGHT: 1px"><img src="http://209.85.48.9/14553/148/pip/owner_cornw.gif" />Owner</FONT> </SPAN> |
<SPAN style="FONT-WEIGHT: bold"><FONT style="FILTER: glow(color=blue, strength=2); COLOR: red; HEIGHT: 1px"><img src="http://209.85.48.9/14553/148/pip/owner_cornw.gif" />Co-Owner</FONT> </SPAN> |
<SPAN style="FONT-WEIGHT: bold"><FONT style="FILTER: glow(color=red, strength=2); COLOR: red; HEIGHT: 1px"><img src="http://209.85.48.9/14553/148/pip/admin_crown2.png" />Administrator</FONT> </SPAN> |
<SPAN style="FONT-WEIGHT: bold"><FONT style="FILTER: glow(color=blue, strength=2); COLOR: blue; HEIGHT: 1px"><img src="http://209.85.48.9/14553/148/pip/mod_crown1.gif" />Moderator</FONT> </SPAN> |
</td></tr></table>

Board Wrappers > Footer

Code:

    <script type='text/javascript'>
   /*
   Spoiler Code for IF (With added spoiler button!)
   this code is redistributable/editable as long as you leave this comment in place.

   ~Sean (seanj.jcink.com
   */
   function spoiler(x){
   s=document.getElementById("spoiler_"+x)
   t=document.getElementById("spoilert_"+x).rows[1].cells[0]
   if (t.style.display=='none') {
   s.innerHTML='[hide]'
   t.style.display=''
   } else {
   s.innerHTML='[show]'
   t.style.display='none'
   }
   }
   td=document.getElementsByTagName('td')
   c=0
   for(x=0;x<td.length;x++){
   ihtml=td[x].innerHTML
   if (td[x].className=='pformright') continue
   while (ihtml.indexOf('
    
    Spoiler
    
    
        ')!=-1&&ihtml.match('
    
')!=-1) {
   c++
   ihtml=ihtml.replace('
    
    Spoiler
    
    
        ',"<table align='center' width='95%' id='spoilert_"+c+"'><tr><td><b>SPOILER <a href=\"javascript:spoiler('"+c+"');void(0)\" id='spoiler_"+c+"'>[show]</a></b></td></tr><tr><td id='quote' style='display:none'>")
   ihtml=ihtml.replace('
    
','</td></tr></table>')
   }
   td[x].innerHTML=ihtml
   }
   f=document.REPLIER
   if (f){
   spoiler_open=0;
   help_spoiler='Inserts a spoiler tag. (alt + o)'
   function click(){simpletag('spoiler');}
   function over(){hstat('spoiler');}
   newb=document.createElement('input')
   newb.type='button'
   newb.accessKey='o'
   newb.value=' Spoiler '
   newb.onclick=click
   newb.className='codebuttons'
   newb.name='spoiler'
   newb.onmouseover=over
   f.LIST.offsetParent.insertBefore(newb,f.LIST)
   }
   </script>

Skinning & Styles > Images > Logo/Banner

Code:

<img src='http://img24.imageshack.us/img24/5072/silabgarzabannerv2.jpg' alt='' border='0' />

CSS Style Sheet

Code:

html { overflow-x: hidden; overflow-y: auto; }

form { display:inline; }
img  { vertical-align:middle; border:0px }
BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 10px; color: #898989; margin:0px 10px 0px 10px;background-color:#0F0F0F; scrollbar-face-color: #292929; scrollbar-shadow-color: #202020; scrollbar-highlight-color: #333333; scrollbar-3dlight-color: #202020; scrollbar-darkshadow-color: #171717; scrollbar-track-color: #171717; scrollbar-arrow-color: #999999}
TABLE, TR, TD { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 10px; color: #898989; }
a:link, a:visited, a:active { text-decoration: none; color: #A0A0A0}
a:hover { color: #686868; text-decoration:none}

fieldset.search { padding:6px; line-height:150% }
label { cursor:pointer; }

img.attach { border:2px outset #292929;padding:2px }

.googleroot  { padding:6px; line-height:130% }
.googlechild { padding:6px; margin-left:30px; line-height:130% }
.googleparent { padding:6px; margin-left:30px; line-height:130%; color:#55101}
.googlebottom, .googlebottom a:link, .googlebottom a:visited, .googlebottom a:active { font-size:11px; color: #898989; }
.googlish, .googlish a:link, .googlish a:visited, .googlish a:active { font-size:14px; font-weight:bold; color:#898989; }
.googlepagelinks { font-size:1.1em; letter-spacing:1px }
.googlesmall, .googlesmall a:link, .googlesmall a:active, .googlesmall a:visited { font-size:10px; color:#898989}

li.helprow { padding:0px; margin:0px 0px 10px 0px }
ul#help    { padding:0px 0px 0px 15px }

option.cat { font-weight:bold; }
option.sub { font-weight:bold;color:#898989}
.caldate  { text-align:right;font-weight:bold;font-size:11px;color:#565656;background-color:#181818;background-image: url();padding:4px;margin:0px }

.warngood { color:#179217}
.warnbad  { color:#AC1F23}

#padandcenter { margin-left:auto;margin-right:auto;text-align:center;padding:14px 0px 14px 0px }

#profilename { font-size:28px; font-weight:bold; }
#calendarname { font-size:22px; font-weight:bold; }

#photowrap { padding:6px; }
#phototitle { font-size:24px; border-bottom:1px solid #292929}
#photoimg  { text-align:center; margin-top:15px }

#ucpmenu    { line-height:150%;width:22%; border:1px solid #292929;background-color: #202020; background-image: url();}
#ucpmenu p  { padding:2px 5px 6px 9px;margin:0px; }
#ucpcontent { background-color: #202020; background-image: url(); border:1px solid #292929;line-height:150%; width:auto }
#ucpcontent p  { padding:10px;margin:0px; }

#ipsbanner { position:absolute;top:1px;right:5%; }
#logostrip { border:1px solid #292929;background-color: #202020;background-image:url();padding:0px;margin:0px; }
#submenu  { border:1px solid #000000;background-color: #202020; background-image: url(http://209.85.12.227/1997/87/upload/p915.gif); font-size:10px;margin:3px 0px 3px 0px;color:#8B8B8B;font-weight:bold;}
#submenu a:link, #submenu  a:visited, #submenu a:active { font-weight:bold;font-size:10px;text-decoration: none; color: #898989; }
#submenu a:hover { font-weight:bold;font-size:10px;text-decoration: none; color: #767676; }

#userlinks { border:1px solid #292929; background-color: #202020; background-image: url(http://209.85.12.227/1997/87/upload/p904.gif); }

#navstrip  { font-weight:bold;padding:6px 0px 6px 0px;}

.activeuserstrip { background-color:#202020; background-image: url(http://209.85.12.227/1997/87/upload/p904.gif);padding:6px }

.pformstrip { background-color: #202020; background-image: url(http://209.85.12.227/1997/87/upload/p915.gif); color:#7A7A7A;font-weight:bold;padding:7px;margin-top:1px }
.pformleft  { background-color: #202020; background-image: url(); padding:6px; margin-top:1px;width:25%; border-top:1px solid #292929; border-right:1px solid #292929; }
.pformleftw { background-color: #202020; background-image: url(); padding:6px; margin-top:1px;width:40%; border-top:1px solid #292929; border-right:1px solid #292929; }
.pformright { background-color: #202020; background-image: url(); padding:6px; margin-top:1px;border-top:1px solid #292929; }

.post1 { background-color: #1C1C1C;}
.post2 { background-color: #212121;}
.postlinksbar { background-color:#292929;padding:5px;margin-top:1px;font-size:10px; background-image: url(http://209.85.12.227/1997/87/upload/p915.gif) }

.row1 { background-color: #1C1C1C; background-image: url();}
.row2 { background-color: #1C1C1C; background-image: url();}
.row3 { background-color: #202020; background-image: url();}
.row4 { background-color: #202020; background-image: url();}

.darkrow1 { background-color: #161616; color:#8B8B8B; }
.darkrow2 { background-color: #202020; background-image: url(http://209.85.12.227/1997/87/upload/p904.gif); color:#8B8B8B; }
.darkrow3 { background-color: #202020; background-image: url();color:#8B8B8B; }

.hlight { background-color: #1C1C1C; background-image: url();}
.dlight { background-color: #202020; background-image: url();}

.titlemedium { font-weight:bold; color:#767676; padding:6px; margin:0px; background-color: #202020; background-image: url(http://209.85.12.227/1997/87/upload/p915.gif) }
.titlemedium  a:link, .titlemedium  a:visited, .titlemedium  a:active  { text-decoration: none; color: #898989}
.titlemedium  a:hover{ text-decoration: none; color: #767676}

.maintitle { background-position: center; text-align: center; vertical-align:middle;font-weight:bold; color:#7A7A7A; letter-spacing:1px; padding:6px 0px 12px 5px; background-color: #141414; background-image: url(http://209.85.12.227/1997/87/upload/p1009.gif) }
.maintitle a:link, .maintitle  a:visited, .maintitle  a:active { text-decoration: none; color: #7E7E7E}
.maintitle a:hover { text-decoration: none; color: #696969}

.plainborder { border:1px solid #292929;background-color:#292929}
.tableborder { border:1px solid #141414;background-color:#292929; padding:0px; margin:0px; width:100% }
.tablefill  { border:1px solid #292929;background-color:#1C1C1C;background-image: url();padding:6px;  }
.tablepad    { background-color:#222222;background-image: url();padding:6px }
.tablebasic  { width:100%; padding:0px 0px 0px 0px; margin:0px; border:0px }

.wrapmini    { float:left;line-height:1.5em;width:25% }
.pagelinks  { float:left;line-height:1.2em;width:35% }

.desc { font-size:10px; color:#777777}
.edit { font-size: 9px }

.signature  { font-size: 10px; color: #777777}
.postdetails { font-size: 10px }
.postcolor  { font-size: 12px; line-height: 160%; }

.normalname { font-size: 12px; font-weight: bold; color: #777777}
.normalname a:link, .normalname a:visited, .normalname a:active { font-size: 12px }
.unreg { font-size: 11px; font-weight: bold; color: #898989}

.searchlite { font-weight:bold; color:#898989; background-color:#202020; background-image: url();}

#QUOTE { font-family: Verdana, Arial; font-size: 11px; color: #898989; background-color: #181818; background-image: url(); border: 1px solid #292929; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }
#CODE  { font-family: Courier, Courier New, Verdana, Arial;  font-size: 11px; color: #898989; background-color: #181818; background-image: url(); border: 1px solid #292929; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }

.copyright { font-family: Verdana, Tahoma, Arial, Sans-Serif; font-size: 9px; line-height: 12px }

.codebuttons  { font-size: 10px; font-family: verdana, helvetica, sans-serif; vertical-align: middle; color: #898989; border: 1px solid #292929; background-color: #181818; background-image: url();}
.forminput, .textinput, .radiobutton, .checkbox  { font-size: 11px; font-family: verdana, helvetica, sans-serif; vertical-align: middle; color: #898989; border: 1px solid #292929; background-color: #181818; background-image: url();}

.thin { padding:6px 0px 6px 0px;line-height:140%;margin:2px 0px 2px 0px;border-top:1px solid #292929;border-bottom:1px solid #292929}

.purple { color:purple;font-weight:bold }
.red    { color:red;font-weight:bold }
.green  { color:green;font-weight:bold }
.blue  { color:blue;font-weight:bold }
.orange { color:#F90;font-weight:bold }

</STYLE><CENTER><font color=#8B8B8B>Official <B>SilabGarza</B> forums.</B></font></CENTER><STYLE TYPE="text/css">

div.row4 { border-color: #292929!important;background-color:#202020}

</style>

<script language='javascript'>
if ( location.search.indexOf('act=site')!=-1 ){document.write("<style>.tableborder { background-color:#181818; border:1px solid #292929; }}</style>")}
</script>
<script language='javascript'>
if ( location.search.indexOf('showtopic')!=-1 ){document.write("<style>.row4 { background-image: url()}}</style>")}
</script>
<script language='javascript'>
if ( location.search.indexOf('showuser')!=-1 ){document.write("<style>.maintitle { background-image: url(http://209.85.12.227/1997/87/upload/p904.gif); padding:8px 0px 8px 5px; color:#898989; }}</style>")}
</script>
<script language='javascript'>
if ( location.search.indexOf('act=site')!=-1 ){document.write("<style>.maintitle { background-image: url(http://209.85.12.227/1997/87/upload/p904.gif); padding:8px 0px 8px 5px; color:#898989; }}</style>")}
</script>
<script language='javascript'>
if ( location.search.indexOf('act=UserCP')!=-1 ){document.write("<style>.maintitle { background-image: url(http://209.85.12.227/1997/87/upload/p904.gif); padding:8px 0px 8px 5px; color:#898989; }}</style>")}
</script>

Playlist HTML Code

Code:

<div style="text-align: center; margin-left: auto; visibility:visible; margin-right: auto; width:450px;"> <object width="435" height="270"> <param name="movie" value="http://www.profileplaylist.net/mc/mp3player_new.swf"></param> <param name="allowscriptaccess" value="never"></param> <param name="wmode" value="transparent"></param> <param name="flashvars" value="config=http%3A%2F%2Fwww.indimusic.us%2Fext%2Fpc%2Fconfig_black_noautostart_shuffle.xml&mywidth=435&myheight=270&playlist_url=http%3A%2F%2Fwww.indimusic.us%2Floadplaylist.php%3Fplaylist%3D69056785%26t%3D1250989704&wid=os"></param> <embed style="width:435px; visibility:visible; height:270px;" allowScriptAccess="never" src="http://www.profileplaylist.net/mc/mp3player_new.swf" flashvars="config=http%3A%2F%2Fwww.indimusic.us%2Fext%2Fpc%2Fconfig_black_noautostart_shuffle.xml&mywidth=435&myheight=270&playlist_url=http://www.indimusic.us/loadplaylist.php?playlist=69056785&t=1250989704&wid=os" width="435" height="270" name="mp3player" wmode="transparent" type="application/x-shockwave-flash" border="0"/> </object> <br/> <a href="http://www.profileplaylist.net"><img src="http://www.profileplaylist.net/mc/images/create_black.jpg" border="0" alt="Get a playlist!"/></a> <a href="http://www.mysocialgroup.com/standalone/69056785" target="_blank"><img src="http://www.profileplaylist.net/mc/images/launch_black.jpg" border="0" alt="Standalone player"/></a> <a href="http://www.mysocialgroup.com/download/69056785"><img src="http://www.profileplaylist.net/mc/images/get_black.jpg" border="0" alt="Get Ringtones"/></a> </div>

Also...

If you look on the Moderation Application forum, you'll see the requirements listed right there instead of having the topic.
I have TWO member groups for "members". Both are the same, however one of the groups has it so ONLY members with 100+ posts can start a new topic in the Moderation Application forum. That could definitely reduce the spam and cancel out the need to worry about that requirement.
A Shoutbox. If you don't like it, tell me and I can just delete it. It's the best one I could find though...Not a big fan of the one I have anyway
I kept the crowns next to the name, but added COLOR to staff names.
A music playlist! Listen to music while you're on the forums! www.playlist.com
Member Legend at the bottom of the forums
When you're not logged in 2 "hidden" forums are visible to either Register or Login. It's not visible by members who are logged in
There is a category called "STAFF FORUM". Obviously only staff can view it but it has a trash can forum and a staff discussion forum.

**cheat death** · 09-03-2009, 01:24 PM

I definatly like the look of that new one, but will it have all the same functions as this one?

gta · 09-03-2009, 01:45 PM

I dont understand a thing of that coding.

Brendan · 09-03-2009, 01:52 PM

Quote:

Originally Posted by gta

I dont understand a thing of that coding.

You dont need to just smile and nod...

Umm, i vote yes because blue and black is bleh...

US Marine · 09-03-2009, 02:05 PM

Quote:

Originally Posted by cheat death

I definatly like the look of that new one, but will it have all the same functions as this one?

vBulletin = forums type we have now
InvisionFree = my example forum

Not sure what you mean. I'm sure someone who knows how vBulletin works can answer that better... But, vBulletin is FAR BETTER from what I've heard. But they're pretty similar (to me).

Few things that stand out though between the two
- vBulletin have better user profiles (user albums, visitor messages, personal picture, views, etc)
- vBulletin has "Social Groups" and A TON other add-ons...However, these forums don't have many at all. Some vBulletin forums have arcades, live chat, customizable profiels, and more.

Basically you can do a lot more with vBulletin. InvisionFree is just a lot simpler and less complicated.

**Mircast** · 09-03-2009, 02:20 PM

VBullentin imo.

US Marine · 09-03-2009, 02:27 PM

Quote:

Originally Posted by Mircast

VBullentin imo.

It's not a vote for new forums. It's a vote to make these forums better and re-model it in a sense.

**Gir** · 09-03-2009, 05:14 PM

oh u poor nieEVE(noclue how its spelled) kid.... vb is customized way differently...
i suggest u google around look 4 a vb layout and ull see how way off the coding is for each
involves new .xml files and a shitload of other stuff, its very complicated

US Marine · 09-03-2009, 05:32 PM

I figured it was more complicated..My point was that the forums need a makeover and whether or not the coding is different, it could be done.

US Marine · 09-09-2009, 10:45 AM

Quote:

Originally Posted by Gir

oh u poor nieEVE(noclue how its spelled) kid.... vb is customized way differently...
i suggest u google around look 4 a vb layout and ull see how way off the coding is for each
involves new .xml files and a shitload of other stuff, its very complicated

Lulz ! Excuses excuses..

I'm definitely not a kid btw.

New Forum Layout + Look ?

Suggestions (archive)