skinning-tips [Jcink.com Wiki]

Skin Customization Tips

When you are creating/customizing a skin (either your first or beyond), here are some useful tips to keep in mind. They are broken up into sections according to what type of tips they are. (EX- ones dealing solely with CSS.)

CSS

Widths

When setting width for your forum, keep in mind that (according to wikipedia) the majority of internet users do not have 1920×1080 sized screens. The most common are 1366×768 (19.1%), 1024×768 (18.7%) and 1280×800 (13%) so if you set your widths for 1440×900 because that's what you use, you will cause most internet users to have to scroll a lot to read your page. (Which can be a huge turn off to them and may make them quickly leave your forum.)

Similarly, take into account forum height. Setting a fixed height of 900 means that for a large chunk of internet users content on your forum will be invisible, cut off or unusable.

Note that when you set a width for an element (ex- IPBwrapper), you should set a slightly smaller width for elements that it contains (EX- forumwrapper). (Setting the same size or larger will cause stretching.)

Like in this case, forumwrapper is inside IPBwrapper. So having forumwrapper set to a width of 1000px while IPBwrapper is only 950px will cause IPBwrapper to stretch out.

<div id="IPBwrapper">
  <div id="forumwrapper">
    some more code here...
  </div>
</div>

Colours

When picking colours, avoid colours that clash horribly. Neon green on bright red can actually physically hurt people's eyes if they have sensitivity to bright colours. Having colour schemes like that also makes it extremely difficult to read or stay on site for any length of time.

When picking colours for your skin make sure that you have some contrast between them. A light blue and a lighter blue might look very nice together… But if you can't read the text because the blues blend together too well then people aren't going to stick around. This goes for dark themes especially, black backgrounds with dark-grey text can be extremely difficult to read.

To avoid these issues try picking a light colour and a dark colour then testing them together. You can also use sites like Colour Scheme Designer to come up with groups of complimentary colours to use in your skins.

Text

Given CSS3's capability to link in existing fonts and apply them, this opens up a wide range of customization options. However, make sure that fonts you are using can actually be read. Different fonts have different sizes (even if you place size 12 on it, the font might still be tiny and hard to read, so you may need to bump it up to size 25 or 30). Fonts that are cursive can be notoriously hard to read, even at larger sizes.

CSS also gives the option to alter line heights and character spacing. When playing with these be careful to prevent the text from running together and becoming utterly illegible. (Or in the case of links, may cause links to be that much harder to click if they shrink or grow when you try to click them.)

Use comments

Using the ability to add comments to a CSS while you're working on it can be a great benefit. This allows you to store notes for yourself. (This can be used to remind you which classes do what or go where. Or to store extra hex codes for colours that might look good in a section. Or alternate colours to try.)

To add a comment to CSS put this:

/*   


*/

Then type inside the asterisks. Anything within that section will be ignored by browsers viewing that skin.

Wrappers

Use webpages

If you have a lot of code, you can use the webpage maker to store large section of codes then use include keys to call them.

You can also use the webpage maker to create sidebars (or components of a sidebar, ex- a web page for a welcome box, a webpage for chatbox, a webpage for quick links that can all then be added into the skin with simple include keys like <% chatbox %> or <% quicklink %>) that can easily be added in. (More on that here.) This allows for quick and easy customization of those components if/when they're used in multiple places (like multiple skins).

Avoid customizing in HTML

Avoid using lines in your HTML like:

 <table width="790" border="1" cellspacing="1" cellpadding="4"> 

You could move that to CSS by using div tags or ids (like for tables you'd use <table id=””>) instead to increase space in your wrappers (and place all the customization in one section).

Avoid full urls for on-site links

When linking to parts of your site in your wrappers, instead of putting:

<a href="http://forum.jcink.com/index.php?showforum=4">General Support</a>

Use:

<a href="index.php?showforum=4">General Support</a>

This way the forum will automatically fill in the domain part on it's own. So this way people who use the b1.jcink.com links will see b1.jcink.com links while people who use jfbs.net will see jfbs.net links. This is useful if you have multiple domains that people are using so they don't have to keep logged into all domains.

Macros

CSS Buttons

One amazing trick for easy creating buttons (instead of having to use an image editor to create all those macros individually, like a button for “Add Reply” and another for “New Topic” and etc…) is to create several CSS classes like:

.large-button {} /* This is for larger buttons like "Add reply"*/
.small-button {} /* This is for those small buttons like "MSN" or "Edit" */
.delete-button {} /* this is for your delete post button if you want to style it differently */

And place that in the CSS for the skin you want to use this trick on.

Then go to the Macros for that skin and use the advanced edit to change the macro's contents to be like this (in this example's case, the “Add Reply” macro):

<div class="large-button">Add Reply</div>

This will create a style for your add reply button (or by changing where it says “Add Reply” in the div tags to whatever button you want) without needing to create an image specifically for it.

You can then use the .large-button class for other buttons (like the “New Topic” button or “New Poll” button) without having to create an image specifically for them. This way all buttons (using the same class) can share similar appearance and can easily be tweaked without having to remake every image like if you had created the macro as an image.

General

These are tips that can be applied to multiple sections of skin customization.

Use your filemanager

Upload all your images to your file manager so they're right on your forum. This way you don't have to worry about your image host deleting an image (which Photobucket, tinypic and imageshack are known to do). Plus using your file manager offers a minor speed increase because it doesn't have to call from as many external servers. (Since images stored by various image hosts may be spread around several servers which can increase loading times while each server responds.)

You can also upload javascript files (.js) and link them in by using:

<script type='text/javascript' src='urltoyourfile.js'></script>

if you don't want to use your webpage maker to store all your javascript.

Regular Backups

If you're working on a skin, be sure to take regular copies of your CSS (or wrappers if that's what you're working on) at each major change you make. (Like if you start with one colour, but then you decide you want to remove it and place another in. Be sure to take a backup before replacing that colour just in case you decide that this new colour doesn't look right. Or so that you can easily find that first colour again in case you want to use it for something else on that same skin.)

 
skinning-tips.txt · Last modified: 2013/04/15 14:48 by viruszero