FanForce Board Customization FAQ [version 2.1]

FanForce Board Customization FAQ
version 2.1

---

[hl=yellow][b]Welcome to the FanForce Board Customization FAQ![/b][/hl][hr]
So, you're in charge of creating a new layout for your local FanForce's board. Welcome to the group :) Hopefully, this F.A.Q. will aide you as much as possible when designing the board. If you have any questions regarding this document, feel free to [link=http://boards.theforce.net/user.asp?usr=632251]drop me a private message[/link].

So, now that you've been given the task, why don't you take the time to get to know other web designers around the FanForce boards? The [link=http://boards.theforce.net/message.asp?topic=7004707&replies=22]FanForce Web Masters Discussion Thread[/link] is a great place to get to know people and ask questions related to graphic design (as well as other web-based needs). Also, be sure to check out the [link=http://boards.theforce.net/message.asp?topic=6338681&replies=31]List of customised FanForce forum schemes[/link] to help give you an idea of what other FanForces have designed for their boards.

[b]Need remote image hosting that is free?[/b]
[link=http://www.auctionwatch.com/]AuctionWatch[/link] offers free image hosting. You can upload files up to 350k for free and you can link to the images anywhere. This can save your FanForce from having to buy server space to host your images if the group isn't interested in a website.

And finally, if you need any help not mentioned here, feel free to ask for it at [link=http://boards.theforce.net/board.asp?brd=10021]FanForce Communications[/link]. :)

[hr][hl=yellow][b]Table of Contents[/b][/hl][hr]
Looking for something specific in this FAQ?

[i]Sections[/i]
[b]1 : Customizing Images for your FanForce Board[/b]
[b]2 : Board Custom Color Schemes[/b]
[b]3 : Uploading the new Customized Board[/b]
[b]4 : Frequently Asked Questions[/b]
[b]5 : Thanks To[/b]

[hr][hl=yellow][b]1 : Customizing Images for your FanForce Board[/b][/hl][hr]
Every FanForce chapter is allowed and has the capability of creating their own customized banners for their local FanForce board. The entire banner concept is created of 4 images. The main banner image (or the foreground image), the background image (that sits behind your foreground image), the curve image and the side image. Each of these have their own custom dimensions.

[i]Default Graphic Dimensions for the Banner System[/i]
[ul][li]Main banner image (foreground) - 764 x 110[/li][li]Main Background image - 764 x 110[/li][li]Curve image - 69 x 69[/li][li]Side Bar image - 32 x 465[/li][/ul] The only image that will keep the board in the same shape and not affect anything if you stretch the width out is the [i]Main Background Image[/i]. Remember, though - creating a wider image will create slow loading times for your board.

Here are examples of each, taken off of the current Jedi Council banners created by [link=http://boards.theforce.net/user.asp?usr=235934]Lord Mauly Mall[/link] --
[ul][li][link=http://www1.theforce.net/JC/images/Spring_2002/banner.jpg]Main banner image[/link][/li][li][link=http://www1.theforce.net/JC/images/Spring_2002/background.jpg]Main Background image[/link][/li][li][link=http://www1.theforce.net/JC/images/Spring_2002/curve.jpg]Curve image[/link][/li][li][link=http://www1.theforce.net/JC/images/Spring_2002/left_strip.jpg]Side Bar image[/link][/li][/ul]
A few other things to remember -- try testing out your board. You can do this by either saving your board to your hard drive (in Microsoft Internet Explorer, [i]File > Save As[/i]) and then editing the [i]image[/i] values in the code (see example 1). You could also have someone else do it for you and show you the example (If you'd like, I wouldn't mind doing it ~ just [link=http://boards.theforce.net/user.asp?usr=632251]PM me[/link]).

[ul][b][color=red]Example 1 - Editing the board code for images[/b][/color]
<td background="[b]URL of your Main Background Image goes here[/b]">
<img border=0 src="[b]URL of your other images go here[/b]" alt="TheForce.net Fanforce">
-

 

Nice! Very nice!!!

 

Impressive!

 

[not sarcasism] Good Job [/not sarcasism]

 

Thanks.
I figured since the other one needed too much editing and different version numbers to just start over and all...

Hopefully it's a lot more informative and helpful.


~?~ Carosel

 

Excellent stuff Riding!

 

Good job Carosel

 

Nice job, Carosel.

 

A generous upping to go on the first page again

 

And... yet another generous upping

 

Uppity up up

 

I'm having some troubles with the style sheet... this is what I did for my FF board, you know how you put the cursor above a link and it changes colour? Well, it really should change to the colour when you click on it but it doesn't. Especially on the main menu bar where te background is a dark brown and you can hardly see the links. I don't know what I'm doing wrong!

 

I just tried out your scheme and it changes from the reddish colour to a light blue when clicked on and then back to the color (or something along the lines of it) once you view the thread index page again.

As for the hover color, I need to add that to the next update of this FAQ...

To change the color when you hover over a link, scroll down on the source past the Javascript source right after the main style sheet. You'll see the following line:

<style>
a:hover { color: #000000}
</style>

All you have to do is change that color value and save the source again and you'll have a different hover color. Right now it is set as black and works perfectly fine for me

Another error with the colors not working right my be your browser: I know Opera doesn't work 100% right with the style sheets. I'm not too sure about Netscape, but the newest version of Internet Explorer works perfectly fine

Also... just fyi: The sidebar table color can also be changed to match the bottom color of your sidebar. Just change the following to match the color of your choice:

<TD bgcolor="#1A0D14" rowspan=3 valign=top><IMG border="0"
src="http://www.star-wars.co.nz/fanforce/banner/nz-left.gif"
alt="New Zealand"></td>

All that is is the source right before your sidebar.

Also... if you're talking about your headerbar on the top, one of the reasons your hover isn't working on the top is because of this:

<a class="MainMenuLink" href="http://www.fanforce.net/"><font color="#934646">FanForce Main</font></a>

The added font codes for the link override the style sheet. You'll need to take them out. If you want to change the color of the link, I suggest that you define either a new definition in the Style Sheet such as...

.AnnouncementLink {
background-color: white;font-family: verdana,arial, helvetica, sans-serif;font-weight: normal;font-size: 8pt;color: black;text-decoration: none;
}

Just define it from there. You can add things in there, but it will only be board specific. So, all you'd have to do for the headerbar links would be to change the <a span="namegohere"> property for your announcement links.

Hopefully that has helped clear everything up for you.

 

Okay, I've got a quick question.

Can a custom style-sheet be set up so that it's linked to from the forum rather than copy/pasted into the code, as seems to be the norm? This way one could update their style without bugging the guys with the mod powers too often, similar to the way the banners are done.

 

Hear, hear!

Plus it makes it easier to test small changes without having to bug people.

 

Can a custom style-sheet be set up so that it's linked to from the forum rather than copy/pasted into the code, as seems to be the norm? This way one could update their style without bugging the guys with the mod powers too often, similar to the way the banners are done.

I'll look into that asap.
From a technical standpoint, it should be able to. I'll check with our tech admin and see if it's possible with the way the boards are set up.

 

I don't see why it couldn't. But the software might not let us.

 

I just spoke with Kadue and it is possible.

I'll edit this post with exactly how it works in a few moments.

Okay, here's the edit.
First, you'll need to create a CSS file. That doesn't take much work. For an template, you can use this JC CSS template. You'll need to upload your finished one to the same place you have your images stored or somewhere along those lines. Somewhere where it will always be accessable.

Again, for the fact that not every webserver is always up, make sure that the CSS on the board itself is still there. If it isn't and the one you link to is down, well, it won't be pretty (actually, it'll look like this).

And then, of course, right after your CSS on the board page, all you need to do is link to the CSS. To do so, just use this line..

<link href="http://24.74.46.61/~jcarchive/sourcetest/jc-css.css" rel="stylesheet" type="text/css">

Just change the URL to your CSS and you're set. All you need from there is an admin to change your board to edit this in and you're done.

Edit: This entire FAQ will get an overhaul soon, too.

 

That's excellent news Riding, thanks for the fast work.

 

No problem.

Thanks goes out to Kadue for giving me the information and heads up.

 

There is an icon the JC uses and Bowling Green FanForce was wondering if it was legal to use them in out banner.

 

What do you mean? The Rebel symbol?
If it's illegal, 99% of the banner's pieces on the JC forums as a whole must be illegal..

 

Up.

 

Thank you Motgaine

SO I am having problems following a tutorial on making banners. Anyone have any helpfull advice.

 

Up, up and away!