Hyperframe flatfile CMS

The frame.css file

styling the appearance of a frame for your site

The place you will likely do most customising is the frame stylesheet, frame.css. This has three main sections: Global styles which apply to standard tags, styles which apply to the various IDs and classes attached to frame divisions, and styles applying to the menus. The frame.css files in the example frames are documented, but let's take a closer look at one:

The global styles:

BODY {color:black; background-color:#ffffff; font-family:Arial,sans-serif;  margin : 0 0 0 0}
A {color:#0000ff; text-decoration:none; font-weight:normal;}
A:hover {color:#00ffff;}
A img {border:none;} /* Fix IE nastiness */

/* --- Remove extraneous spacing from headers, optional but IMHO makes presentation much neater. --- */
H1 {margin-top:0px; margin-bottom:0px;}
H2 {margin-top:0px; margin-bottom:0px;}
H3 {margin-top:0px; margin-bottom:0px;}
H4 {margin-top:0px; margin-bottom:0px;}
H5 {margin-top:0px; margin-bottom:0px;}
H6 {margin-top:0px; margin-bottom:0px;}

The default font for most browsers is serif, and this largely historical arrangement is very unsuitable for small text, so setting a sans serif font is wise.

Underlined links are so 90's, so get rid of that underline globally. 

The standard headings introduce automatic spacing, which presumably was seen as a timesaver  when introduced years back, but the drawback is that using this default also means you can never have unspaced headings. Which, is a huge drawback. Therefore, often better to remove the automatic spacing, and space the headings manually when required. Since this has a global impact on how you present your headings, you really don't want to have to change these values on an established site. So, decide now.

You can of course apply these settings to the #hf_content section instead of the body if you do not want them to apply to menus, etc. But, as good practice you should always declare a default body text and background color pair. That ensures that unstyled text is never rendered invisible (white on white or black on black) by, for example, the failure of a stylesheet to load. 

The content divisions

Hyperframe defines a set  of standard IDs which should be present on most sites. You do not have to use these IDs, but using them permits several builtin functions to change the appearance of the page in response to URL parameters, which is beneficial in various circumstances.  These IDs can be attached to any suitable block-level container - div, table, paragraph or HTML5 content tag.  The actual css shown here is of course an example, you are not required to use this particular scheme.

#hf_pagelayout{
   /* Container for whole of page. 
   Here, the page will fluidly adjust to browser window size up to 1200 pixels, 
   above which it will show a blank unused border which has the attributes of either the body tag or any outer container.
   The content will be centered in this border.  */
  border:0px;
  padding:0px;
  margin: auto;
  width:100%;
  max-width:1200px;
}

#hf_banner{
  /* Topmost page section, usually contains company logo, site description or the like. */
  padding:10px;
  width:100%;
  vertical-align:middle;
}

#hf_top{
  /* Narrow horizontal bar containing top menu or quicklinks, usually in a distinct background color. */
  width:100%;
  background: linear-gradient( #9999ff, #0000a8, #000070);
  /*  background-image:url("bar.gif"); alternative to gradient if you must support older browsers */
  border-radius:7px;
  background-color:#0000a8;
  background-position: left top ;
  background-repeat:repeat-x;
}

#hf_left{
  /* Lefthand vertical bar, usually contains tree-style main menu.  
  Probably best not to put menu styling here, as it would then also apply to non-menu items in this bar. 
  You may wish to determine whether the menu must remain fixed-width or can expand laterally, though, and by how much. */
  vertical-align:top;
  width:150px;
  min-width:150px;
  max-width:250px;
  padding:5px;
}

#hf_content{
 /* Where the actual page content goes 
 Whether to justify paras is a matter of choice. It looks neater, but some say it has a negative impact on readability. */
 vertical-align:top;
 text-align:justify;
 padding-left:15px;
 padding-right:15px;
}

#hf_right{
  /* Optional righthand vertical bar, on some sites this contains advertising or related-content links. */
  vertical-align:top;
}

#hf_bottom{
  /* The page footer. */
  vertical-align:middle;
}

Remember that any images you reference here by filename alone or relative path will be in the frame, not the page location. That's how css works.

 

Menus

The menus take a certain amount of default styling from system.css. This is to ensure that they operate  correctly even if there is no frame css. Thus, in frame.css you do not need to include all of the sections below if you do not want to. For a description of the options, see the menu system documentation.

The 'framemenu' is not strictly a menu, by the way, but the expanding list of available frames to the right of the #hf_top section. This does not show if there is only one frame, btw.

Other items

Any other css you need can be placed here. This may relate to your own work, or to plugins.