SMF For Free Support Forum
Signup For Free Forum
October 06, 2008, 04:51:27 pm *
Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length
News: Welcome to SMF For Free. The best free SMF Host
 
   Home   Help Search Arcade Gallery Login Register  

Pages: [1] 2 3 4 ... 7
  Print  
Author Topic: [Code] Sidebar!  (Read 14101 times)
0 Members and 1 Guest are viewing this topic.
Roswenth
SMF For Free Newbie
*
Offline Offline

Posts: 17



View Profile
« on: April 10, 2007, 09:46:11 am »

In my failed efforts to make an announcement box, I finally tried one of my sidebars that I made for InvisionFree boards.  It worked almost perfectly.  I did some tweaking, and it works great. I totally didn't expect the sidebar to work better than the announcement box, but it does.  You are free to change all the information in the boxes, I just made some common to many sites. Please keep the copyright intact.

Preview: http://i127.photobucket.com/albums/p133/lts19/smfsidebar.jpg

Warning:
There is some coding knowledge required with this, and I don't have the time to support it fully, so use at your own risk.

Where to put it:
Just drop it into the headers. The width is static, because it's hard to work with fluid widths on a sidebar.  The first width is set to 150 and the second where the forum sits should be fluid (I hope).  You can play with that if you would like, but do know people start complaining if it gets any wider.

How to fix it for your site:
I've tried to make the sidebar as self-explanatory as possible.  Replace all of the  links with the address of your own site.  The post numbers will not be the same, so you will have to go look up each post and each staff members' unique address.  You can change any section into something else if you have the creativity and some coding know-how.

This goes at the bottom of your CSS.  It will not work on a default skin (you can't edit the CSS). You can change the colors to match your skin.
Code:
.tablepad    { background-color:#FFFFFF; padding:6px; border:1px solid #000000; }

This drops into your header (Admin CP->Manage Styles->Edit Headers and Footers):
Code:
<table align=center valign=top>
<tr> <td width=150 valign=top>
<div class='maintitle'>Welcome!</div><div class="tablepad" border='1'><span class='desc'><center>
<br>
<center><b><font size="2" color=#B22222>Information about the Site</font></b><br>
Just put some information about your site and current events here.
<center> <font size="2"><b><BR><BR><a href="http://z8.invisionfree.com/YourSite/index.php?showtopic=8&view=getnewpost">We are looking for staff!</a></font></b><br><br></center>
</span></div></div>

<center><div class='maintitle'>Mandatory Reads</div>
<div class="tablepad"><span class='desc' ><font size="2">
<a href="http://z8.invisionfree.com/YourSite/index.php?showtopic=3&st=0">Rules and Guidelines</a><br>
<a href="http://z8.invisionfree.com/YourSite/index.php?showtopic=4&view=getnewpost">Plot Information</a></font><br><br>
</span></div></div>

<center>
<div class="maintitle">C-Box </div>
<div class="tablepad"><span class='desc' >
<!-- BEGIN CBOX - http://www.cbox.ws -->
<!-- END CBOX -->
<br><br>
</span></div></div>

<center>
<div class="maintitle">Staff </div>
<div class="tablepad"><span class='desc' ></b>
You  may contact the staff through the private message link in their profiles.<br><br>
<b><u>Admins</b> </u><br>
<a href="http://z8.invisionfree.com/YourSite/index.php?showuser=1"><b>Admin 1</b></a><br>
<a href="http://z8.invisionfree.com/YourSite/index.php?showuser=2"><b>Admin 2 </b></a><br>
</b>
<br><br><u><b>Moderators</u><br>
<a href="http://z8.invisionfree.com/YourSite/index.php?showuser=5"><b>Mod 1</b></a> <br>
<a href="http://z8.invisionfree.com/YourSite/index.php?showuser=9"><b>Mod 2</b></a> <br>
</span></div></div>
</center>

<div class='maintitle'>Advertise Us! </div>
<div class="tablepad"><span class='desc'>
<img src="88x31banner.jpg">
<br>
<br><b><u>Listed At</b></u></b>
<marquee scrolldelay="151"><BR>
<a href="http://www.technochicks.org/forum" target="_blank"><img src="http://i113.photobucket.com/albums/n212/technochicks/technochicks_88px-33px_117.jpg" alt="TechnoChicks"></a>
</marquee><br>

<div class='maintitle'>Credits </div>
<div class="tablepad"><span class='desc'>
Skin ©
<br><br>
Side-bar © <a href="http://iql.ancientmagicrpg.com/">Roswenth</a>

</span></div></div>
<br /></center>
</td>
<td height="100%" valign=top>
« Last Edit: August 27, 2007, 09:07:55 pm by simply sibyl » Logged
Roswenth
SMF For Free Newbie
*
Offline Offline

Posts: 17



View Profile
« Reply #1 on: April 10, 2007, 11:27:02 am »

And here's a teeny version. Still just goes straight into the header. Adjust the colors to suit your skin.

Preview: http://i127.photobucket.com/albums/p133/lts19/smfsb2.jpg

Code:
<table align=center valign=top>
<tr> <td width="150" valign=top><small>
<center><div class='titlebg2'>Welcome!</div>
<div class="tablepad" border='1'><span class='desc'><center>
<br>
<center>
Put a welcome note here.
<center> <font size="1"><b><BR><BR><br><br></center>
</span></div></div>

<center><div class='titlebg2'>Mandatory Reads</div>
<div class="tablepad"><span class='desc' ><font size="1">
<a href="http://z8.invisionfree.com/YourSite/index.php?showtopic=3&st=0">Rules and Guidelines</a><br>
</font><br><br>
</span></div></div>

<center>
<div class="titlebg2">C-Box </div>
<div class="tablepad"><span class='desc' >
<!-- BEGIN CBOX - http://www.cbox.ws -->
<!-- END CBOX -->
<br><br>
</span></div></div>

</center>

<div class='titlebg2'>Advertise Us! </div></b>
<div class="tablepad"><span class='desc'>
<img src="88x31banner.jpg">
<br>
<br><b><u>Listed At</b></u></b>
<marquee scrolldelay="151"><BR>
<a href="http://www.technochicks.org/forum" target="_blank"><img src="http://i113.photobucket.com/albums/n212/technochicks/technochicks_88px-33px_117.jpg" alt="TechnoChicks"></a>
 
</marquee><br>
</span></div></div>
<div class='titlebg2'>Credits </div>
<div class="tablepad"><span class='desc'>
Skin ©
<br>
Side-bar © <a href="http://iql.ancientmagicrpg.com/">Roswenth</a>

</span></div></div></small>
<br /></center>
</td>
<td height="100%" valign=top>
« Last Edit: April 10, 2007, 11:32:03 am by Roswenth » Logged
Crystalman
SMF For Free Full Member
*
Offline Offline

Posts: 154


Crystalman.EXE


View Profile WWW
« Reply #2 on: April 10, 2007, 11:40:11 pm »

Does it work on Server 1?

If not... is there a way it CAN work on Server 1?

I'd upgrade, but Server 1 has more options and customization as far as I see. I'm waiting until Server 2 forums have as much image/style/layout customizations.

I spent hours customizing the layout on my forum perfectly. Click the banner-thingy in my signature to see it.
« Last Edit: April 10, 2007, 11:42:22 pm by Crystalman » Logged



Buster Cannon Forums, and BCF-Comics.
Crasy
Global Moderator
*
Offline Offline

Posts: 3309


I Approve of this Message


View Profile WWW
« Reply #3 on: April 11, 2007, 02:14:33 pm »

Does it work on Server 1?

If not... is there a way it CAN work on Server 1?

I'd upgrade, but Server 1 has more options and customization as far as I see. I'm waiting until Server 2 forums have as much image/style/layout customizations.

I spent hours customizing the layout on my forum perfectly. Click the banner-thingy in my signature to see it.

I do think it works on Server 1
http://testcrasyandconfused.smfforfree.com/index.php (Phew, it's been a while since I used my server 1 forum)

It just needs some tweaking.
Logged

Kimmie
SMF For Free Master
*
Offline Offline

Posts: 2013


View Profile WWW
« Reply #4 on: April 11, 2007, 03:06:27 pm »

Does it work on Server 1?

If not... is there a way it CAN work on Server 1?

I'd upgrade, but Server 1 has more options and customization as far as I see. I'm waiting until Server 2 forums have as much image/style/layout customizations.

I spent hours customizing the layout on my forum perfectly. Click the banner-thingy in my signature to see it.

I do think it works on Server 1
http://testcrasyandconfused.smfforfree.com/index.php (Phew, it's been a while since I used my server 1 forum)

It just needs some tweaking.

I have played around with it a little The cbox area needs some tweaking - it doesnt work right for some reason. When I installed my cbox, you couldnt post in it  Grin. The only other downfall I see to the sidebar is that it moves your forum over to the right too far so you have to scroll to see some stuff. I tried dropping the width all the way down to 50 but then the sidebar doesnt look very good  Tongue
Logged

Crystalman
SMF For Free Full Member
*
Offline Offline

Posts: 154


Crystalman.EXE


View Profile WWW
« Reply #5 on: April 11, 2007, 08:30:07 pm »

What if you put it on the right side, instead of left? Then you can veiw the forum normally, but scroll over to veiw the bar.
Logged



Buster Cannon Forums, and BCF-Comics.
Kimmie
SMF For Free Master
*
Offline Offline

Posts: 2013


View Profile WWW
« Reply #6 on: April 11, 2007, 10:16:06 pm »

What if you put it on the right side, instead of left? Then you can veiw the forum normally, but scroll over to veiw the bar.

I thought about that but I dont see anywhere in the code to change it. Ive also tried changing the background color and it wont change either. Oh well, it was a good thought anyways..  Grin
« Last Edit: April 11, 2007, 10:24:59 pm by Kimmieb » Logged

simply sibyl
Global Moderator
*
Online Online

Posts: 8389



View Profile WWW
« Reply #7 on: April 12, 2007, 10:42:53 am »

Kimmie...  Im going to play around with this in a little bit here (about an hour or so) at my test site.
Will need to edit the css and that will solve the problem you mentioned with the forum not fitting in the right side.  It is just a padding issue and that is easily fixed.   If you look at the space style that I did you can see that the forum is on the right side and it works just fine that way Wink     
Logged

simply sibyl
Global Moderator
*
Online Online

Posts: 8389



View Profile WWW
« Reply #8 on: April 12, 2007, 12:13:07 pm »

What if you put it on the right side, instead of left? Then you can veiw the forum normally, but scroll over to veiw the bar.

I thought about that but I dont see anywhere in the code to change it. Ive also tried changing the background color and it wont change either. Oh well, it was a good thought anyways..  Grin

Kimster.. I changed the background color with no problem at all.   You can also just use your normal background.  Takes some code tweaking but it does work.

Also..  the cbox works fine.  I put it in the sidebar and am able to use it.. no problemo.
Only problem Im having at the moment is getting the forum situated as I want it on the right side.. will keep at it and let ya know on progress.       fixed
« Last Edit: April 12, 2007, 12:34:34 pm by simply sibyl » Logged

Kimmie
SMF For Free Master
*
Offline Offline

Posts: 2013


View Profile WWW
« Reply #9 on: April 12, 2007, 01:48:14 pm »

What if you put it on the right side, instead of left? Then you can veiw the forum normally, but scroll over to veiw the bar.

I thought about that but I dont see anywhere in the code to change it. Ive also tried changing the background color and it wont change either. Oh well, it was a good thought anyways..  Grin

Kimster.. I changed the background color with no problem at all.   You can also just use your normal background.  Takes some code tweaking but it does work.

Also..  the cbox works fine.  I put it in the sidebar and am able to use it.. no problemo.
Only problem Im having at the moment is getting the forum situated as I want it on the right side.. will keep at it and let ya know on progress.       fixed

Thanks for the info sibyl  Wink. I think, for the time being, I will stick with "not using the sidebar". My res is 800x600 and I dont like to have to scroll. Thats the reason I am mad as HE$% at AT&CRAP for changing the Bellsouth homepage. I had to scroll a mile to the right just to check my email.. Grin. Everything worked fine till those idiots took it over..  tickedoff 2funny
Logged

GreenCap
SMF For Free Member
*
Offline Offline

Posts: 65


what are you looking at?


View Profile WWW
« Reply #10 on: June 05, 2007, 09:29:33 pm »

hmm how do i move it to the right side of my forum, because it being on the left made my forum smaller... Sad
Logged

simply sibyl
Global Moderator
*
Online Online

Posts: 8389



View Profile WWW
« Reply #11 on: June 06, 2007, 10:04:18 am »

hmm how do i move it to the right side of my forum, because it being on the left made my forum smaller... Sad

Ive no time today to play with the code to move it to the right for you... but letting you know that it will still "make your forum smaller"  if you move it to the right.   It doesnt matter if the sidebar is on the left or the right... your forum HAS to be smaller as it only has the remaining space to fill up..
Logged

GreenCap
SMF For Free Member
*
Offline Offline

Posts: 65


what are you looking at?


View Profile WWW
« Reply #12 on: June 06, 2007, 02:16:48 pm »

hmm how do i move it to the right side of my forum, because it being on the left made my forum smaller... Sad

Ive no time today to play with the code to move it to the right for you... but letting you know that it will still "make your forum smaller"  if you move it to the right.   It doesnt matter if the sidebar is on the left or the right... your forum HAS to be smaller as it only has the remaining space to fill up..

oh ok...
Logged

Enigma
SMF For Free Member
*
Offline Offline

Posts: 78


Hello!


View Profile WWW
« Reply #13 on: June 19, 2007, 07:38:53 pm »

Forum Url: http://subspacewallpaper.smfforfree2.com
Sweet code I like it a lot. Thanks Smiley

And then the background went white ? very strange after being black.

Problem fixed by changing color in the css code:

.tablepad    { background-color:#FFFFFF; padding:6px; border:1px solid #000000; }

To this:
.tablepad    { background-color:#000000; padding:6px; border:1px solid #000000; }
« Last Edit: June 20, 2007, 07:50:08 pm by Enigma » Logged

NightEyes_AVR
SMF For Free Newbie
*
Offline Offline

Posts: 2


View Profile
« Reply #14 on: July 02, 2007, 08:58:49 am »

Forum Url: http://ericnotallowed.smfforfree2.com
Hey, I figured it out!

Ok, to move the side bar to the right hand side is easy.

Put this one in your header'

Code:
<table align=center valign=top>
<tr><td height="100%" valign=top>

and the rest of your side bar gets put in the footer.....

Code:
</td><td height="10%" valign=top>   </td><td width=150 valign=top>
<div class='titlebg2'><b><CENTER>Welcome!</CENTER></b></div><div class="tablepad" border='1'><span class='desc'><center>
<center><br><b></b><br>
<center> <font size="2"><br></center>
</span></div></div>

<div class='titlebg2'><b><CENTER>Weekly Awards</CENTER></b></div>
<div class="tablepad"><span class='desc'>
<img src="88x31banner.jpg">

<br></div></div>

<center>
<div class='titlebg2'><b>Chat Box</b></div>
<div class="tablepad"><span class='desc' >
<!-- BEGIN CBOX - http://www.cbox.ws -->

<!-- END CBOX -->
</span></div></div>

<center>
<div class='titlebg2'><b>Staff</b></div>
<div class="tablepad"><span class='desc' ></b>
You  may contact the staff through the private message link in their profiles.<br><br>
<b><u>Admins</b> </u><br>

<br><u><b>Moderators</u><br>

</span></div></div>
</center>

<div class='titlebg2'>Affiliates & Links </div>
<div class="tablepad"><span class='desc'>
<img src="88x31banner.jpg">
<b><u>Affiliates</b></u></b><BR>

<br></div></div>

<div class='titlebg2'><b>Credits</b></div>
<div class="tablepad"><span class='desc'>
Side-bar © <a href="http://iql.ancientmagicrpg.com/">Roswenth</a>
</span></div></div>
</br></center>
</td></tr></table>

Yeah, I edited it a little, mostly just customised the boxes to what I wanted them to say (I removed most of the site specific stuff from the example) The only other change I made was on the " tops" of each box, just to fit in with the forum a little better, I made them use tittlebg2 Cheesy

If you want an example you can look at my forum.

I'm pretty proud of this, mostly because I'm not a programmer Cheesy
Logged


Pages: [1] 2 3 4 ... 7
  Print  
 
Jump to:  

Powered by SMF 1.1.6 | SMF © 2006-2008, Simple Machines LLC
ServerBeach Coupon
Page created in 0.593 seconds with 18 queries.