Skip to content

nhart/FJM-theme

 
 

Repository files navigation

The FJM theme is a D6 Zen sub-theme that relies on the core components of Zen 2.x - http://drupal.org/project/zen

    Zen 2.x is required to be in the themes directory along with your FJM sub-theme

The FJM directory in your theme folder is a sub-theme of Zen & the theme is referred to as "fjmtheme" in the code of your templates

    stylesheet breakdowns for the core template are here: - http://drupal.org/node/1069786 Additional stylesheets are described in more detail below.

Basic theme directory structure:

    /var/www/html/drupal/sites/all/themes/
        zen (this is zen 2.x - required, should never be modified)
        FJM (sub-theme core template)

Here are the breakdown of the theme files, further sections below will elaborate on more important files in the theme..

    FJM/ - core template folder, considered a sub-theme to drupal
        fjmtheme.info - This defines regions, defines the core theme (zen), specifies js files and sets theme settings
        template.php - preprocessor functions and hooks would go here.
        theme-settings.php - contains the code for the settings that appear in theme settings.
        logo.png - default logo
        favicon.ico - default favicon
        screenshot.png - screenshot on themes page
        README - readme file for the theme
        js/ - this folder houses any javascript the theme may be calling
        images/ - this houses core template images
        images-source - this would house any source image files for the theme, but there are none for fjmtheme (yet)
        css/ - all of the core css files are here
        templates/ - content-type, view, block, page, node, etc template override location

Stylesheets

Most of the changes you would need to make can be handled via css, the css files you would use for specific site overrides are in the FJM/css folder. For the most part these are very similar to Zen's defaults with a few additional stylesheets and some modifications with the existing ones. These stylesheets are defined in fjmtheme.info, if you add or remove a stylesheet then it must be declared in fjmtheme.info and you must clear your drupal cache to see the change.

    html-reset.css - This is the place where you should set the default styling for all HTML elements and standardize the styling across browsers.
    layout-fixed.css - Zen's default layout is based on the Zen Columns layout method. The layout-fixed.css file contains all column and layout styling.
    page-backgrounds.css - Layered backgrounds across scattered divs can be easier to manage if they are centralized in one location.
    tabs.css: Tab styling, these tabs are css3 based and degrade gracefully for ie
    messages.css - Styling for Drupal tabs and Drupal status messages.
    pages.css - Page styling for the markup in the page.tpl.php template.
    blocks.css - Block styling for the markup in the block.tpl.php template.
    navigation.css - The styling for your site's menus can get quite bulky and its easier to see all the styles if they are grouped together rather then across the header/footer sections of pages.css and in blocks.css.
    views-styles.css - Views styling for the markup in various views templates. You'll notice this stylesheet isn't called "views.css" as that would override (remove) the Views module's stylesheet.
    nodes.css - Node styling for the markkup in the node.tpl.php template.
    comments.css - Comment styling for the markup in the comment-wrapper.tpl.php and comments.tpl.php templates.
    forms.css - Form styling for the markup in various Drupal forms, this also contains button styling. Since buttons are commonly used in forms, the code is located here.
    superfish.css - Styling for dropdown menus in the primary link section, code here is integral for the related javascript to work, color styling should be placed in navigation.css
    islandora.css - Styling for islandora specific displays
    jcarousel.css - Overrides for the jcarousel jquery plugin
    print.css - The print styles for all markup.
    ie.css:
    ie6.css - The Internet Explorer stylesheets are added via conditional comments. Many CSS authors find using IE "conditional stylesheets" much easier then writing rulesets with CSS hacks that are known to only apply to various versions of IE.

A description of zen's default stylesheets & IE issues: http://drupal.org/node/1069786
Javascript

    FJM/js/
        superfish.js - this is the core dropdown menu code
        hoverIntent.js - this is a superfish javascript file that must be included, it controls how the dropdowns behave
        jquery_example/ - this is a jquery module to add the word "Search" to search box locations
        searchtext.js - this defines where the word "search" appears in drupal (related to the jquery_example module)

More involved changes would be handled in the core template's templates/page.tpl.php (region locations & page structure) and preprocessor functions and hooks, etc would go in template.php
Templates

    FJM/
        template.php - currently there are overrides to add custom CSS ids to all menu links, and to shorten default form lengths for fixed-width themes
        templates/
            page.tpl.php - This contains all of the structural php & html markup, as well as doctype & file includes.. similar to an index.php
            views-view--collections--page.tpl.php - This overrides the collections page view on the front page of atmusica and adds it to a fieldset
            views-view--conciertos--block.tpl.php - This overrides the conciertos block view on the front page of atmusica and adds it to a fieldset

Reference docs

Zen Documentation
http://drupal.org/node/193318

Releases

No releases published

Packages

No packages published

Languages

  • CSS 91.0%
  • PHP 6.7%
  • JavaScript 2.3%