Changes that you will be making to the skin will be with these items located within the skin's directory.
There is no specific order to make these changes and you will find yourself jumping back and forth between them. However, generally I do this:
You will find details on each of the constants and TypoScript objects you might want to edit within the Explanation of Code section
You will need to edit TypoScript in the skin to create proper HTML for header, footer, menus, etc. If you want, you can write simple TypoScript HTML objects as placeholders and then replace them later with the final TypoScript for menu and content generation later. This may let you get to the CSS coding more quickly.
The Pre and Post code objects are very important for making major changes to a page's structure without remapping page templates.
I use CSSEdit to code my CSS. It's live preview works very well in this situation. It allows you to open a URL, extract the CSS, make CSS changes and see how those changes look. No changes are made on the live site until you replace the active files with the extracted ones.
The TypoScript constants within the skin are used to supply the code with various values. These are used by TYPO3 to determine maximum image widths and column/module widths within various areas of the page.
We recommend writing your JavaScript with the jQuery library, but it is not required. Here is info you will need to know about the framework's use of JavaScript
The framework uses jQuery for the JavaScript needed to make the modules within a group equal in height. The extension includes the jQuery library by default. Developers may, at times, wish to include the jQuery library in a different manner. In such cases they can keep the extension from including jQuery with this line of TypoScript placed in the setup field of the root TypoScript template:
page.includeJS.tf_jquery >
Of course, they will need to include the library another way if they want equal height modules.
Also, by default, the extension runs jQuery in noConflict mode. This allows a developer to use additional JavaScript libraries or TYPO3 extensions using those libraries without conflict, but it also means that he cannot use the jQuery factory function when writing his jQuery code.
This means writing jQuery code like this:
jQuery('.myClass').hide();
NOT this:
$('.myClass').hide();
It is possible to unset this noConflict behavior with this line in the setup field of the root TypoScript template.
page.jsInline.1 >
However, as best practice, we strongly advise against this to avoid issues with other JavaScript.
If you want to eliminate the possibility of someone looking at the TypoScript in your installation, you should protect the directories that contain those files. You can use an .htaccess file, apache config or change the names to an unlikely combination of letters. It you do the last, be sure to adjust your file paths in the appropriate places.
Ideally, if you are coding a skin, you will be very skilled in front-end coding and in TypoScript. However, if you do not have TypoScript skills and you do not have the time to acquire them, then we suggest the following.