Nieuwe skin (3)

2006-02-12

Nu we stap 1 gedaan hebben, wordt het tijd voor stap 2.

Stap 2: Wijzigen subSilver-bestanden

Verwijzingen in de templates

In de *.tpl-bestanden is de naam subSilver hard gecodeerd. Om een juiste verwijzing te krijgen naar onze eigen template-bestanden is het noodzakelijk om deze aan te passen, overal waar /subSilver/ staat moet worden gewijzigd in /nieuwenaam/. Zelf heb ik dit gedaan door alle bestanden met de extensie .tpl te openen in de Context-editor. Via de optie zoeken en vervangen in alle geopende bestanden is het zo in een paar seconden klaar.

Stylesheet aanpassen

Het aanpassen van de stylesheet bewaren we voor later. Eerst gaan we zorgen dat het forum op de plek komt waar wij het willen hebben.

Aanpassen header en footer

Om het forum het zelfde uiterlijk te geven als de rest van de site gaan we allereerst ervoor zorgen dat onze eigen stylesheet in elke pagina geladen wordt.

open de bestanden overall_header.tpl, simple_header.tpl en admin/page_header.tpl en verwijder de inline-stylesheet
haal bij de regel waarin de stylesheet van het forum wordt aangeroepen de commentaar code weg
open de overall_header.tpl en voeg de volgende regel toe, onder de regel van de stylesheet van het forum:

haal in de overall_header.tpl de volgende regels weg:





<table width="100%" cellspacing="0" cellpadding="10" border="0" align="center">
  ...
  [knip]
  ...
  
  &lt;/tr>
  
</table>



<br />

Hiermee verwijderen we de naam van het forum en het menu boven aan de pagina. Het menu zal straks terugkomen aan de rechterkant van de pagina. </li> </ul> 

  * open de overall_footer en voeg voor de tag de volgende code toe:


  <h1>
    Forum
  </h1>
  
  
  <!-- BEGIN switch_user_logged_out -->
  
  
  <a href="{U_LOGIN_LOGOUT}">Inloggen</a>
  <a href="{U_REGISTER}">{L_REGISTER}</a>
  <!-- END switch_user_logged_out -->
  
  
  <!-- BEGIN switch_user_logged_in -->
  
  
  <a href="{U_LOGIN_LOGOUT}">Uitloggen</a>
  <a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>
  <a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>
  <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
  <!-- END switch_user_logged_in -->
  
  
  <a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
  
  
  <hr />
  
  <a href="{U_FAQ}">{L_FAQ}</a>
  <a href="{U_SEARCH}">{L_SEARCH}</a>
  <a href="{U_PROFILE}">{L_PROFILE}</a>
  <a href="{U_MEMBERLIST}">{L_MEMBERLIST}</a>
  <a href="{U_GROUP_CP}">{L_USERGROUPS}</a>
  
</div>

Nu gaan we zorgen dat het forum als geheel op de plek verschijnt die wij willen.

  * open de overall_header.tpl en voeg voor de regel:


        
        de volgende code toe:


  
  
  <p>
    Deze div heb ik gedefinieerd in mijn eigen stylesheet.
    </li>
    </ul>
    
    
    <ul>
      <li>
        open de overall_footer.tpl en voeg voor de regel:


  
  
  <p>
    de volgende regel toe:
  </p>

<p>
  Nu hoeven we alleen de header nog maar in te voegen.
</p>


<ul>
  <li>
    open de overall_footer.tpl en voeg voor de regel:





<div class="menu">


  <ul id="topnav">
    <li>
      <a href="item1">Item1 |</a>
    </li>
    
    
    <li>
      &lt;a href="item2>Item2 |&lt;/a>
    </li>
    
  </ul>
  
</div>