Basic Setup and Image Border

Basic Setup

When I'm working with things I don't like to with a blank canvas. The same goes with a database and forum, if there isn't any data or anything posted then it makes it harder to look at the end picture. I'm not going to make a bunch of Articles and Posts just yet, but I do need to at least create some forum structure.



Create Categories and Forums

Now at least my forum has some form. It makes it easier to see how things work together when I start changing colors, images and the overall look. However if you look at the base IP.Content page you'll notice it has some content, but when it comes to the actual look it doesn't exactly match the forums at all.




Backing Up Files

Now I want to start shaping things to look at least somewhat similar. Since I will be using the IPB Wrapper, the easiest place to start with is IP.Board. I'm going to export out the default IP.Board skin along with the images and import them back in as a new skin. You want to do this for 2 reasons.

1) If you make any mistakes, it makes it easy to revert back. Also when moving forward if you accidentally removed something, but later on decided you wanted it back then it makes it easy to go through the old code to find what you removed.

2) It is my control. It is hard to see how far you've gone without knowing where you started from. With a simple drop down menu I can easily change templates, refresh my screen and see what the original was.

I'm not going to go into how to export or import a IP.Board skin unless someone really needs it. I'm going to assume that as a user you have at least some basic knowledge of how to do that. If you don't, then honestly this might not be a project you want to undertake. To do anything with even Wordpress, Joomla and even IP.Board you do have to have at least a basic understanding of HTML and CSS.


Adding a Border

Now that I've created a sandbox skin template I can work with, based off the default the first thing I'm doing to do is add a border. I'm not sure what it is, but I tend to not like 100% width web pages. I think it has to do with I like things neatly set up so I can organize my desktop. I use multiple monitors and web browsers, with multiple windows and other programs open. Being able to have things display nicely and knowing the boundaries makes it easier for me. Not to mention ever been to a page that looks fine at 100%, full screen and then you shrink your browser to standard resolution of 1024px and suddenly everything is on top of each other. They didn't set their 'div' up properly to adjust, images are overlapping or hanging over their borders. To me it feels sloppy and lazy. I like to have a set width to my page and even though I have 1920x1080 monitors, I'm rarely looking at anything full screen.

For comfortableness and because I know not everyone doesn't have 24"+ widescreen monitors yet, I tend to stick to the basic comfortable resolution of 1024x800.

First thing I'm going to do is set my IP.Board to a set width and using some images create a border around my forums. The first part of that is putting in the correct HTML code for it.

ACP -> Look & Feel -> Manage Templates & CSS
-- globalTemplate

Creating a border is actually pretty simple. You essentially have 2 basic parts the Header and Footer which surround your content.

Header:

<table class="bd1" cellspacing="0" cellpadding="0" align="center"><tr>
<td class="border_tl" width="20" height="24" style="padding:0"></td>
<td class="border_tm" style="padding:0"></td>
<td class="border_tr" style="padding:0"></td>
</tr></table>
<table class="bd2" cellspacing="0" cellpadding="0" align="center"><tr>
<td class="border_ml" width="20" style="padding:0"></td>
<td class="content_bg">

The Header code will go just after the < body id='ipboard_body'> and just before < div id='ipbwrapper' >

Footer:

</td>
<td class="border_mr" width="20" style="padding:0"></td>
</tr></table>
<table class="bd1" cellspacing="0" cellpadding="0" align="center"><tr>
<td class="border_bl" width="20" height="24" style="padding:0"></td>
<td class="border_bm" style="padding:0"></td>
<td class="border_br" style="padding:0"></td>
</tr></table>

The Footer goes just after the last < /div > tag but just before the closing tag for < /body >.

Now we have the basic HTML for the border. Now we have to add in the correct CSS for them and set width for the forum within the ipbwrapper.

ACP -> Look & Feel -> Manage Templates & CSS
- CSS
-- ipb_styles.css

#ipbwrapper {
	width: 951px;
}

table.bd1 {
	border: 0px;
	width: 991px;
}

table.bd2 {
	border: 0px;
	width: 991px;
}

.content_bg {
	padding: 0px;
}

.border_tl {
	background:url(http://community.invisionpower.com/public/style_images/master/border_topleft.png) no-repeat left;
	border: 0px;
	width:20px;
	height:24px;
}

.border_tm {
	background:url(http://community.invisionpower.com/public/style_images/master/border_topmiddle.png) repeat-x;
	border: 0px;
	height:24px;
}

.border_tr {
	background:url(http://community.invisionpower.com/public/style_images/master/border_topright.png) no-repeat right;
	border: 0px;
	width:20px;
	height:24px;
}

.border_ml {
	background:url(http://community.invisionpower.com/public/style_images/master/border_mleft.png) repeat-y;
	border: 0px;
	width:20px;
}

.border_mr {
	background:url(http://community.invisionpower.com/public/style_images/master/border_mright.png) repeat-y;
	border: 0px;
	background-color:#5D6471;
	width:20px;
}

.border_bl {
	background:url(http://community.invisionpower.com/public/style_images/master/border_bottomleft.png) no-repeat left;
	border: 0px;
	width:20px;
	height:24px;
}

.border_bm {
	background:url(http://community.invisionpower.com/public/style_images/master/border_bottommiddle.png) repeat-x;
	border: 0px;
	height:24px;
}

.border_br {
	background:url(http://community.invisionpower.com/public/style_images/master/border_bottomright.png) no-repeat right;
	border: 0px;
	width:20px;
	height:24px;
}

Now that I'm done you can see the finished product.