Create a New Skin

In order to create and new skin, you will first need to duplicate an existing skin using the Skin Selector. Here is how you do that.

Navigate to Screen Selector

Within the TemplaVoila Framework there are two different types of skins. Standard skins are skins that have been packaged as an extension. Custom skins are skins that reside in a directory you designate within the fileadmin directory (normally fileadmin/skins).

The easiest way to create a new skin is to copy an existing skin and then edit that copy. Following are instructions on how to copy a skin.

  1. On the left in the TYPO3 backend, click on template module.
  2. In the page tree click on the root page of the site.
  3. Toward the right select Info/Modify from the drop down menu.
  4. Then click on Edit the whole template record.

Copying Skin

  1. Once you are in the template record, click on the Skin Selector
  2. Decide which skin you want to copy and click the Copy Skin button next to it. At Busy Noggin we normally copy either the Busy Noggin White Wireframe or Busy Noggin T-Bone Starter when developing a new skin. Both these skins ship with the QuickSite and are also available in the TYPO3 Extension Repository. Once you hit the Copy Skin button a copy of that skin will be created in your custom skin directory (normally fileadmin/skins).
  3. You will now see both an original and a duplicate of the skin you copied. 

Important note to installations running on a Windows server: Due to technical issues you will not see the copy skin button and will need to manually copy your skin directory and place it in the custom skin directory.

Edit Skin Directory & Name

  1. If you look in the custom skin directory you will notice that the skin has been copied into it.
  2. It is recommended that you access the copied skin in the file system and change the name of its directory
  3. You should also change the name and description of the skin within info.txt inside the skin directory. By doing this you will insure that you do not confuse it with the original.

Select Skin

  1. Now, return to the skin selector.
  2. Notice the name has changed to what you put in info.txt.
  3. To apply the skin to the site you can click the Select Skin button next to your new skin.
  4. The new skin will now be applied to your site but you must first clear the cache.

At this point you can start modifying the files within the skin to get the look you need. Remember that when changing TypoScript within the skin you will need to clear the cache to see the changes.