jfb-skinning-creating [Jcink.com Wiki]

Creating a new skin

Creating a skin is a fairly easy thing to do, but it can be tricky for a beginner/someone unfamiliar with the Jcink Forum Admin Control Panel set up. Skin creation is done in 4 easy steps:

  1. Create the Wrappers (the layout of the forum).
  2. Create the StyleSheet (AKA CSS).
  3. Create the Macros (the buttons and banner).
  4. Then putting it all together in a new skin.

Making new Wrappers

  1. Click the: “Skins and Templates” header on the left side of the ACP. (If the “Skins and Templates” section has already been expanded then you can skip this step.)
  2. Click: “Board Wrappers”.
  3. Scroll to the bottom and beside where it states “Base the new wrapper on…” select the Wrapper set you want to use for the new ones. (If you're not sure, it may be a good idea to use the JFB default wrappers as the new base.)
  4. Then click the “Create new wrapper” button.
  5. In the page that loads, give it a unique name the wrapper in the box that states: “Wrapper Title”. (This will make it easier to identify if/when you have lots of wrappers later.)
  6. Then scroll to the bottom and click the “Create Wrapper” button.

Creating the new CSS

  1. Click the: “Skins and Templates” header on the left side of the ACP. (If the “Skins and Templates” section has already been expanded then you can skip this step.)
  2. Then click the: “Style sheets” link.
  3. Now, at the bottom, by: “Base new stylesheet on…” select the CSS that you want to use as the basis.
  4. Click: “Create new stylesheet” button.
  5. Name the new CSS. (It's a good idea to name it the same as the skin you're intending to use it with just to help keep things consistent.)
  6. Then click the “Create StyleSheet” button at the bottom of the page.

Duplicate the Macros

  1. Click the: “Skins and Templates” header on the left side of the ACP. (If the “Skins and Templates” section has already been expanded then you can skip this step.)
  2. Next (right below the “Skins and Templates” header) click “Macros”
  3. Scroll to the bottom and beside where it states “Base the new Macro set on… (Creates Copy)” select the macro set you want to use for the new ones. (If you're not sure, it may be a good idea to use the JFB default as the new base.)
  4. After you've selected your choice, click the “Create a New Macro Set” button.
  5. Now this has created a new macro set… but it will be called <the original macro set name> (copy). So click “Edit” beside it's name to be taken to the macro page.
  6. In the top box ( “Macro Set Title” ) change the name to match your skin.
  7. Then click the “Edit Macro Title”.

Note - The macros are different (compared to the Stylesheet and Wrapper) in that when you create a new Macro set, the system automatically names it ”<original macroset name>…(Copy)”. EX- “JFB Default Macro Set (Copy)”

Putting it all together

  1. Click the: “Skins and Templates” header on the left side of the ACP. (If the “Skins and Templates” section has already been expanded then you can skip this step.)
  2. Then click: “Manage skin sets”.
  3. Scroll down if necessary to see: “Base new skin set on…” Select the skin to be the basis of the new one.
  4. Then click the “Create new skin set” button.
  5. Now name the skin in the top box.
  6. OPTIONAL - You can set the skin to be hidden from members if you want by checking the “Yes” radio button next to “Hide from Members?”. (This is useful if you don't want members to see the skin while it's being worked on, or if you want the skin to be displayed for a specific section only.)
  7. OPTIONAL 2 - You can also set this skin as the default for your forum by setting: “Set as default skin set?” to “Yes”.
  8. In the respective dropdown menus, select the newly created Macros, Stylesheet and Wrappers. (See above for how to create them.)
  9. Now click the “Create skin set” button at the bottom. This creates the new skin with it's own CSS, Wrappers and Macros and if you've selected to make it the default and/or hidden, it will do those too.

That concludes how to create a new skin… But for a heads up, the newly created skin still looks identical to the one that it was created off of. You'll need to spend some time tinkering with it still to make it truly different.

 
jfb-skinning-creating.txt · Last modified: 2012/06/21 13:50 by viruszero