CASE.EDU:    HOME | DIRECTORIES | SEARCH
Case Western Reserve University

KELVIN SMITH LIBRARY
 
 

The Branded Masthead

To brand your blog, and keep it manageable... you are going to want to break certain parts of your template into separate Moveable Type "modules." The first of these is the page masthead.

I have broken the masthead into two files,

  1. the grey bar that includes the Case logo and your department name, and everything above that grey bar
  2. the colored navigation bar

Remember, I'm working with the Advanced template here so I'll be using that navigation bar.

To make this easier for you I've created my Masthead "module" so it saves the file at http://blog.case.edu/dkh2/masthead_cranberry_advanced.html, where you can grab a copy. Right-Click (Mac users Control-Click) the linked address and do a save-as to grab a copy for editing. I'll include a preformatted copy of the code at the bottom of this post if that's easier for you.

Creating a Module
Once you have logged in on Blog.Case and you have your administrative menu on screen, the first link in the "Manage" section takes you to "Templates." The last section on this page handles "Modules." Click the link to create a new module, name it something appropriate like "Masthead" and past the code into it. You have the optional opportunity to assign a filename to the module as well. I did that so the code would be available to you.

Save your changes and rebuild your site so everything gets created before moving on the the next section.

Customizing Your Masthead
My masthead code is specific to Kelvin Smith Library. The H1 tag in the masthead is linked to the KSL web site. You will want to change this to provide your department name and link it to your departments web site.

Save your changes and rebuild your site so everything gets created before moving on the the next section.

The Primary Navbar

Again, I've made this file available at http://blog.case.edu/dkh2/navbar.html. You should not need to make any changes to this file. Just create a "Navbar" module and paste in the code.

Save your changes and rebuild your site so everything gets created.

Fix the Images

Upload copies of any graphics to your site and update the Masthead module to pull these images from their new location.

Save your changes and rebuild your site so everything gets created.

Next Steps
  • Create copies of stylesheets from the Case templates
  • Update your new stylesheet to use the correct masthead background graphic
  • Update your Masthead module to pull the stylesheets from your location
  • Navigation Sidebar
  • footer

Finally! The Code

masthead_cranberry_advanced.html
Remember, this is an HTML fragment so you won't have the normal <html><head> ... </head><body> ... </body></html> structure wrapped around it. 
<!-- GLOBAL HEADER NAV SHOULD NOT CHANGE -->
 <tr valign="top">
  <td width="24" style="margin: 0; padding: 0;"> </td>
  <td colspan="2" align="right"><div 
   id="headernav"><em>CASE.EDU:</em>    <a 
   href="http://www.case.edu">HOME</a> | <a 
   href="http://www.case.edu/dir">DIRECTORIES</a> | <a 
   href="http://www.cwru.edu/search.htm">SEARCH</a></div></td>
 </tr>
<!-- END GLOBAL HEADER NAV -->


<!-- BEGIN LOGO MASTHEAD -->

 <tr valign="top">

  <td align="right" width="24" style="margin: 0; padding: 0;"><a href="http://www.case.edu/"

   title="Case Western Reserve University"><img 

   alt="Case Western Reserve University" id="leftlogo" 

   src="http://blog.case.edu/dkh2/left_logo_edge.gif" 

   width="24" height="50" border="0" align="right" /></a>

</td>



  <td colspan="2" valign="top"><table cellpadding="0" border="0" cellspacing="0" 

width="100%" summary="layout" align="left" >

 <tr>

  <td valign="bottom" bgcolor="#5C6871"><img 

    alt="Case Western Reserve University"

src="http://blog.case.edu/dkh2/logo_CWRU_grey.gif" 

    width="300" height="108" usemap="#logoCaseMap" />

   <map name="logoCaseMap">

    <area shape="rect" coords="0,36,30,84" href="http://www.cwru.edu/" 

 	title="Case Western Reserve University" />

    <area shape="rect" coords="30,42,68,84" href="http://www.cwru.edu/" 

	title="Case Western Reserve University" />

    <area shape="rect" coords="68,52,132,84" href="http://www.cwru.edu/" 

	title="Case Western Reserve University" />

    <area shape="rect" coords="30,84,226,96" href="http://www.cwru.edu/" 

	title="Case Western Reserve University" />

   </map>

  </td>

  <td valign="bottom" class="masthead">

    <a href="http://library.case.edu/ksl/"><h1>Kelvin Smith Library</h1></a>

  </td>

 </tr>

</table>

</td>

 </tr>

<!-- END LOGO MASTHEAD -->



<!-- BEGIN HORIZONTAL SECTION NAV -->

<tr>

  <td> </td>

  <td colspan="2">

    <$MTInclude module="Primary Navbar"$>

  </td>

</tr>

Note: If you are using the "Normal" remplate you will want to delete or comment out that last table row.
navbar.html
<!-- BEGIN HORIZONTAL SECTION NAV -->
<div id="pnav">
<table summary="layout" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr height="24">
<td>
<ul>
  <li><a href="http://blog.case.edu/">Blog@Case Home</a></li>
  <li>|</li>
  <li><a href="<$MTBlogURL$>" >My Home</a></li>
  <li>|</li>
  <li><a href="<$MTBlogURL$>archives">Archives</a></li>
  <li>|</li>
  <li><a href="<$MTBlogURL$>categories">Categories</a></li>
  <li>|</li>
  <li><form method="get" action="<$MTCGIPath$><$MTSearchScript$>" name="searchForm" 
id="searchForm" style="display: inline;">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" /><input accesskey="4" 
id="search" name="search" value="Search Terms" size="20" /> <a href="#" 
class="navBarLink" id="searchLink" 
onclick="document.searchForm.submit();">Search</a></form>
</li>
</ul>
</td>
<td align="right" color="#FFFFFF">
<ul><li> 
</li></ul>
</td>
</tr>
</table>


</div><!-- end div#pnav -->

<!-- END HORIZONTAL SECTION NAV -->


Have fun! and come back for the next step in this process to be posted soon.

Trackbacks

Trackback URL for this entry is: http://blog.case.edu/dkh2/mt-tb.cgi/1003

Comments

Neuman
Neuman spake from the ether on April 14, 2005 11:36 AM to say:

What is the code to include a module in a page?

Thanks for the comments on my blog, and the birthday wishes.


dkh2
dkh2 spake from the ether on April 14, 2005 12:06 PM to say:

Eric,

You'll find everything you need to know about including things in the help files. Look for the MTInclude tag. An example is in the last couple of lines of my Masthead code (above) where I include my "Primary Navbar" module.


Post a comment





If you have entered an email address in the box, clicking this checkbox will subscribe your email address to this entry so that you are notified if any updates or additional comments occur on the entry.











Email This Entry:

Send this entry to:


Your email address:


Message (optional):