glFusion Wiki

Site Tools


glfusion:development:themes:porting_a_theme:step_three

Step Three - Modifying the Header

One of the benefits of glFusion's design is that it breaks up the overall layout into separate, smaller template html or .thtml files, and the GL engine re-assembles them as needed to render a page. Because of this, it becomes very easy to make modifications. We will essentially repeat what we did in the previous step by opening two files in Notepad++. Then we will copy selected code from refresh/Refresh_Original/index.html, and paste it into refresh/header.thtml.

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.

Since HTML and XHTML code is standardized, we can easily identify many of the tags and elements that we need to update. Any code within < >, for instance:

        <li>
            <a href="http://www.styleshout.com/">More Free Templates</a>
        </li>

generally refers to instructions the browser needs to create the page layout and link elements.
Code within { }, for example:

        <div class="header-navigation-line">
            {menu_elements}
        </div>

refers to items that will be dynamically generated by glFusion (via PHP) once the page is called.

Let's begin by opening both index.html and header.thtml with Notepad++. Personally, I've found it easiest to copy {_dynamic elements_} from the .thtml file and paste them over their static text counterparts in the index.html file. Once I've done that for an entire section, I then transfer the completed changes back into the .thtml file.


1. First we want to drop in our dynamically generated {site_name} element into where the header site name resides. To do this, copy:

{site_name}

from header.thtml and paste it into index.html overwriting:

re<span class="gray">fresh</span>

Also, we want to make the {site_name} a link to the homepage, so we add it like this:

<h1 id="logo-text"><a href="{site_url}" class="non_ul">{site_name}</a></h1>

2. Next we copy:

{site_slogan}

and paste it overwriting:

put your site slogan here...

3. Next we need to open another .thtml file, as glFusion's search form is located in the left side column, as opposed to the header of this layout. Open refresh/leftblocks.thtml and copy the method and action tag elements, pasting them into index.html overwriting the existing ones.

The reason we are not overwriting the class element, is because this element refers to the stylesheet selector that we created previously. It will govern how the form looks. The other form elements, method, action, type, name, and value all refer to what glFusion does with the form on the backend. Due to this, we need to make sure we keep these form elements the same so glFusion can find what it needs to process the form.

When you finish, you should have the following:

			<form class="search" method="GET" action="{site_url}/search.php">
				<p>
	  			<input class="textbox" type="text" name="query" maxlength="255" value="" />
	 			<input type="hidden" name="mode" value="search">
                                <input class="button" type="submit" name="Submit" value="{button_search}" />
				</p>
			</form>

4. Next, we take the code that dynamically generates the menu links:

{menu_elements}

and paste it overwriting* the static list of menu links:

<li id="current"><a href="index.html">Home</a></li>
				<li><a href="index.html">Archives</a></li>
				<li><a href="index.html">Downloads</a></li>
				<li><a href="index.html">Services</a></li>
				<li><a href="index.html">Support</a></li>
				<li><a href="index.html">About</a></li>

Also, since {menu_elements} get built by referring to menuitem.thtml and menuitem_last.thtml, we need to edit those files as well. Change menuitem.thtml from:

<a href="{menuitem_url}" class="header-navigation">{menuitem_text}</a>&nbsp;&nbsp;:&nbsp;

to:

<li>
    <a href="{menuitem_url}">{menuitem_text}</a>
</li>

Which removes the glFusion style formatting and makes it a list item like the static links we edited in index.html above.

For menuitem_last.thtml, we change:

<a href="{menuitem_url}" class="header-navigation">{menuitem_text}</a>&nbsp;&nbsp;

to:

<li>
    <a href="{menuitem_url}">{menuitem_text}</a>
</li>

Save the menuitem files and upload them to your web server overwriting the previous ones.

5. Finally, we take all the code that generates the header and menu in index.html:

<!-- wrap starts here -->
<div id="wrap">
		
		<!--header -->
		<div id="header">			
				
			<h1 id="logo-text">{site_name}</h1>		
			<h2 id="slogan">{site_slogan}</h2>
				
			<form class="search" method="GET" action="{site_url}/search.php">
				<p>
	  			<input class="textbox" type="text" name="query" maxlength="255" value="" />
	 			<input type="hidden" name="mode" value="search">
                                <input class="button" type="submit" name="Submit" value="{button_search}" />
				</p>
			</form>			
				
		</div>
		
		<!-- menu -->	
		<div  id="menu">
			<ul>
				{menu_elements}		
			</ul>
		</div>

and paste it back into header.thtml overwriting*:

<div class="header-navigation-container">
        <div class="header-navigation-line">
            {menu_elements}
        </div>
    </div>
    <div class="header-logobg-container-outer">
        <table width="100%" border="0" cellpadding="0" cellspacing="0" class="header-logobg-container-inner">
            <tr>
                <td class="header-logobg-left">
                    <a href="{site_url}/"><img src="{site_logo}" width="151" height="56" alt="{site_name}" border="0"></a>
                </td>
                <td class="header-logobg-right">
                    <span class="site-slogan">{site_slogan}</span>
                </td>
            </tr>
        </table>
    </div>

Save header.thtml to your web server overwriting the existing one. Then take a look at your homepage (make sure to clear your cache!) You should see something similar to this:

Back to:Step Two - Modifying the CSS
Next up:Step Four - Modifying the Body

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

Page Tools