Custom themes for OpenScholar sites are Drupal themes that are sub-themes of the 'os_base' theme. You can create clean and compact CSS by choosing to keep whichever defaults from the base theme you want. We therefore recommend becoming familiar with the markup we provide and with the default CSS. This can be done in the usual ways (we recommend using Firefox and the Firebug extension) but here we also provide some general background.
The base theme uses a markup structure that was featured back in a 2006 issue of the online magazine A List Apart. We recommend you familiarize yourself with the basic concepts of the 'Holy Grail' layout.
Beyond your custom CSS and images you'll also need a customized '.info' file. The .info file (example: 'mytheme.info') resides with your CSS in your theme folder. It is a proprietary Drupal file which instructs the system where to find your theme's name, CSS file, whether there are theme 'flavor' variants, and whether you prefer to have certain widgets custom enabled.
The "base theme" provides a number of content regions into which scholars may move widgets within the layout settings in the control panel. A region can be enabled by the site owner, or not according to preference on a particular pages, so all themes should be flexible enough to respond to these changes.
For instance the left column may be in use in the publications page, but not in the blog area. The right column might only be used on the site's front page, but not anywhere else.
In order to keep track of a user's preferences, CSS classes are added to the body tag to correspond with which regions are currently in use. So if the left sidebar is being used the body class 'sidebar-left' is added. If the right sidebar is also in use, the body class will change to 'both-sidebars'
Some divs are always present in the markup. These will be #wrapper, #container, #content-wrapper, #main, #footer, #extradiv. #header and #header-wrapper will likely always be used, but technically could be disabled by the site user. These divs can be custom styled or left as defaults as you wish. (Note: The div #extradiv serves no function save for an additional styling div. It is otherwise empty.)
The divs that users will likely enable and disable on various pages are therefore #header-left, #header-main, #header-right, #navbar, #sidebar-left and #sidebar-right. The body tag is given classes to reflect which of these regions/divs is in use, and should be fairly obvious as to what they represent. They are:
Body classes are strung together, for example: <body class="sidebar-left header-left-main-right">
You can of course do anything you want with the CSS of your custom theme, but it's not a bad idea to know how the base theme on which you'll be essentially overriding is constructed. The base theme's CSS is loaded before yours so many default attributes can be used if you prefer.
The basic default layout is based on Matthew Levine's 2006 article in A List Apart. We suggest reading and familiarizing yourself with the article and logic behind it.
Using our divs, this is the basic layout of all themes in OpenScholar:
The exact same structure and defaults are used for the header regions, however since #header-main is optional for the site owner there's additional default CSS declarations allowing for only left and right header areas.
A theme is technically made up of minimally two files, a style sheet (CSS) and a '.info' file.
The CSS will be loaded if a site owner chooses your theme in the control panel's Theme Picker. A custom theme's CSS is loaded last, after the base theme CSS and most modules' CSS has been loaded. Any images should be in an 'images' folder next to your CSS. You can also write custom print CSS, mobile CSS, and of course conditional CSS for Internet Explorer which, as we all know, doesn't often work well without special babying.
The .info file (example: 'mytheme.info') also lives next to the CSS. It is a proprietary Drupal file which instructs the system where to find your theme's name, CSS file(s), whether there are theme 'flavor' variants, and whether you prefer to have certain widgets custom enabled.
Note: .info files are simply text files, and should be opened and edited using any text editor. However unless you're a Drupal developer you likely will not have run into them previously. Therefore double-clicking without first instructing your computer to open .info files from within a text editor may prove to be confusing to some.
Theme 'flavors' are variants of a theme &mdashl; an example might be having a different color palette but otherwise using the same layout, typography choices, etc.
You can develop distinct 'flavors' of your theme by working up a separate style sheet (CSS) and also notating the alternative flavor in your .info file.
As your original theme CSS will be loaded, with the flavor CSS after, the flavor CSS need only contain those declarations which should be different from the original. Often a flavor style sheet will only have a few lines, describing different background and text colors, etc.
Some designs demand conditional styles for IE only, while your theme may include a style sheet for IE, it's also possible that a particular theme flavor may require it's own conditional style sheet as well. (Most obvious case would be if you are using rgba in your design and need to replace that code with proprietary Microsoft filters.)
To test your custom theme's CSS we have a themer kit which can be downloaded (Note: remove the .txt extension and then decompress). The kit contains a dummy mini-site of files with typical markup and with links to the live base theme, as well as links to a blank css file called my-theme.css. This is where you should work. Add background images to the supplied images directory.
The files may be dropped onto Firefox or another standards-compliant browser to view as you work. (Note: We've found that Dreamweaver does not accurately render the base CSS.)
NOTE: This help article is out of date! It conatins information for Drupal 6 only. This version of OpenScholar uses Drupal 7.
.info files have several distinct keys that are unique to scholar themes they all begin with the "scholar" keyword
Widgets are what scholar calls the display blocks on any given page. For a good representation of what widgets are and where they are located take a look at the "/cp/build/layout" page.
"scholar[widgets]" is an array that allows the theme developer to override the default location of a block. Where the array key is the widget id and the value is the region you would rather it be in by default. For example the block that prints the main menu has an id of "vsite_menus_0" and is by default in the "navbar" region. To override this value and put the block into the left region by default the following entry would be used: scholar[widgets][vsite_menus_0] = left
This should be set to the path to a css file that modifies the layout of the regions on "/cp/build/layout". If your theme does not rearrange the regions from the default locations then this is not needed. The css properties you are overriding can be found in the vsite_layout module under "/theme/cp-layout-map.css"
Setting this to "vsite" lets the application know that your theme is available for use on vsites. Without this set your theme will not be available to users.
Setting this to "public" allows any user to set this as their theme. If it is set to "private" then only administrators with special privileges can apply this theme. It can be useful if you wish to restrict the use of your theme