Editing Style (CSS) and Eloquence (Languages) (section)

===Changing the template===

Our theme can also contain a template. The template is the frame in which pages are displayed.

I suggest copying your template file from the lib directory <code>lib/templates/default.xml</code>. The template can go in either cfg/themes/abstract_flash/templates/default.xml or cfg/themes/abstract_flash/lang/[langid]/templates/default.xml (if you want a language specific template)

In this example I have moved the key tools bar so that it is a menu on the right of the screen. To do this you must edit your template and move the "login_status" pin from inside the search bar to below it. This exert shows what I have done: 
<pre>
 <table class="ep_tm_searchbar">
    <tr>
      <td> <!-- login_status pin was here--> </td>
      <td align="right" style="white-space: nowrap">
                <epc:pin ref="languages" />
        <form method="get" accept-charset="utf-8" action="{$config{http_cgiurl}}/search" style="display:inline">
          <input class="ep_tm_searchbarbox" size="20" type="text" name="q"/>
          <input class="ep_tm_searchbarbutton" value="Search" type="submit" name="_action_search"/>
          <input type="hidden" name="_action_search" value="Search"/>
          <input type="hidden" name="_order" value="bytitle"/>
          <input type="hidden" name="basic_srchtype" value="ALL"/>
          <input type="hidden" name="_satisfyall" value="ALL"/>
        </form>
      </td>
    </tr>
  </table>
</div>


<epc:pin ref="login_status"/>

</pre>

You must reload your configuration for this change to take affect. 

You should now find that login information is outside of the search search bar area. Now we apply some style rules to position it on the right and make it look slightly more attractive. The style rules i chose are below.

<pre>

.ep_tm_key_tools {
        width: 200px;
        float: right;
        background: none repeat scroll 0 0 #D4FAE7;
        margin:0;
        border-left: 1px solid #525252;
        border-bottom: 1px solid #525252;
}

.ep_tm_key_tools li, .ep_tm_key_tools li:first-child {
        border:none;
        font-size: 110%;
        display: block;
        padding: 10px;
}

</pre>