Personal tools

Mozilla.org/Page conversion

From MozillaWiki

Jump to: navigation, search

Staging

You can make use of the http://www-stage.mozilla.org/ site to test these changes before updating the live site. You'll need to request access to the staging branch at:

http://viewvc.svn.mozilla.org/vc/projects/mozilla.org/branches/staging/

Docs

First point to the 2010 header and footer includes.

At the top: require_once "{$config['file_root']}/includes/header-2010.inc.php"

And at the bottom: require_once "{$config['file_root']}/includes/footer-2010.inc.php"

That sets up the basic page structure, including a link to screen-2010.css where all the new styles are declared. Old pages still have the old header and link to the old style sheet, though the subnav menu is moved to the right and restyled to match new pages.

Wrap the main content in a div with id="main-content", which becomes the white rounded box and also sets the stage for the new sidebar.

In the old template, the page title was rendered in the header include and passed as a variable from each page, and that was one of the reasons we had to modify the header so the title could be inside another container. So inside the #main-content div add the page title thusly:

<h1 id="page-title">Title</h1>

The old template put the code that outputs the submenu in the header include, but with the new layout it needs to be part of the page itself so we can put other content under it in the sidebar. So on pages with menus, after the #main-content div, add:

<div id="sidebar">
  <?php $left_menu->display(); ?>
  <!-- any other content, promos, etc go here -->
</div>

Only pages with a sidebar menu actually have space for a sidebar, which is a carryover from the old template. If a menu is defined for the page, the template adds a "with-menu" class to the #main div which acts as a style hook so #main-content can float to the left.

If you define a menu for the page but leave out the tag that displays it, the "with-menu" hook is still added and the main content will float, giving you space for any sidebar content you like. It's kind of a hack and we may want to rework it in the future so we can arbitrarily opt for a sidebar without messing with the menu.

If no menu is defined, the #main-content div will span the full width but will still have the rounded and shadowed box. For a page with no content box and no sidebar, just don't use a #main-content div (the div really only exists to separate the content from the sidebar).