CHAPTER 12: CREATING A THEME

EnterMedia was designed with the intention of providing a highly customizable web interface for our users.  To this end, the majority of html layout pages are in one standard location; the Themes folder.  Using the OpenEdit platform's fall-back mechanism, allows users to override layout files with their own customized versions, without having to recreate the layout of the entire system.  Once a new layout has been created, it is very easy for an administrator to switch to a desired layout.  

 

Creating a New Theme

To create your own custom theme use the following walkthrough as a guide.  All file operations will be done through the OpenEdit File Manager, for more information on the File Manager see chapter 11.

1. Create the theme folder structure

  - Create a new folder in "themes".  Name it whatever you want to call your new theme.

   

  - In this case my theme will be called "minimalist"

   

2. Configure the new theme

 

  - To use your new theme add a file called "_site.xconf" to your theme folder which should contain:

     <page>
        <property name="themename">Minimalist</property>
        <property name="themeprefix">/themes/minimalist</property>

        <property name="fallbackdirectory">/WEB-INF/base/themes/darktabs</property>
    </page>

 

  - Our theme needs a "themename" set so that it can be selected from the GUI.  Should be set to whatever you want to show up in the GUI for your theme.

 

  - The base code uses the "themeprefix" setting to display the proper theme.  Should be set to "/themes/<new theme name>"

 

  - The "fallbackdirectory" property is used to set a fallback theme.  You can think of the fall-back theme as the theme you are extending.  The beauty of being able to extend a theme is that you only have to create files you want to customize.  Any files not found in your customized theme directory will automatically be found the the specified fall-back directory.

 

  - I'm going to base my theme on the darktabs theme.  I like the tabs in darktabs, but it has a little too much going on to mesh with the rest of my site.  I'm going to use darktabs as my base so I will use it as my fall-back theme.

 

3. Verify your new theme is ready for customization

 

  - Click on the "Settings" link in your EnterMedia site.

 

  - The "Change Theme" drop down should now contain you new theme.  If the new theme is not visible verify that your "_site.xconf" file is in the correct location and has no typos.

 

   

 

  - Select your new theme.  Once you refresh EnterMedia should look exactly like your fall-back theme.

 

4.  Customization

 

  - First I would like to get rid of the EnterMedia header to do that I need to override some files.  To do that I need to modify a css file or I need to change the header image file to a new one.  Since I don't want a image in my header I will be modifying a css file.

 

          - Open the OpenEdit File Manager and enter the directory of your new theme.

          - Notice that files that you didn't create are listed as being in your theme folder, this is because of the "fallbackdirectory" setting in your "_site.xconf" file.  The files being included as part of your theme are from your fall-back theme, for more details see Chapter 11.

          - We want to edit navigate.css which is located in minimalist/entermedia/styles

           

          - Click on "navigation.css" this will create a copy of "navigation.css" in the minimalist theme which will override the fall-back themes version.

          - I changed the following css element from:

 

            #logo {
                background: url(../images/tabsheader.png) no-repeat;
                height: 110px;
                padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you    may want to remove the padding. */
            }

 

            To:

           

            #logo { 
                height: 110px;
                padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
             }

 

          - So now EnterMedia looks like:

           

  - Next, I would like to get rid of the Help and Add New Record links.  Then move the Home and Settings links to the tab bar.

          - To do that I need to edit "navigation.html" in minimalist/entermedia/layouts/

 

          - I removed the following from navigation.html:

            
             <li><a href="/$top/help/index.html">HELP |</a></li>

 

          - I changed the tab section in "navigation.html" to look like so:

             

 

          - Now the header looks like so:

           

 

  - Finally, I would like to remove the dark green section from the header, and make the tab bar a nice light blue.  Here are the final results:

   

          - This involved modifying navigation.css, navigation.html, darktabs.css, and uploading two image files.  In navigation.html, I removed all of the header divs and added the Logout link at the end of the tabs.  I modified navigation.css and darktabs.css to use the two new image files which changed the menus to use blue instead of green.

NOTE:  If changes you are making do not appear to be showing up in EnterMedia, try restarting your webserver.

 

Velocity Code

When customizing theme pages, you will notice that many of the pages contain large amounts of Velocity code.  This is necessary to display variables and output information to the user.
Some notes on velocity code:
    

${variablename} 

is used to display the contents of a variable.  For example, "$product" will display the current contents of the variable "product".
    

#{code here}

is used to call actions in velocity.  For example

#if( job )

is a conditional based on whether there is a job loaded into the job variable.

If you are not sure about what some velocity code is doing, it is best to leave it alone.  Using a little caution, you can make html changes without disrupting the code.  If you really break something, you can always rename the file and allow EnterMedia to pick up the default file from the fall-back directory.

 

 

Album Themes

 

When using albums, you may notice that you can select a customized theme for each of your albums.  These album themes are stored and set-up in the exact same way as a normal theme.  However, if you only intend to use the theme for albums, you will only need to customize the files located in the /albums/ folder of your theme.  For an example, see the "photographer" theme included with EnterMedia.

 

 

Default Theme Files

The following is a list of the current files involved in a theme, separated by their subdirectories, along with a brief description of the areas of the site affected by each file.  You can use this as a guide to help you find the place to begin making changes to customize a given area of your EnterMedia site.

 

root level

    _site.xconf - Configuration information for your theme, this is where you set your fall-back directory and your themes name.

 

    layouts

        layout.html - This is the outermost layout, it wraps all applications

 

    This level contains directories for each of applications you may be theming.  Currently you are only able to theme EnterMedia, but in the future you will be able to theme other OpenEdit applications.

    entermedia

        _site.xconf

        images - This directory contains all of the images used by the theme, you can upload your own images in to this directory or you can overwrite existing images.

        layouts

            adminlayout.html - This is the html file for the catalog manager which is accessed by going to "Settings" and then using the edit catalogs drop-down.

            album.html - Edit this file to customize the homepage for each album.

            albumlist.html - This is the html file for the album tab, it defines the list of albums and the menu to the right.

            asseteditor.html - This html file defines the asset editor which is accessible by clicking on the 'i' under the results thumbnail and then clicking on "General Information" on the left side of the page.  This is where you modify an assets meta-data.

            categorytree.html - This file defines the "Browse Categories" tree which is visible when browsing a catalog.

            dialoglayout.html - This file defines the layout of the dialogs such as the add to album dialog.

            filternode.html - Edit this file to change how items are filtered from the category tree, when browsing assets.

            mediaapplication.html - This file is the outermost level of EnterMedia, here is where you would make changes that have an affect on the entire application such as adding a css file.

            mediaviewer.html - Edit this file to modify the media viewer.  The media viewer is page you are taken to when the thumbnail of an image is clicked.

            navigation.html - This file contains the header and the links at the top which are visible on all pages of EnterMedia.

            preview.html - This is the layout for the preview action of the asset editor.

            resultsfooter.html - This file defines the footer shown at the bottom of each catalog section when performing a search.

            resultsheader.html - Same as the resultsfooter except this file defines what is shown at the top of each catalog section when performing a search.

            savedqueries.html - This page defines the look of the saved queries page.

            settingslayout.html - This page defines the layout of the settings page accessible from the settings link at the top of the page.

        styles - This directory contains all of the style sheets for the EnterMedia application, this directory becomes very important when you are creating your own themes.

 

Last Updated: Fri Oct 23 10:10:45 EDT 2009