Editing Branding, the next level (section)

== Step Two: implement ==
Let us assume that you have configured the basic repository, created the database, and created an admin user.<br/>
Let us further assume that you are at the top of the installed EPrints software (<code>/opt/</code> or <code>/usr/local</code> or <code>/home/eprints</code> or wherever you've installed it)

Edit the default template for your repository:
<pre>
vi archives/ARCHIVEID/cfg/lang/en/templates/default.xml
</pre>

Edit the file, or delete all the contents and start again.
=== Head section ===
<pre>

<?xml version="1.0" standalone="no" ?>
<!DOCTYPE html SYSTEM "entities.dtd" > 

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epc="http://eprints.org/ep3/control" xml:lang="en" lang="en">
  <head>
    <title><epc:pin ref="title" textonly="yes"/> - <epc:phrase ref="archive_name"/></title>
    <script src="/javascript/auto.js" type="text/javascript"></script>
    <style type="text/css" media="screen">@import url(/style/auto.css);</style>
    <style type="text/css" media="screen"> @import  url(/style/eprints.css); </style>
    <style type="text/css" media="print">@import url(/style/print.css);</style>
<!--[if IE]>
    <style type="text/css" media="screen">@import url(/style/IE_Hacks.css);</style>
<![endif]-->

    <link rel="icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="Top" href="{$config{frontpage}}"/>
    <link rel="Search" href="/perl/search"/>
    <epc:pin ref="head"/>
  </head>

</pre>

This is the head section of the xhtml for our demo page. <br/>
* <code><title><epc:pin ref="title" textonly="yes"/> - <epc:phrase ref="archive_name"/></title></code> shows that the title is made from two elements defined in one of the ''phrases'' files
* <code><script src="/javascript/auto.js" type="text/javascript"></script></code> is the line that pulls in the auto-completer javascript
* <code><style type="text/css" media="screen">@import url(/style/auto.css);</style></code> is the bit that pulls in all the default javascript styling
* <code><style type="text/css" media="screen"> @import  url(/style/eprints.css); </style></code> is my extra CSS for my design
* <code><style type="text/css" media="print">@import url(/style/print.css);</style></code> is the css that is referenced when printing to the page
* <code>&lt;!--[if IE]&gt;<style type="text/css" media="screen">@import url(/style/IE_Hacks.css);</style>&lt;![endif]--&gt;</code> is my hack to include IE-specific CSS that the web validators won't see (or complain about)
* <code><epc:pin ref="head"/></code> is a pin-holder for any extra head-section tags that are defined (''where?'')

=== Body section ===
<pre>

 <body>
   <div class="ep_noprint"><noscript><style type='text/css'>@import url(/style/nojs.css);</style></noscript></div>
   <div id="container">
    <div id="banner" class="ep_noprint">
     <div id="banner_inner">
      <span id="the_depot_logo" >The DEPOT</span>
     </div> <!-- end of banner_inner -->
    </div> <!-- end of banner -->
    <div id="main_area" class="clearfix"> <!-- start of the menus and body of text -->
     <div id="top_menu" class="ep_noprint" >
      <div id="tabcontainer">
       <!-- Menu is defined dynamically -->
       <ul id="navtabs"><epc:pin ref="login_status"/></ul>
      </div> <!-- end of tabcontainer -->
     </div> <!-- end of top_menu -->
     <div id="content" >
      <epc:pin ref="page"/>
     </div> <!-- end of content -->
    </div> <!-- end of main_area -->
    <div id="footer" class="clearfix ep_noprint">
     <img src="/images/logos.gif" title="Logos for EDINA and SHERPA" alt="[LOGOS]" class="edina_logo" style="float:left"/>
     <span id="banner_image_copyright">Banner image &copy; JupiterImages 2006</span>
     <div id="credit">This service is running on <em>GNU EPrints</em> repository-creating software, which generates 
          repositories that are compliant with the <a href="http://www.openarchives.org">Open Archives Protocol for
          Metadata Harvesting OAI 2.0</a>.<br />
     <span id="take_down">&#187; <a href="/policy.html" title="What to do when you discover a deposit that infringes
          UK laws">how to complain</a> about a paper in the Depot</span></div>
    </div> <!-- end of footer -->
   </div>
 </body>

</pre>

So - what do we have here?
* <code>&lt;noscript&gt;&lt;style type='text/css'&gt;@import url(/style/nojs.css);&lt;/style&gt;&lt;/noscript&gt;</code> is a non-complient ''bodge'' to include extra CSS (used by the core eprints code) when there is no Javascript available.
* <code>&lt;ul id="navtabs"&gt;&lt;epc:pin ref="login_status"/&gt;&lt;/ul&gt;</code> is the bit that defines the toolbar (more later)
* <code>&lt;epc:pin ref="page"/&gt;</code> is the bit that defines where the code sits
The rest is all design and layout (and there is a ''lot'' of design and layout in <code>/style/eprints.css</code>