Welcome Guest [Log In] [Register]
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
InvisionFree Skinning FAQ; Common code modification questions
Topic Started: Jun 11 2003, 03:30 PM (41,920 Views)
Nir
Member Avatar
never far
 *   *   *   *   *   *   *  
InvisionFree Skinning FAQ

How can I make my board look good and attractive?
One great way to attract new members to your board is having a good and original look. A board skin should be easy to read, clear, and good looking. The skin of your board should match the mood of your board. For example, if you have a nature board you might have a skin showing shades of green, if you have a Matrix board you might have a dark background light green and black skin, etc. The most important thing about a skin though is to make it easy to the eyes, so you don’t have to hurt your eyes just to read a post.

As discussed in Version 1 of the skinning FAQ, using images and CSS code to make a skin is not a bad thing. A different look can be good, and trying to match your graphics with your board skin is a must for a good look.

When adding graphics to your board try keeping the size of them to a minimum and unless you must have the graphics, don’t use them. When editing your CSS you can always use image backgrounds and almost everyone does especially for the categories. These images are mostly fine to use because of their small size. Category images should be 1 pixel width and 30 pixels high for the best loading time. Even when adding background images be sure to change the background color as well so if the image does not load fast or does not load at all you still have a good look to your board.

---------------------------------------------------

What can I do to make sure my users check our the latest news and forum announcements?
Start off by enabling your news link to show up on your forum. Do this by following these steps:
1. Log on to your Admin CP
2. On your left look for Board Settings, and click on News Set-up.
3. Click on the down arrow and select the forum in which announcements are located in
4. Select yes for; Show a 'Latest News' link on the board index?
5. Click on the Submit Changes button.

This is a small link but you might also want an announcement box. Place the following code in your Board Wrappers, Admin CP -> Board Wrappers for an announcement box. For details on how the Board Wrappers Page works see the first Skinning FAQs.

Quote:
 
<center>
<table width="95%" border="0" align="center" cellspacing="1" cellpadding="0" bgcolor="#345487">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="3" class="maintitle">
<tr>
<td class="maintitle"><img src="http://209.85.62.23/style_images/1/nav_m.gif" border="0" alt="" width="8" height="8"></td>
<td width="100%" class="maintitle">

Some title for it

</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="row1">
<table width="100%" border="0" cellspacing="0" cellpadding="6">
<tr>
<td width="100%" valign="middle" class="row1">

Whatever you want here

</td>
</tr>
</table>
</td>
</tr>
</table>
</center>


The red is the title and the blue is what will go in the box itself. This table will always match your skin because it uses classes form the CSS code.
Read the following question and answer for information on how to edit your text:

---------------------------------------------------

How can I edit my text on my board?
I want to edit my text in places like the forum description, the forum rules, announcements boxes and more.[/color]

Lets first look at the easy style commands in html. They will take form like any other html command:
<command pre-fix>text</command suffix>
Anyway lets look at some style commands:
Code:
 
<b>text</b>
-will make your text bold
Code:
 
<i>text</i>
will make your text italic
Code:
 
<u>text</u>
will make your text underlined
Code:
 
<strike>text</strike>
will make your text with a line in the middle
Code:
 
<span style='color: green; filter:glow(color=red, strength=5);’>text</span>
will give your text a glowing effect, change red to any color you want, red is the glowing color. Change green to what ever you want, green is the text color and you can also change strength to what ever number you want.
Some more text editing:
Code:
 
<br />
a new line
Code:
 
<a href="link url">link text</a>
a hyperlink
Code:
 
<center>text</center>
centers your text
Code:
 
<span style="font-size: 11px">text</span>

Changes the font size. Increase/decrease the figure to adjust the size of the text to your requirements.

---------------------------------------------------

How can I change my background color?
see this topic for answer

---------------------------------------------------

How can I make a titled background image?
see this topic for answer

---------------------------------------------------

How can I edit the area next to my logo?
see this topic for answer

---------------------------------------------------

What are the different ways of editing backgrounds through CSS?
To make the background transparent:
Code: HTML
 
.something { background: transparent }

To make the background a color:
Code: HTML
 
.headlogo { background-color: blue }

blue can be changed to a hex color or a word color
To make a background image I recommend on doing the following:
Code: HTML
 
.headlogo { background-color: blue; background-image: url(image url); }

This code makes it so if the image does not load the color shows, remember to change blue to the color you want and image URL to the image’s URL

---------------------------------------------------

I have blue borders around the copyright that does not change with the CSS, can they be changed?
Yes, see this topic for an answer.

---------------------------------------------------

My board wrappers are becoming very confusing, how can I add notes for my self and how can I separate code?
Comment tags is what you need. Making one is very simple, see the following for an example:
Code: HTML
 
<!--------------The following code will do something------------------->

remember, only change the text and the amount of dashes doe not matter as long as you have them.

---------------------------------------------------

I want a good looking affiliate box, how can I make one?
Visit this topic for a range of codes that should give you just what you need.

---------------------------------------------------

How can I make a scroll-bar which will match my skin?
Yes, andthis page will tell you how.

---------------------------------------------------

How can I make a marquee that goes from side to side?
You can do this by adding code to your board wrappers.

How can I make a vertical marquee? By modifying the code, you can achieve this as well.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Troubleshooting and Problem Solving · Next Topic »
Add Reply