Announcements

Hello! We are going to make a simple skin today. But first, we’re going to learn some skinning lingo. It shouldn’t be too hard.

Part 1: Skinning with some images.

.Maintitle: This is one of the most important parts of the skin. This is what the .maintitle part of your CSS looks like:

The .maintitle is just what it sounds like; the main title! The part where the text says ‘Category’ is where the .maintitle is.

http://209.85.48.11/9428/72/upload/p9023620.png

.Titlemedium: The .titlemedium is also another important part of the skin. If you take a look at the reference picture, the .titlemedium will be the part that says Forum, Topics, Replies and Last Post Info. This is what the .titlemedium part looks like in your CSS.

#submenu: The #submenu is the part of the forum that shows the Portal link, the Help topics link, the Search page link, the Members list link, and the Calendar link.
http://209.85.48.11/9428/72/upload/p9023772.png
This is what the #submenu part looks like in your CSS.

#Userlinks: The #userlinks is the part of the forum that has the Logged In As, or Welcome, Visitor when you are logged out. It also has the Log Out link, and if you are an administrator or a moderator it has the Admin CP and/or the Mod CP link. Take a look at the second reference picture. This is what the #userlinks part of your CSS looks like

.Darkrow2: The .darkrow2 is a strip that comes below the forum title and description. Take a look at reference picture #1. It has no text on it. This is what the .darkrow2 part looks like on your CSS.

.Pformstrip: The .pformstrip is the strip that goes just beneath the .maintitle above the Board Statistics. It is the strip that has the 1 Users(s) Active in the Last 15 Minutes, the Today’s Birthdays, and the Board Statistics. This is what your .pformstrip part of your CSS will look like.

.Postlinksbar: The .postlinksbar is the bar comes below the .maintitle when you are viewing a topic. It is the part that has the “Attach New Poll | Track this topic | Email this topic | Print this Topic” on it.
http://209.85.48.11/9428/72/upload/p9031426.png


Now that we’ve learned some skinning lingo, let’s start skinning! Let’s start with step one.

Step 1: Register a board.

To register an Invisionfree (IF) board, visit this link and follow the instructions.
http://s11.invisionfree.com/in/register.php
You can make whatever forum name, username or password you want, but make sure you remember them. Have a valid email address so that if you forget your password you can retrieve it through your email. For the category, find the Graphics/Skins category. And after you have agreed to the Terms of Service (TOS) you can register your board. After you board is registered, make sure you save the link in your Favorites/Bookmarks.

Step 2: Starting to skin

So, you now registered an IF board! Log in to your forum and on the #userlinks you will find the Admin CP link. Click on that and type in your password to log into it. The ACP password will always be the one that you use to log into your board. Before we find your Style Sheet, find New Category on the side menu. After you have made a new category, create a new forum under that category. Make sure you have all of your forum permissions checked otherwise you won’t be able to see the forum.

Now you are ready to find your Style Sheet. Now, using the side menu, scroll down and find the Skinning & Styles section. Click on the Manage Style Sheets. That should look like this (look on the left side of the picture)
http://209.85.48.11/9428/72/upload/p9024311.png

Now you have found you Style Sheet! Now it’s time to start skinning. So, we are going to use this for our .maintitle,
http://209.85.48.11/9428/72/upload/p9023439.jpg
this for our .titlemedium, #userlinks, #submenu, .pformstrip and .postlinksbar
http://209.85.48.11/9428/72/upload/p9024407.png
And this for our .darkrow2.
http://209.85.48.11/9428/72/upload/p9024887.png

Again, this is going to be a very simple skin. Now, we will start with the .maintitle. Find the .maintitle spot in your CSS. Now, click on the image that we will be using for the .maintitle. Replace the old image URL for the .maintitle in your CSS

With the new URL for with out new .maintitle image. It should look like this

All together, this is what your .maintitle spot should look like.

Now, click ‘Edit CSS’, and take a look at your board. It looks pretty nice, doesn’t it! Now we’ll edit the .titlemedium. Since you’ve done the .maintitle, you should know what to do for the .titlemedium. Do the exact same thing that you did for the .maintitle for the .titlemedium, except using the second image link that I have provided. Edit your CSS and you will see the .titlemedium image. If you don’t see it, then make sure that your CSS looks like this

http://209.85.48.11/9428/72/upload/p9024731.png

Now we will go on to our .darkrow2. Now, you may notice that there is no URL spot for the .darkrow2. So, here’s what we do. Replace the old .darkrow2 spot with this

Now, replace the http:// part with the whole URL that we will be using for the .darkrow2. Now you have successfully done the .maintitle, .titlemedium and the .darkrow2! Now we’ll move on to the #userlinks. The #userlinks doesn’t have a URL spot either, so we’ll replace that with this.

Now, put in the new image code for the #userlinks.

Now we’ll do the #submenu. Replace the old #submenu code so that it looks like this

Now we’ll do the .pformstrip.

Replace the .pformstrip with this

And add the image link. And don’t forget to edit your CSS!

And now for the .postlinksbar. Just find the .postlinksbar and edit the URL with the correct image that we will be using.

Now we’ll move on.

Part 2: Editing the colors and borders

Now, here’s what we’ve done so far.

1: Added our own .maintitle
2: Added our own .titlemedium
3: Added our own .darkrow2
4: Added our own #userlinks
5: Added our own #submenu
6: Added our own .pformstrip
7: Added our own .postlinksbar.

Now we’ll learn some more lingo!

.row1: This is the spot that changes this part of the profile page
http://209.85.48.11/9428/72/upload/p9033560.png
This is what that part looks like in your CSS

.row2: This is the spot that changes these parts on the Index.
http://209.85.48.11/9428/72/upload/p9034007.png

.row3: Row3 changes the other part of the profile page: The one that says Posts Per Day, Total Communal posts, Join Date, ect. This is what it looks like in your CSS

.row4: See reference picture for .row2. This is what it looks like in your CSS

Now we are going to edit those colors to fit our skin.

We’ll start by going to .row2. Find the HEX code (Hexadecimal). The HEX code for .row2 looks like this #DFE6EF. We’re not going to take away the # part, we’re just going to edit the number. You can find examples of HEX codes here. http://www.w3schools.com/html/html_colors.asp

We are going to edit .row2 with the HEX code CCCCFF. It doesn’t matter if you have it in capital letters or not. So, replace the DFE6EF with CCCCFF. Now, edit your CSS. We’re not going to edit .row4 since it is already the color that we want it to be.

Now, we’re going to edit .row1. Find the HEX code and edit it with CCCCFF. Now, change the .row3 HEX code to 9999FF.

Now we are going to fix the background of the board. To do that, find the very beginning of your CSS and find this part

We are going to edit the background color. So, replace the FFF with CCCCFF and edit your CSS.

Now we are going to change the color of the Help Topics background. Find this in your CSS

And edit the HEX code with 9999FF and edit your CSS.

Now we are going to edit the Search Page. There is no place in your CSS to edit this, but you can use this code. I would suggest putting it at the very bottom of your CSS. Edit the parts that say White in the code to suite your fancy.

I’ve made mine like this

Now we are going to edit the Borders for our board. Find this part in your CSS

Now edit it with these colors

Now we’ll change the background of the Add Reply screen. First, make a new topic in your test forum. When you make a new topic, you will see that the Emoticons Box is blue, but all around it the rest of it is a lighter color. We are going to fix that. Find this part in your CSS

Now, change the HEX codes like this and edit your CSS.

Now we are going to center the board and make two border lines going down it at the same time using this code.

This code does not go in the Manage Style sheets, however. Go to the side menu and find the Manage Style Sheets link on the side. Right near that area you will find Board Wrappers. Find the Header and Body part of the Board Wrappers. Replace the old code in that box with the new one.
You will want to edit the HEX with your desired colors. I would suggest you using this code

Now, to complete this code, you will need a little bit more. This code goes in the box below the Header and Body and into the Footers part of your Board Wrappers.

Now we have our board centered. Now we are going to edit something in the PM inbox. I would suggest sending yourself a PM by clicking on your name and finding the Personal Message spot in your Profile. After you have sent the message, you will see a little Check Mark on the right side of the message when you are viewing it in your Inbox. Check the mark next to the PM that you sent yourself. You will see that it changes color slightly. We are going to change that. Find this part in your CSS

It will be located under your .darkrows. Now, edit the HEX codes to this

And edit your CSS. Try checking your message again. You will find that the colors are different!

Now, you may notice that the side menu for the Member’s Control Panel has the background color of white. We are going to change that. Find this part in your CSS

And change this part

To

And change this

To this

And edit your CSS. Now we are going to change the backgrounds of posts. Find this part in your CSS

It will be just above the .postlinksbar. Now change the colors to this

Now we will fix the quote and code boxes. Find this part in your CSS

First we will change the background color for both of them to 9999FF. Now edit your CSS.

Now find this part in your CSS

We are going to change that to this

Now we will add a copyright. A copyright can be very simple, just a line of text with your skin’s name, your name, and a link to where the skin creator came from. Here is a copyright, for example.

http://209.85.48.11/9428/72/upload/p9077601.png

Here is a different, fancier type of copyright

http://209.85.48.11/9428/72/upload/p9077822.png

Here is the code for the first one. Make sure you customize your copyright before you add it to your skin. You can also edit the link that leads to the IF Skin Zone, but you can also just leave that in there.

Do the same for the second copyright, and edit what is in caps. For the BOARD LINK, edit it with the link that you are putting the copyright on.

This copyright goes in the Board Wrapper between the first and second <% %> tags. Like this

Well, now you have successfully made your first skin! Now what you should start doing is making your own gradients (all of the parts that we skinned in Part 1) and adding them to your skin with your own colors.

About Editing other people’s skins

You can see how much work it takes to make a skin. Sometimes it can be easy, if it is a simple skin like the one that we just made, or if the person making the skin doesn’t want to take the time to make a good skin. But other skins can take a lot of time to make, if they are complicated or have fancy gradients, custom submenu ect. So, one thing that you cannot do is edit someone else’s skin. That means changing their skin’s colors and editing their gradients or replacing them with your own. Unless, of course, they specifically say that you can edit the skin that they have made, or if you get their complete permission FIRST.