Page 1 of 32

Pack Site Creation Help

Posted: Wed Jun 29, 2011 10:38 pm
by Grin
Welcome to the the Pack Site Creation Help topic, where users who own their own packs or plan to create one can find and/or request help when it comes to the creation of their pack site(s).

*Note: the following guide was written years ago and is most likely outdated.

Do you own a pack but find yourself lacking in coding, graphic design or site skinning experience, and/or familiarity with site features (ie- administration/moderation functions)? Are you an aspiring pack owner who has no idea where to begin when it comes to a pack site? Well then, you've come to the right the place! Here, you can request help in the above pack site-related categories.

Note: This topic's main purpose is to be a place where pack owners can request help with their pack sites. All of the information listed below is simply a courtesy and convenience for pack owners, and may serve as a guide of sorts. However, since this topic is new, it does not list all of the information that it could or will. Therefore, if you have any suggestions or comments on information that should be added, then please feel free to share them. Help is greatly welcomed to ensure better efficiency of this topic, especially in its beginning stages. Bear with us, and when I say us, I mean me.

Table of Contents
1. General Skinning Guide
2. Site Hosting Guide - since coding, features, etc. vary depending on the site host that you have chosen, they will be described for each host separately.
3.Coding - general code introduction
4. Critiques - request critique on your pack site
5. Helpers - lists all helpers of this topic and the applications to become a helper


  • ( is a helpful site resource site. Consider checking it out if you need anything for your site.)

    Images - Please keep copyrights in mind when you create your site's banner and graphics. Simply because your found an image on Google or another search engine does not mean it is free to use and modify. Consider reading the following topics for more information: and Also, here is a wolf stock image site that has free-use images: (special thanks to oxoDestinyoxo for sharing this site).

    Hexadecimal Codes - When coloring your forum, most hosts uses hexadecimal color codes just like WolfQuest does (such as font colors). Hexadecimal codes are six-letters/numbers that represent a unique color. While making a skin, I find it helpful to have a color chart open in another tab or window for reference. Here's one that I always use:
    You can fiddle around with the chart until you find the color you wish to use for some part of your forum. Simply copy the hexadecimal code and paste it wherever needed.

    Skinning DOs and DON'Ts
    Never use a blindingly bright or an extremely dark color scheme - As an example, try not to use all dark or all light colors in a skin. Everyone's computer screen varies in brightness, so what looks dark but readable to you may not appear at all on other computers. This could also apply to bright colors. I would also not advise you to use all bright colors for this reason as well. Not only that, but it looks childish and obnoxious. Even is your pack has a silly theme to it, using all the colors of the rainbow on your site is simply annoying and sore on the eyes. For instance, don't create a skin with colors such as
    this, this, or this. Not only are they very bright, but they don't correlate with one another. If you want a flowing, appealing skin, be smart with your color choices. Imagine your site as a second home. Would you paint one wall bright green, one red, two light blue, and then have black as accents? Well-- I certainly hope not, and no offense meant to those who may have a house like this.

    Also, light accents one dark colors isn't always a wise choice. For instance, red text on a black background may sound like a nice mix, but with such a dark background color, the red text may become hard to read. Instead, use milder colors - A skin that flows together, has a clear and somewhat simple scheme, and doesn't strain anyone's eyes is a definite plus.

    Here is a site that generates color swatches for you:
    This can be very helpful when choosing correlating colors that go well together. With a few clicks and twirls of the mouse, you can generate all or nearly all the colors for a skin.


    While colors can make a forum look appealing, graphics can often take websites to a whole new level. The term "graphics" refers to the pictures that appear on a site, from the background to the banner to smilies. For instance, refer back to the Arcana Imperii site example. Three images were used as the title of three of the collapsible categories. That prevented the site from resembling a solid block of different purples. It also captures the attention of viewers and, in some peoples' opinions, looks appealing. However, one thing that the site lacks is a banner.

    A banner is an image that appears near the top of your site. It should be one of the first things that a visitor of your site sees. In a sense, they are very important. If someone opened up the websites of two packs, one with pretty colors but no images whatsoever, and the other with an appealing, interesting image visible right when the page is done loading, which one would that person likely choose to search through? The one with the banner.

    The background of a site is important too. If you decide that you do not want a solid-colored background for your site and want an image instead, there are a few things to remember:
    1. Don't use a busy image that distracts viewers from the site itself.
    2. Don't use an image that repeats over and over again. For example, maybe you've found a pretty picture of a forest. Well, if you set it as you background and it repeats, it greatly downgrades the quality of your site's appearance. If you are dead-set on using an actual image as a site background, either make sure it is large enough to not repeat, or set it to no-repeat in your coding. However, if you want a pattern as the background, such as the one on the Arcana Imperii example site, note that it is a seamless pattern. That means that it repeats, but unlike a picture, it appears to be seamless and continuous. This is the link to the background image:
    3. Make sure the background correlates with the colors of your site and consider it part of your site's skin.

  • Customizing the coding of your site can greatly increase its aesthetic aspect. This includes html and css, which allow you to customize nearly all areas of your site, from the site background to the colors and style of links. In the past, I have noticed that many people around the web don't realize that finding codes for their sites is actually quite simple. For example, if I had a Proboards-hosted site, I would google "Proboards codes" and I could find a vast selection to fit my site needs. Now, for those of you who are new to coding probably don't know how to navigate/customize coding very well, which is one of the several reasons why this topic is created.

    If you have any coding problems or questions, please do not hesitate to post them here. I and other users who may have some experience in coding will do our best to help you.

Site Hosts

  • There are many forum and website hosts that will allow you to create a site for your pack for free. Although there are dozens of them out there, here is a list of some of the more popular ones that I myself may recommend:

    How do I know which one is right for my pack?
    Well, each of these web hosting sites have different features ranging from how they look to how you can customize the look and layout of the site/forum. Some are also easier to maintain for beginners. This guide to the basics of each of the above hosts will hopefully help you create a successful and organized site.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .W E chicken
(I listed this one first in this FAQ because I consider it the easiest to figure out.)

What are the main features that are unique for this web host? -
Not only does Webs have a very simple forum to set up for your pack, but it also allows you to create other pages and applications (also known as 'apps') besides your forum and members page. Here is a list of all apps that the site lets you implement on your site that you may find helpful: wrote:
  • Arcade - This app allows you to add games for your members to play and comment on.
    Blog - The blog lets members create their own blog to share photos, information, stories, etcetera. For site/pack owners, you could use this app to share recent updates, events, and contests with the members whenever needed. Each blog is archived, so a previous event won't ever be forgotten.
    Calendar - This helps you and your members keep track of upcoming events and meetings. The calendar app is featured in all web hosts though.
    FAQ - You can create your own faq page for you site.
    Forums - The forum is considered an app for Webs, so when you create your site, just know that.
    Guestbook - visitors can comment on your pack and it's site.
    Links - This is just a simple page where you can organize links to other sites such as your pack topic back on WolfQuest or possibly a chat box you have created for your pack.
    Meebo IM - Speaking of chat boxes, Webs allows you to add an Instant Messager chat app that appears along the bottom of the page. It's very simple to use and quite helpful. Whether you're posting on a role play thread, viewing current events on another page, or browsing another area of your pack site, members can chat with one another. It's only a two-on-two chat though, but it's one of my favorite features for Webs.
    Photo Gallery - The title pretty much explains it all. Members can upload photos in the Photo Gallery to share with one another.
    Testimonials - Although I haven't used it, a Testimonials page can be used by members to share their own comments about the pack. Why is this pack so unique or fun to be a part of? Well, visitors may want to know, and this app can solve that.
    Videos - If your pack has created a video, slide show, etcetera, you can post it in your Videos app. It's similar to the Photo Gallery, but for videos... obviously
    Wiki - I suppose this could be considered a more extensive version of an FAQ page. It's a knowledge base for your site that you, your members, and even visitors can edit or add on to. This is similar to Wikipedia, but solely for your site.
    Blank Page - Although the Blank Page feature isn't considered an app on Webs, I thought that it was just as important to mention. It allows you to create a custom page with ease, where you can even choose from a large variety of Add-ons, including one that allows you to use custom html on part of your page.

As you can see, this web host offers plenty for you to choose from.

How do I customize the look and layout of my site? -
While editing a page, there is a tab in the upper right of the screen labeled Templates. When you click on it, it allows you to select a design/look for your site out of the dozens that they offer. Some, however, are only available if you purchase a Premium site. However, once you choose a free template that they offer, you can easily customize the site page title, background, headers/footers, and it even lets you use advanced css for those of you who know how.

What are some of the downsides to using Webs? -
The main downsides to using Webs that I have encountered all apply to the forums. It doesn't let you customize the abilities/powers for Members and Moderators, which can make things difficult. For example, if a member posts, they will not be allowed to edit their own post after 10 minutes. This can become annoying, especially if a member finds a mistake they wish to fix or creates a topic that they need to update but can't. The epitome of it all is that forum control is very limited.

Customizing your forum is fairly limited as well. When you choose a template, it will affect the look of your entire site, and won't allow you to fully customize it like other hosts.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .P R O B O A R D S

FEATURES - Proboards is a personal favorite of mine. You can customize your forum head to toe, and they also have a support website that provides very speedy service for all of your coding/design needs. While Webs basically allows you to create a site with a bunch of apps, which includes a forum, Proboards is first and foremost a forum itself. In other words, it is very forum-centered. However, there are tons of support boards that provide free codes for you to use, including codes that allow you to create blank pages, virtual shops, and even add an arcade to your site. The possibilities seem nearly endless, and unlike Webs, you can create your own User Groups (admin, moderator, pack rankings, etc.) where you can assign them different site permissions and abilities. Members can edit their own posts too.

There are two sections to customizing your forum: coding and skinning.

. . . . . . . . . . . . . . .Coding
Proboards is such a popular and widely-used web host that there are support forums everywhere on the internet that range from helping forum owners with skins to coding assistance. Here is Proboard's official support forum:
Here is another code database that I have found very helpful as well:

The main thing everyone must know about Proboards is that it mainly relies on html/css to fully customize it. If you have intermediate experience or more, than I highly suggest using Proboards or Invision Free. For those of you that don't have any coding experience whatsoever, you'll still find customizing your forum to be a fairly simple task, although Invision Free would be easier. All you really need to know is where to post the codes that you have found and wish to add. All codes must go into your headers and footers.

To find the Headers and Footers that support forums will often refer to, go to Admin > Headers and Footers (under Customize Your Forum) > Now you must choose which header/footer you are required to edit.

Global Header/Footer: Editing your global headers and footers affect your entire forum, no matter what category or board you're in at the time.

Main Header/Footer: These only affect your home page. For example, if I added a table to the main header, it would only appear on my home page and nowhere else.

Others Header/Footers: If you only want your coding to appear on a certain board or category, than you choose the appropriate board/category's header/footer and edit it.


. . . . . . . . . . . . . . .Skinning

It's really simple to create or edit a skin, but it may take a while to get the exact color results you are looking for. Go to Admin > Skins/Forum Colors(under Customize Your Forum) > Now choose whether or not you want to create, modify, delete, choose your default skin, or customize the images of your forum.

Once you do, just copy the hex number from the chart(note:the '#' symbol isn't needed while skinning) and paste it into the desired area on the Create a Skin page. Please keep in mind that you can't preview unfinished skins, so first you must enter hex codes for each form area while creating your skin, and press the 'create' button at the bottom when you're finished.

Because your skin was just created and it isn't the Default skin, you must go to Profile > Modify Profile > Select Skin(below Account Preferences section). There, choose the skin you just created and then modify your profile. When you go to your home page, you will now see the skin you just made. If you aren't satisfied with it, just go back to Skins/Forum Colors and modify it. Once it's perfected and you would like to use it as your default instead of the Proboards Default, now go to Skins/Forum Colors > Choose Default Skin. There, just choose your skin and it will be set as the site's default so that new members and guests will see it too. The more appealing your site is, the more likely members may wish to join.

Proboards Viruses?

I have heard a few people say that their computers were infected with viruses from a Proboards forum that have caused things such as computer crashes. Well, I have joined, created, and visited Proboards sites for around 4 to 5 years on several computers with different web browsers and have never received any viruses or warnings from my computer that one of the forums I'm on is dangerous. If your computer crashes or something goes wrong while browsing one of these forums, than do not be so quick to blame it on the host. For example, my computer blacked out while I was browsing the WolfQuest forums about a month or two ago. Just because that occurred doesn't mean that all of WQ is contaminated with viruses and it's main purpose is to cause my computer to crash. Don't assume!

Support Sites - the main Proboards support site. You can find all sorts of resources and help here. - coding, skins, and more

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .I N V I S I O N - F R E E

What are the main features of Invision Free?
Although I'm not as familiar with Invision Free as I am with other web hosters such as Proboards or Webs, I have found it to be fairly similar to Proboards. There are a few, rather large differences though: the way you code the forum and all of the editing panels(admin, moderator, or profile).

How do I customize my forum?
After creating your site, go to Admin Panel > Sign In > Manage Style Sheets(under Skinning and Styles). There, you can change the colors, sizes, and look of every aspect of your forum, including fonts and your basic forum colors. Your Style Sheet is the css style sheet used to style your forum. Although it looks like a bunch of gibberish, it can be fairly easy to understand, especially since someone has created a guide to all of the css classes(these are like labels for your style sheets/coding so that you can keep track of what you're editing) and what they are assigned to.
Link to this guide: ... eecssguide

Let's take a look at the first labeled picture of the Index that it shows us. Viewing that labeled picture and comparing it to my site, I know that I want to change the color of the bottom of all my forum categories, whose css class is ".dark2". Now going into the Admin Panel and making my way to the Manage Style Sheets, I search for .dark2(a quick way to do this is to press CTRL and F at the same time, and then search for this class. Your computer should then highlight it on the screen for you). Once you find it, you should see the following tidbit for this class:
.darkrow2 { background-color: #000000; background-image: url(http://); color:#ED931C; }

(please note that the hex codes in the above code excerpt may vary from your default ones)

What formats and styles .dark2(aka the bottom of my forum categories) is the information between the brackets. Since I want the background color of it to switch from black(#000000) to my font color(#758585), I now have the following:
.darkrow2 { background-color: #758585; background-image: url(http://); color:#ED931C; }

See how I now changed the hex code after the part labeled background-color? Well, now instead of my font color, type in your own hexadecimal color code number instead of mine, and then click the Edit CSS button at the bottom to modify your code, and then go take a look at your forum index. You'll see that it has changed to that color. Woot, go you!

. . . . . . . . . . . . . . .Images
Now, you're probably wondering why there is an empty background image url in the above codes. Well, that is because I haven't set any images to appear below my categories. To change your images, just go to Images below the Skins and Styles area of the Admin Panel. There, you can customize your forum's images, including the logo, which is like the banner for your site. Just like Proboards, you can modify every single image on your site that are used as buttons, icons, etcetera.

More content shall be added about the Board Wrappers section.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .P H P B B
PhpBB isn't a website host, but a forum software. For instance, WolfQuest uses it for its forums. That statement should sort of give you a better understanding of how it looks and works. Unlike the other web hosting sites, phpBB actually needs its own host in order to work. There are plenty of these around the web, but here is a list of the most popular ones:

(I know there are quite a few more, but I'll just begin with these for now. If anyone else has any they would like me to add onto this list, feel free to share them on this thread.)

. . . . . . . . . . . . . . .Forumotion
This phpBB-powered web hosting site has many other names, partly because it allows you to choose one from around a hundred different domain urls while first creating your site. To explain what I'm talking about, just look at the highlighted part of the following picture:
When creating your site, you can choose one of these for the highlighted area. Whatever you choose doesn't affect your site though, only the URL.

The following excerpt on Forumotion is courtesy of Hidden Phoenix:

As many people know, Forumotion is one of the easiest and most popular options for creating pack websites. Unfortunately, not everyone is familiar with how to use it. This guide will guide you through the basics of setting your forum up with Forumotion - creating forums for users to post, setting permissions, creating usergroups, and adding people to said usergroups.

To start with, create your forum by going to this link - - and following the instructions. Now that it's created and activated, scroll down to the bottom of the page and click on Administration Panel. You will be brought to this page - ... npanel.png - The only thing we'll be using right now will be on the General tab, ignore everything else. You can skip the Configuration tab and go straight to Categories and Forums.

When you created your forum, you probably noticed a couple forums already in place. As you can see in this screenshot - ... forums.png - I deleted those, however you can keep them if you'd like. Click on the plus sign next to your forum's name to start creation. Once you've been brought to the creation page, a bunch of options will show up. I'm going to change the type of forum from Forum to Category.

After doing that, the page will re-load and you'll see this - ... tegory.png - So, first you'll want to name your category. I'm just going to name mine "One". Since this will be the forum's first category, you won't have to worry about what it's attached to, or positioned after. I'm also going to attach a forum to it. Here's everything set up - ... oryset.png - You can also add a description if you want, though I'll leave it blank since I'm the only one who will be using this forum. Click on Save to create your category.

After that, you'll be brought to a page with almost all the same options, however this page will create a forum attached to the category you made a minute ago. Everything can be left as it is, except the name. Can't have a blank name, now can we? Save the forum and skip the next page for now and then go back to your actual forum. You should now see the category and forum up in the actual forum. Depending on the skin your forum uses, it should look something like this - ... al/kdf.png - Repeat the process of forum/category creation until you have everything you want.

Click on the button that has both an X and a check on it, it should be next to the X button(don't click that, it'll delete the forum) The page it brings you to is very simple to use - simply click on the drop-down lists and set who can see or write on the forum. Select Members if you only want registered users to be able to see and/or use the forum, and All if you want everyone(including guests) to see and/or use it.

So, now that that's done, time to set up a couple usergroups. Click on Users and Groups, then click on Group Administration. You'll see two usergroups already made, leave them alone for now though and click Create new group. Add a name, description(if you want. I usually don't), select the moderator(I always select myself as the mod), the username colour, and the status. I usually set status to Closed Group. Regarding your group's name, it should be the name of the rank it will be for, such as Alpha or Hunter. Here's a screenshot of the usergroup I created - ... rgroup.png - Repeat this process for all the ranks your pack has - it'll make things easier if you know what rank someone is just by looking at their username colour.

And there you go, a basic guide for Forumotion. If you have any questions about either the simple or advanced admin panel, don't be afraid to ask Hidden Phoenix for help.

Re: Pack Site Creation Help

Posted: Wed Jun 29, 2011 10:47 pm
by Sambhur
It looks wonderful, Sethos, I may just apply. ;P

Re: Pack Site Creation Help

Posted: Wed Jun 29, 2011 10:50 pm
by Pallatsera
I just sent in my application!

Re: Pack Site Creation Help

Posted: Wed Jun 29, 2011 10:58 pm
by Grin
Thanks for applying! I accepted both of you, so I'll add you guys to the list of helpers right now.

Oh, and I forgot to add the Position part to the form you guys filled out. What position do you want, Pallatsera: coding, skinning, and/or graphics? Just want to make sure.

Re: Pack Site Creation Help

Posted: Wed Jun 29, 2011 11:01 pm
by Sambhur
Thank you, Sethos and welcome Pallatsera~ =D

Re: Pack Site Creation Help

Posted: Wed Jun 29, 2011 11:05 pm
by Rosemarrie
This^ is an amazing idea Sethos. This^ will definitely help lots of people. I'm sending in an application to be a critic, and a graphics designer. Need you examples of my graphics? o.O

Re: Pack Site Creation Help

Posted: Wed Jun 29, 2011 11:10 pm
by -Sheeba
Wow, what an amazing job you've done here, Seth! Everything looks fantastic, this topic should definitely help out a lot of users with their pack making :) I'd apply to help out myself, but I'm afraid I'm just too busy right now. Maybe in the future, though!

Re: Pack Site Creation Help

Posted: Wed Jun 29, 2011 11:16 pm
by Grin
Jewelz wrote:Thank you, Sethos and welcome Pallatsera~ =D
No problem.
Mikala wrote:This^ is an amazing idea Sethos. This^ will definitely help lots of people. I'm sending in an application to be a critic, and a graphics designer. Need you examples of my graphics? o.O
Thanks! I'm glad to hear that others think that it will be helpful, and I look forward to you applying.
-Sheeba wrote:Wow, what an amazing job you've done here, Seth! Everything looks fantastic, this topic should definitely help out a lot of users with their pack making I'd apply to help out myself, but I'm afraid I'm just too busy right now. Maybe in the future, though!
Thank you! And that's alright, I understand. I'd list myself for all of the helper positions, but I don't want to overflow myself either.

Re: Pack Site Creation Help

Posted: Wed Jun 29, 2011 11:17 pm
by candy712
nice job

trying out stiff: £

Re: Pack Site Creation Help

Posted: Wed Jun 29, 2011 11:26 pm
by Rosemarrie
I've sent in an application ♥
I'll work on making a website for my graphics C: I'll most likely use webs xD. I'm no good at proboard coding.
I could benefit from this myself .-.

Re: Pack Site Creation Help

Posted: Wed Jun 29, 2011 11:30 pm
by Grin
You don't have to make a website for your graphics if you don't want. A Deviantart account is nifty for such purposes. And yes, I guess you could, haha. That's good news to hear. My main worry after creating this was that it wouldn't be very helpful.

Re: Pack Site Creation Help

Posted: Wed Jun 29, 2011 11:33 pm
by Rosemarrie
I need to make another one FOR my graphics XD The link I gave you is of no value at all >:U
I might test out the coding on proboards. I've always wanted a website for a pack like those fancy ones :U

Re: Pack Site Creation Help

Posted: Wed Jun 29, 2011 11:35 pm
by Grin
Well, I'm here to help if you need assistance.

Re: Pack Site Creation Help

Posted: Thu Jun 30, 2011 2:19 am
by Masika
Very nice thread idea, Sethos! I can see that you've worked really hard on it, and, I'm sure that this will help plenty of users get a nice pack website and help the creation of it generally. Good luck!

Re: Pack Site Creation Help

Posted: Thu Jun 30, 2011 7:46 am
by Zethra
Great thread Sethos! It's good to see that you're willing to make websites for users' packs.
I would apply, but like Sheeba I'm a bit to busy for this right now - maybe later? Good luck with your 'team'!