Castaway!

[Jeri Cherry]

Alright, so first off, we'll need to start with the basics.

Do you know how to operate the admin panel? If not, here's a quick description of the functions I use the most for skinning.

[/b] - explains itself. this is where you enter coding. the main header/footer is for codes that appear only on your front main pages(home, admin, calender, members, new topics, search, maybe profile and messages)

Skin/Forum Colors - this is where you can submit your forum colors using hex codes, along with customized images. you can also create, delete, and modify skins.

Member Groups - this is where you can assign powers to various member groups, along with colors. i've found you can also bold, italic, and underline the member groups when they appear underneath a member username. you can also edit if they have stars or not, and how many.

Modify Rankings - this is similar to member groups, except members earn this rank by how many posts they have, and they can't have colors.[/ul]

Now, before we continue, I need to know what you know. What sorts of HTML do you know? Do you know any CSS or Javascript? Do you understand color themes and colors that go good together and ones that clash? What sort of codes from Proboards Support, Smangii, Studio Zero, etc. have you used, if any? Please be specific.[/blockquote][/size]

[Castaway]

I know the basic HTML <b> bold, same for italic and underline. I know how to break spaces and go to the next line, stuff like that. Colouring, sizing is also simple. But most other more advanced things like making tables and whatnot is way out there for me. Colour schemes. I've never in my life liked what I've made. My skins are terrible. I use lots of codes from PBS, and mostly the sidetables, drop down menu's and affiliates. I also use coding for sizing your board. I was never good at that though. Others gave me the coding, or did it for me.

[Jeri Cherry]

Okay, so we have some stuff to work on.

How about you make a test site and we'll use a banner I've made in the past, since it's way easier to make a skin with a banner first than vice versa. The banner I've chosen is: this older banner which could've been made better ;_;. Go ahead and download it onto your computer. If you have a image editor such as Gimp or Photoshop, open that up. If not, I recommend downloading Gimp.

What our goal for this lesson is to make a skin that you will feel proud of and one that looks good and is functional.

First, I want you to look at the colors of the skin. What sort of colors do you see? Does the image lean towards warm or cold colors? Remember, warm colors are reds, oranges, yellows, etc. and cool colors are blues, greens, purples, etc. Do you think they clash or go with each other? We'll be using some of these colors for the skin.

[Castaway]

Okay, the image is downloaded - by the way it's pretty - and I've noticed the colours are a lot colder. Black, dark blue, purple, and dark beige. Only a little light in the background where the beach is. I find all these colours are simple and easy to use. However, making the colours of the enitre forum go together for me is another story. I don't understand exactly how to get the hex codes for the colours. I would use gimp, but it takes a while to do that each time. xD

[Jeri Cherry]

The reason I was saying some image editor was so that you could use tool called Color Picker Tool. It looks like an eye drop. What it does, is when you click the image when using the tool, it will pick up a color from that part of the image. It would be useful to use, but it isn't necessary.

Did you make a test site? If so, could you show me the link?

You're right with the colors. Now, I want you to go to this site if you aren't using Gimp: link. I want you to look at the picture and find a color you like. Then, try to imitate this color on the hex color generator. When it satisfies you, I want you to show me the color's hex code(by copy and paste), which is a six digit number, that way I can see which one you chose. We'll use that as the main color for the skin.

If you use Gimp for this, use the color picker tool and pick a color from the skin. Hit the block below the tools that has that color. A window will open up, which shows a color generator. Find the text that says HTML Notation:, which will have a hex code that should be the hex code for the color you chose. Copy and paste that here.

After you do so, I want you to find another color and repeat the process. This color must complement the main color you chose, okay? For example, if you chose purple, you might want to consider a blue or green, even black or white. You basically want to choose a color that fits it's theme of cold. So, red and yellow are out of the question.

Now, you might be thinking, "Yellow goes great with purple, though!". That is true, but that's because it is the opposite color of it. Purple and yellow are like black and white. They go good together if chosen the right shades. However, we won't be using yellow just yet.

Do you have any questions so far?

[Castaway]

skinnertester.proboards.com


main colour: 3e2e1f

secondary colour: 6a5b54

Nope! I don't have any questions. I just wanted to let you know that I'm using GIMP. I don't have any others. xD

[Jeri Cherry]

Alright, so I like your color choice. They're nice, beige colors, and they go good together. However, I think the secondary color could have a little more orange/yellow/red color to make it fit better with the brown. Perhaps 6b4a35? Or would you like to stick to your original secondary?

Anyway, let's get started. First, I want you to put in main codes for the site. These main codes will be: forum resize(use pixels instead of percent), welcome table resize(use pixels and make sure it's the same width as the forum resize), remove "mark as read" bar, remove Forum Name | Topics | Posts..., Remove Topics & Posts Columns, Remove On/Off Icons, Remove Info Center Title Bar, fix text menus, and Remove Info center Icons. You must also find the simple codes for removing <<home>>, and welcome x, you have x messages.

Remember to put them in their appropriate header and board! If you can't find the code you're looking for on Proboards Support, head to Smangii's forum, Studio Zero, and Interocean Designs. They have the codes you want as well.

You see, the codes above are mandatory for me, and I want them to be mandatory with you as well. They help take some of the blandness of the default skin on proboards and can help you mold it into something.

Then, I want you to decide on at least ten codes you want to customize your skin with and tell me so we can go over them, okay? If you find more, then great, that's what we want. If you want to know which code does something, you can ask me as well if you don't know the name of it.

[Castaway]

Okay, I've done everything you said. I think. It looks a lot like CS now, and SM. So I'm happy. Now, I've always wanted the sidetables from Smangii. They seem to help a lot when I decorate. Because I'm not decorating my own, it doesn't matter. But you were going to make me a skin for mine. xD Anyway. I like having a nicer looking Info Center for forums, it makes it look a little more fancy. Double background, possibly called the 'border around forum?' is something nice as well. Anything else is a huge mind challenge for me. I don't even know how to use those really.

So here is a small list of what I enjoy on forums:

Border around
Sidetables
Message bar
Customized Profile: new design, like on here.
Money system
Maybe a warning bar?
Bigger Avatars
Catagory Tabs (big interest!)
Affiliate Table
Chat box.
I also like the stats: strength, speed, etc.
Anything else you like to use?

All the newer things I came up with just now. xD I forgot some

[Jeri Cherry]

When you use the border around forum code, make sure not to use the ones that are NOT by Smangii or Subdevo(from proboards). Theirs work much better, I've found, as one on proboards just takes your titlebg for the background color.

Those are a nice list of codes. I feel you should try getting use to the Enhanced Table Tags, and Money Hack. They also are good codes.

The code I love the most, is the Last Post/Topics relocater for boards. You can find it on WormoCodes. I'm in love with it. <3 I also enjoy this code, and this customized profile code you were talking about.

I recommend you create an affiliate table by yourself instead of using Proboards' premade one. All it takes is a table and some editing to do it. Try to make one on your skin by putting a table in the global footer, and edit it around then add in some site buttons to fill up space. You'll need static, marquee, and scrolling types.

Just in case you didn't know, you can use Javascript to stop your marquee by hovering.
Marquee you can make by going:

You don't need to add in the height, width, direction, or scrollamount(which changes the speed). You can just leave it without them and it'll work.

A scrolling box is very easy. All you have to do is make a div tag, and add a style template inside it like so:

What you put inside the style is CSS. It's very simple if you know CSS.

Anyways, I want you to experiment with your skin now. I want you to mix and match the codes we posted here together until you find a result you like. Remember, you don't have to put every code in. And, if you have questions on how to edit the editable parts in a code, ask away. Then, post back here so I can see what you made. We'll go from there afterward.

[Castaway]

I tryed looking for the border around, but I couldn't find one other than on proboards. I looked at the Enhanced Table tags, and I don't understand what they do? Money Hack I can probably do fine. But the affiliate table: I don't know how to even make a standard table, let alone add all the columns and whatnot for marquee and static and scrolling. And, do I have to put the codes in a specific order? Because sometimes they do. Thats how I mess up on coding most often. If you can teach me the main idea on how to build up a table, show me the meaning of Enhanced Table Tags and everything else, that'd be great. As soon as we get coding done, it's not far off is it? I can't wait to finish my first skin.

[Jeri Cherry]

The enhanced table tags let you make posting tables, among similar things. Do you know what I mean? That's why they're valuable. I think Pyrite has a thread about how to make a posting table that you should look at somewhere around this site.

Are you sure you can't find any border codes? I found my favorite border around forum code easily on InterOcean Designs, which I forgot to list. ^^;

Alright, we'll now need to go into making a table. Here is the basics for making one.

<table></table> tags creates the table, while <tr></tr> create columns(vertical, not horizontal), and <td></td> creates rows(horizontal). Those are all needed to create a table.

Now, there are a few elements you can put into those tags to edit the height/width, font-size, font-family, colors(including background colors/pictures), etc.

[/u] - this does what it implies--edits the width of your table. I recommend putting this in you <table> tags, unless you're going for more complicated tables with rows next to each other on the same column(in that case you'd ALSO add the width element to your <td> tags). BTW, you must put a width tag in every <td> tag you have, with the setting set to 100% IF you have only one <td> row per column.

height="heightherepx" - this is the same as width, except it edits the height of your table. I don't recommend using it, as I rarely do.

id="idhere" - I have a hard time explaining this as well, since it's somewhat similar to class.. Let's just say it's related to CSS when you create CSS on a style sheet.

class="classhere" - similar, but you can have this act as a background making for the preset colors you chose for you skin, like putting titlebg, windowbg, or bordercolor.

align="leftrightjustifyorcenterhere" - this aligns your text if you put it in the <td> tags.

style="css:here;" - this is for all the CSS goodies. c: I recommend you study up on some basic CSS. I used this site to help me learn CSS. it's very handy. once you know some, experiment with it. btw, you can also put a background to your tags if you use CSS.

colspan="numberhere" - its hard to explain this, but it basically fixes tables for when you have more than one <tr>/<td> tags below the tag you have. let's say you have one <tr> column and then another below it, but the one below has two <td> rows. You'd have to add a colspan to the <tr> to get it to cover both of the <td>'s, in some cases. as I said, hard to explain(took me days to figure out for a site I did).[/ul]

Alright, now I want you to make your own table using the information I gave you. Here is how you set a table up, just so you know the basic setup.

Simple, eh?

Yes, for some coding, one code may need to be above or below another to work. I can't remember which ones, so you'll have to find out for yourself.

Nope, we're not that faraway. After the coding, all there is to do is coloring the site and making it look nice. So get to work and mix and match codes on your test site, okay?[/blockquote]

[Jeri Cherry]

Bump.