skin-from-proboards [Jcink.com Wiki]

Converting Proboards skins to JFH

Forewarning

Just to be extremely clear, at this time there is no way to convert an entire Proboards forum into a JFH forum. Proboards does not offer users any means to acquire their database. This conversion process is purely for the skin.

Any skin resulting from this guide should look similar, but will not likely be the exact same. (This is because JFH has a lot more classes than a Proboards forum.) And as a result it may require additional tweaking.

WARNING - Codes created specifically for Proboards will not work on a JFH forum without extensive reworking. We unfortunately cannot provide support for transferring these codes as they were not designed to work with JFH. We cannot easily convert them to work on JFH either. It may be worthwhile to check what these codes do before and compare them to the featureset of JFH since some of these codes may be rendered useless by features already built into JFH. (For example a shop system.)

A lot of the Proboards skin creation section will end up affecting the same CSS class in JFH. For example, “Title Background Color” and “Title Text Color” from Proboards will both affect ”.maintitle” And it's entirely possible that ”.maintitle” will have multiple CSS elements inside it. EX- ”.maintitle {background-color: #000; font-color: #fff; background-image: url(linkgoeshere); text-align: center; etc…}”

Converting CSS

Converting a Proboards skin to a JFH skin requires that users be at least a bit familiar with CSS (though for the purposes of this guide, important CSS classes have been listed to help users transfer the bare minimum skin over.) For more info on CSS please check out W3school's CSS page.

Skin name

Skin Name: - This is set when you create the new skin. See here for how to create a skin and name it.

Logo and Font

Logo URL: - This is your board logo, in JFH it is configured in the Macros (it will be titled: “Board Logo”). You can use the simple edit link to display a box so you can just paste in the logo. Remember to go to the CSS for the skin and remove (or otherwise ensure that) #logostrip doesn't have “height:56px;” in it or else it may cause overlap issues in some browsers. You may also want to remove the “background-url();” part from the logostrip too so it doesn't display the default one repeatedly.

Font: - This is configured independently in almost any/every part of the CSS in JFH. So if you want to set it for everything you can put set the font in the body CSS element by placing:

font-family:arial;

You can also upload your own fonts to the filemanager and add them in with:

@font-face {font-family: customname; src: url('-the-link-to-your-font-here'); }

And then link them in just like any other font (except using the name you set in the “font-family” part of the @font-face CSS part.)

Forum Background

Background Color: This is set by the body CSS element using: “background-color: #000000;” Example:

body {background-color: #000000;} 
 	
**Background Image URL:** - This is set in the body CSS element with the code:
<code>background-image: url("linktoimagegoeshere");

Background Image Fixed: - This again is set in the body CSS element, using this code to make it fixed:

background-attachment: fixed;

Gradients

Auto Gradients: - JFH does not have automatic gradients… However you can create your own CSS based gradients using this site. You would then paste the CSS gradients you've created into .maintitle or .titlemedium (or any class you want them really…)

Gradient Height: - This would be set using the site linked above in the “Auto Gradients”. However you can force the gradient to be a set height by using: “height:50px;” Anywhere you set the gradients.

Forum text color

Text Color: - Text colour is configured in a number of different places in JFH… Each place can be set the same color or their own individual color.

#userlinks .titlemedium .row1 .row2 .row3 .row4 .desc .post1 .post2

To set the font colour, you would use:

font-color: #ffffff;

Links

Link Color: Link colour is set by a similar process to text colour. (Both use the “font-color: #fffff” CSS). But link colours are set by specifically looking for the attribute: “a:link” EX-

#submenu a:link {font-color: #ffffff;}

This means #submenu {font-color: #ffffff;} will only affect the words, while #submenu a:link {font-color: #A60000;} affects only the links.

Active Link Color: - Like the Link color, Active link is set by using “a:active”. EX-

#submenu a:active{ font-color: #990099; }

Visited Link Color: - Again like the link color, this is set using another atribute: “a:visited”. EX -

#submenu a:visited {font-color: #660066;}

Categories and titles

Title Background Color: - This is the .titlemedium background color… EX-

.titlemedium {background-color: #000;}

Title Text Color: - This is the .maintitle text colour. Uses same method to change font color as others.EX-

.titlemedium {font-color: #ffffff;}

Category Background Color: - On JFH, the category heading is the .maintitle…

Category Text Color: - .Maintitle again using the font-color CSS attribute.

News fader

News Title Background Color:, News Title Text Color:, News Background Color:, News Text Color: - these can all be safely ignored because JFH does not have a built in news fader section. You can add on in by adding it to the wrappers and name these CSS elements whatever you want on JFH. You can also use the webpage maker (shown here) to build one (among other things) then easily link it in with a simple include key in your wrappers.

Window Background

Window Background 1: - On JFH, this actually refers to several different locations… .row1 .row3 .post1 #ucpmenu

Window Background 2: - On JFH, this element refers to the .row2 .row4 .post2 #ucpcontent

All of these JFH CSS elements can use:

background-color: #000;

highlight colors

Board Highlight Color: - There is no normal place this gets added… but you can add it by putting:

td.row4:hover {background-color: #000;}

Thread Highlight Color: - This normally isn't added on JFH, but can be added by putting:

.post-normal td:hover {background-color: #000;}

Borders

Table Border Color: - In JFH, the table border is controlled by 2 seperate classes… .plainborder and .tableborder and in order to set the actual border color you need to use: “border: 1px solid #000;” EX-

.tableborder {border: 1px solid #000;}

Popup window colors

Background Color: Text Color: Title Background Color: Title Text Color:

These classes are generally not used in JFH because most popups that could occur already use existing classes. .maintitle, .titlemedium, .row2 are the most commonly used and thusly the popups will inherit all their looks as you configure the rest of the CSS.

Converting Header/Footers

For the most part it is best to not use the existing header/footer sections from the Proboards forum because most codes used on Proboards do not transfer over well. Like mentioned in the forewarning, they often are unnecessary due to JFH features. Other times it is because the code was created specifically for Proboards and references parts of Proboards specifically.

There are many codes available here that are available on JFH that replicate Proboards codes. In the event there is a code you want that has not been replicated, you can post about it in the Tech Talk section of the JFH support forum asking for help converting it… But bare in mind that not all codes can/will be converted and this is not a service for people to request conversions.

Though if you want to try using the codes you place them in the wrappers… in relevant header and footer sections of the JFH wrappers. (JFH wrappers are explained here.)

Converting Board Images

Proboards name JFH equivalent's location
Menu icons Macros
The Folder Macros
Smilies Administration -> Emoticons
Instant Messages Macros
Stars Macros (Pips) or Ranks
Message Icons Macros
Post Page Icons Not necessary - JFH uses Text buttons
Topic Icons No JFH equivalent
Profile Icons JFH has/only uses default set
 
skin-from-proboards.txt · Last modified: 2012/07/07 20:55 by viruszero