Archive 1.x:Styling OSF-Drupal (Tools) Modules

OSF-Drupal tools are standard Drupal modules written in PHP and mostly styled with standard CSS. This document describes how to modify their styles.

General Resources
It is a good idea before first attempting to change the look of OSF-Drupal tools to:
 * First, be familiar with the concept of OSF-Drupal and the other general documentation on this wiki in the OSF-Drupal category
 * Second, have some comfort and familiarity with CSS and how to modify a CSS stylesheet file (see next),
 * Third, to aid in that process, a tool such as Firebug (see next) is advised to understand what are the exact styles used in the various page aspects you want to change, and
 * Fourth, have administrator rights access to the server hosting your OSF installation and know how to use a tool such as WinSCP in order to access directories and modify files.

Some Basic Tutorials

 * Instructions on how to use WinSCP to access your instance
 * Here is a comprehensive CSS manual (version 2.1)
 * Here are some basic instructions on how to modify CSS
 * See the Firebug wiki for general guidance on use and tips.

General Approach
The general approach to modifying the style of a OSF-Drupal tool is to copy the CSS file from your remote (operational) server, make modifications to a local copy, upload the revisions, and then refresh the page with the tool on your OSF instance. You then check your changes and modify as appropriate until the desired style changes are complete.

CAUTION: ALWAYS first download the existing, operating CSS file from your actual instance prior to making any changes. This will ensure you are working with the current, operational copy. Your own local copies might have gotten out of date if others have made modifications since your last changes.

Specific OSF-Drupal Tool (Module) Examples
In each of the examples below, we describe where the CSS may be found for the specific OSF-Drupal tool; present its standard, out-of-the-box CSS; a modified example of its CSS; and before and after screen shots.

Supporting Systems
Depending, some of the tools below may depend on some utilities. In the case of the Browse and Search tools, for example, one such dependency is YUI. YUI is a JavaScript user interface library from Yahoo!

YUI Style Changes
In Search and Browse the tab structure is styled via YUI. In order to make changes to it (in conjunction with the main widgets themselves), we will need to chang the YUI Tabview asset, found here:

/usr/share/drupal/sites/all/modules/conStruct/js/yui/build/tabview/assets/skins/sam

The images over the tabs in static or mouseover viewss are found in, located in another obscure directory:

/usr/share/drupal/sites/all/modules/conStruct/js/yui/build/assets/skins/sam

You can find these directories by mousing over the element of interest while using the inspection view of Firebug. The tooltip will show the complete directory path where the item of interest may be found. In order to change our tabs from blue to green (amongst other style changes), we need to change both the sprite image and the CSS stylesheet. We can see the before and after CSS code views in the Example YUI Utility CSS document.

This is an example, not uncommon on more complicated Web pages, where multiple sources may need to be inspected and changed in order to get the final desired styling result.

Search Tool
The Search tool presents a standard search engine interface, but with the addition of facet selections by instance types. Once results are returned, they may also be further filtered by the matching instance types. Complete structured data records are presented for the selected instance. Depending on user permissions, the interface may also allow updating or deleting of records from this tool (modification rights are generally NOT given to standard users).

Out-of-the-Box Style
In its standard distibution, each OSF-Drupal tool comes with a standard, "out-of-the-box" CSS stylesheet. Here is this standard stylesheet for the Search tool, including a link to the actual CSS file:


 * Initial Search Tool CSS

Note, in a standard installation, the CSS file for this tool may be found in this directory:

/usr/share/drupal/sites/all/modules/conStruct/modules/structSearch/css

And, this is how this standard CSS renders for this tool:



Note: For your own out-of-the-box installation, your datasets will differ from those shown in this example.

Revised Style
However, because of overall differences in how we want our actual OSF deployment to look, we make some modifications to make our tool look like the overall instance.

With your local editor, you may want to do a file compare on the "initial" and "revised" CSS files to see the specific changes made.

Browse Tool
The Browse tool presents a categorical (hierarchical) listing of all instance types and their record counts for all currently active datasets. Browsing this tree enables specific instance types to be clicked, presenting a listed display of record results with title labels. The listing itself may be further selected by attribute, with eventually a specific record displayed. Depending on user permissions, the interface may also allow updating or deleting of records from this tool (modification rights are generally NOT given to standard users).

Out-of-the-Box Style
In its standard distibution, each OSF-Drupal tool comes with a standard, "out-of-the-box" CSS stylesheet. Here is this standard stylesheet for the Browse tool, including a link to the actual CSS file:


 * Initial Browse Tool CSS

Note, in a standard installation, the CSS file for this tool may be found in this directory:

/usr/share/drupal/sites/all/modules/OSF-Drupal/modules/structBrowse/css

And, this is how this standard CSS renders for this tool:



Note: For your own out-of-the-box installation, your datasets will differ from those shown in this example.

Revised Style
However, because of overall differences in how we want our actual OSF deployment to look, we make some modifications to make our tool look like the overall instance:

Revised Browse Tool CSS

Here is how this revised file now renders:



With your local editor, you may want to do a file compare on the "initial" and "revised" CSS files to see the specific changes made.

Datasets Tool
The Datasets tool provides access to some of the most privileged functions within the system, including the creating, updating and deleting of datasets.

Out-of-the-Box Style
In its standard distibution, each OSF-Drupal tool comes with a standard, "out-of-the-box" CSS stylesheet. Here is this standard stylesheet for the Datasets tool, including a link to the actual CSS file:


 * Initial Datasets Tool CSS

Note, in a standard installation, the CSS file for this tool:


 * 1) Has no specific CSS; it defaults to the site standard (providing CSS here overrides the site standard), and
 * 2) May be found in this directory:

/usr/share/drupal/sites/all/modules/conStruct/modules/structDataset/css

And, this is how this standard CSS renders for this tool:



Note: For your own out-of-the-box installation, your datasets will differ from those shown in this example. Actually, because of its multiple actions, the Dataset tool presents a number of screens, with only one example shown above.

Revised Style
Because this tool inherits the standard CSS for the site, the rendering (in this case) is consistent with that overall style:



TO BE DONE
Networks - this is a tool showing the overall network settings for the NOW portal, useful for inter-communicating with other possible network nodes in the NOW community Stats - these are some of the basic raw stats of how the NOW portal is being used and its traffic and structured data queries. Workbench - this is the developer environment in which we can create the various Dashboards shown on this site Ontology - this is the back office means by which we manage and update the various ontologies used on this site; all add and modify functions have been disabled from this read-only version Scones - this tool is our document "tagger" for relating unstructured data to the structured (ontology) aspects of this site; portions of this are extracted and used in other parts of the NOW portal