glFusion Wiki

Site Tools


glfusion:development:themes:porting_a_theme:step_five

1. Welcome back! :-D
Begin by opening refresh/Refresh_Original/index.html and refresh/footer.thtml in Notepad++.

When you open a .thtml file with Notepad++, you'll notice that it doesn't automatically color the code. You need to tell Notepad++ to treat it as HTML code by clicking on the Language Menu and selecting HTML from the list.

2. In Notepad++, right-click on the second tab called footer.thtml and choose 'Go to another View'. You will now have both files open, side by side.

3. Scroll down to the bottom of index.html and look for the comment:

<!-- content-wrap ends here -->

Everything after that comment is part of the footer. Now, let's look for some common elements and replace the static ones with glFusion's {dynamically_generated} ones.

4. Copy

{copyright_notice}

from footer.thtml, and paste it in index.html overwriting:

&copy; 2006 <strong>Your Company</strong>

5. Copy

{powered_by} <a href="{glFusion_url}">glFusion</a>

and paste it overwriting:

Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a>

6. Copy

{execution_textandtime}

and paste it overwriting:

<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>

7. In index.html let's convert the Home, Sitemap, and RSS Feed links to the appropriate glFusion counterparts, replacing Sitemap with Stats. So change:

			<a href="index.html">Home</a>&nbsp;|&nbsp;
   		<a href="index.html">Sitemap</a>&nbsp;|&nbsp;
	   	<a href="index.html">RSS Feed</a>

to

			<a href="{site_url}">Home</a>&nbsp;|&nbsp;
   		<a href="{site_url}/stats.php">Stats</a>&nbsp;|&nbsp;
	   	<a href="{site_url}/backend/glFusion.rss">RSS Feed</a>

8. Finally, we'll copy the whole footer code from index.html

		<!--footer starts here-->
		<div id="footer">
			
			<p>
			{copyright_notice} | 
			Design by: <a href="http://www.styleshout.com/">styleshout</a> | 
			{powered_by} <a href="{glFusion_url}">glFusion</a> | 
			{execution_textandtime}
			
   		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			
			<a href="index.html">Home</a>&nbsp;|&nbsp;
   		<a href="index.html">Sitemap</a>&nbsp;|&nbsp;
	   	<a href="index.html">RSS Feed</a>
   		</p>
				
		</div>	

<!-- wrap ends here -->
</div>

</body>
</html>

and paste it back into footer.thtml overwriting:

    {centerblockfooter-span}
	<table border="0" cellpadding="0" cellspacing="0" width="100%" class="footer-divider-top">
      <tr>
        <td width="70%" class="footerblock">{copyright_notice}</td>
        <td width="30%" class="footerblock" style="text-align:right">{powered_by} <a href="{glFusion_url}">glFusion</a>&nbsp;<br>{execution_textandtime}&nbsp;</td>
      </tr>
    </table>
</body>
</html>

9. Save your changes to footer.thtml and upload them to your web server. Refresh your browser and take a look.

You'll notice things look a little funky. This is because by default, glFusion displays much more information in the footer, breaking it up with info on the right and left sides. They also used a line break tag < br > in the language file ( (path_to_glFusion)/language/english.php in my case) to split the copyright info over two lines (shame on them for not keeping all layout code in .thtml files!) ;-). For this theme however, we will definitely want to make some changes. Don't worry though, we will take care of that, and some issues we saw earlier, in the next step!

Back to:Step Four - Modifying the Body
Next up:Step Six - Cleaning Up

glfusion/development/themes/porting_a_theme/step_five.txt · Last modified: 2017/04/12 21:15 (external edit)

Page Tools