Editor Experience & Back End Layout
When working with this framework, you will notice the back end layout of the content in the TemplaVoila page module looks different than you may be used to.
- Content is placed in tabs corresponding to page content areas which makes for much less scrolling when editing content.
- Color is used to group content logically (columns and modules) and to separate content (green is only used on title bars so content elements stand out).
- Overall, the visual noise an editor usually sees when editing a TemplaVoila page has been greatly reduced.
The following are examples of the the adjustments made by this framework to achieve its final back end layout (item #4).
Upgrades
Before upgrading TYPO3 or TemplaVoila, please check the note at the bottom of this page.
1024x768 Monitors
There is a note at the bottom of this page about using 1024x768 monitors.
Recommended Browsers for BE Editing
I recommend using Firefox (Mac or PC) or Safari (Mac) for editing the backend. You can use Internet Explorer but should review the notes about using Internet Explorer at the bottom of this page.
For the front-end of the site, you can code for all the browsers you wish to support.
BE Translations
It is possible to setup translated field labels for the back-end though the locallang.xml file in the core_templates directory.
- Click the image to enlarge
Example Page
The page we are using as an example looks like this on the front end. The page template has a feature area and two content areas. There is also a triple module group placed in the main content area.
- Click the image to enlarge
Standard Layout with No Adjustments
This is what the page looks like on the backend with no use of beLayout in the DS or adjustments to the TemplaVoila extension. It is what TemplaVoila provides by default.
- Click the image to enlarge
Using beLayout to Enhance
This is what the page looks like on the backend when using beLayout in the DS but no adjustments to the TemplaVoila extension.
The content areas are placed in tabs which makes for less clutter and less scrolling to reach content.
It is better than the previous example but still too much visual noise.
- Click the image to enlarge
Using beLayout and some Small Code Adjustments
In addition to using beLayout in the datastructure, I have now made a couple of small code adjustments.
- In the TYPO3 core, the image for the icon for a new element has been changed. This is just replacing the original image with another of the same name. There is no adjustment to php code.
- In the TemplaVoila extension, the file located at /typo3conf/ext/templavoila/mod1/index.php has been modified. Basically, inline styles were replaced with CSS classes and CSS classes were added in one or two places. This allows for more control of the styling through beLayout in the datastructure.
Compared to the first example, this version has much less visual noise, less scrolling while editing and gives more ability to style through CSS.
Since the CSS styles all reside in the datastructure, you can easily make changes to the color scheme to fit your tastes.
Due to the current legacy code in the TYPO3 core and TemplaVoila there are limits to how much you can style, but this approach does open up some possibilities
Please read the next section: Notes on Upgrades.
Notes on Upgrades
As seen above, most of the changes made to the back end by this framework are acomplished using beLayout in the datastructure. These are independent of the TYPO3 core and TemplaVoila extension and are not affected by upgrades.
However, as mentioned in the last example, to get the full backend look of this framework, a couple of small changes were made to the TYPO3 core and TemplaVoila extension. The framework can be used without making these changes but the backend will not be as clean. These changes have been made in the Busy Noggin QuickSite (if you need them, the original files are still there but appended with "_original").
What this means, of course, is that if TemplaVoila or the TYPO3 core is upgraded, these changes will need to be made to the upgraded versions.
Soon, I will put in feature requests for TemplaVoila to replace its inline styles with class styles and for other small enhancements which I believe could benefit all TemplaVoila users (whether or not they use this framework).
1024x768 Monitors
If you have a smaller monitor and have a page with columns or modules, you may find on the backend that the content in the columns may overlap. This is because there is not enough room to display all three frames of the TYPO3 backend and the columns.
If this is your experience, you can click on the vertical bar between the page tree and the content area. This will collapse the page tree frame and give enough room in the content area for the columns. When you are done editing you can click the bar again and the page tree will appear.
Notes on Internet Explorer
As mentioned earlier, I recommend using Firefox (Mac or PC) or Safari (Mac) for editing the backend. You can use Internet Explorer but I have not had much personal experience with its performance with this framework. I know IE7 butts the columns areas together on some of the column and module groups (front end is fine). It is still usable but annoying. Oddly enough, IE6 seems to behave itself.