glFusion Wiki

Site Tools


glfusion:development:themes:porting_a_theme:step_four

Step Four - Modifying the Body

Making the necessary changes for the body of the theme is not much different from what we just did with the header. The only difference is that code is split over multiple .thtml files. Let's take a moment and examine how glFusion builds the body of a page, using one html table.

The first reference to the body is actually found back in header.thtml. The code below builds the left column and story content area:

    <table border="0" cellspacing="0" cellpadding="0" width="100%">
        <tr>
            {left_blocks}
            <td class="story-container" width="100%" style="vertical-align:top;">
                <div class="header-welcomeanddate-box">
                    <div class="header-welcomeanddate-text">
                        <a href="{site_url}">{welcome_msg}</a><br>{datetime}
                    </div>
                </div>

                <!-- START OF CONTENT AREA -->

Notice that the code for the <table> doesn't close in this file? This is because it resides in the footer.thtml file:

            <!-- End Content Area -->
          </td>
          {right_blocks} </tr>
    </table>

If you think of these two pieces of code as bookends on a shelf, the “books” (aka other .thtml files) that will be placed inside when you view the homepage, would be ordered like this:

  1. leftblocks.thtml
    1. blockheader-left.thtml
    2. blockfooter-left.thtml
  2. featuredstorytext.thtml
  3. storytext.thtml
  4. rightblocks.thtml
    1. blockheader-right.thtml
    2. blockfooter-right.thtml

So with that in mind, what I like to do when porting a theme is open all those files in sequence in Notepad++ (along with header.thtml and footer.thtml on either end), and then open the original theme's index.html file and right-click on the tab and select “Go to another View”. Now we can easily follow the progression of the code and insert our changes into the .thtml files as we go.

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.

Left Blocks

1. Since the Refresh theme doesn't use a <table> in its layout, but instead uses a fixed width <div> to wrap the entire body content, we will make that our first change. Find the following in index.html:

<!-- content-wrap starts here -->
<div id="content-wrap">
				
	<div id="sidebar">

copy and paste it into header.thtml overwriting:

    <table border="0" cellspacing="0" cellpadding="0" width="100%">
        <tr>

That takes care of the first part, but let's pause for a moment to consider something important.

Notice the vertical dotted lines in Notepad++ that seem to align <tag> elements in the file? This is a helpful guide that allows you to create more organized code. Typically, opening and closing <tag> elements are aligned in this manner (and code contained within them organized the same way), all the way down to the last piece of code. Taking the time to align these elements will make it much easier to follow where sections of code begin and end (even between multiple .thtml files).

In Notepad++, you can also click on the “-” & “+” buttons next to the line numbers on the left side of the file to shrink or expand whole blocks of code.

So, make sure that your end result from the edit above looks like this:

				{menu_elements}		
			</ul>
		</div>
	<!-- content-wrap starts here -->
	<div id="content-wrap">
				
		<div id="sidebar">
                    {left_blocks}

2. Now, let's find the ending </div> for the content-wrap, and use it to replace the ending </table> code. So back in index.html copy:

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

and paste it into footer.thtml overwriting:

          </td>
          {right_blocks} </tr>
    </table>
We completely removed the {right_blocks} call, as our new theme doesn't use a right column. Make sure to go into the Block Admin panel in glFusion and move all your important blocks to the left column.

3. Now let's go back and copy the end </div> that was referenced in Step 1 above as a “sidebar”. In index.html copy:

			</div>

and paste it into header.thtml overwriting:

            <td class="story-container" width="100%" style="vertical-align:top;">
                <div class="header-welcomeanddate-box">
                    <div class="header-welcomeanddate-text">
                        <a href="{site_url}">{welcome_msg}</a><br>{datetime}
                    </div>
                </div>

For reference, the end of header.thtml should look like this:

    <!-- content-wrap starts here -->
    <div id="content-wrap">
				
	<div id="sidebar">
            {left_blocks}
        </div>

                <!-- START OF CONTENT AREA -->

4. Now let's look at the {left_blocks} call in header.thtml and see what needs to be changed. Remember that {left_blocks} is replaced with code dynamically generated by glFusion. This code is made up of leftblocks.thtml, and within that blockheader-left.thtml and blockfooter-left.thtml. In leftblocks.thtml we want to remove all reference to the search form box (since we already implemented that in the site header), and glFusion's default <div> call. So delete:

<td class="block-featured-left" style="vertical-align:top;">
                    <div class="searchform-box">
                        <form class="searchform-elements" action="{site_url}/search.php" method="GET">
                            <input type="text" name="query" size="28" maxlength="255"><br>
                            <input type="hidden" name="type" value="all">
                            <a href="{site_url}/search.php" class="advancedsearch">{button_advsearch}</a>&nbsp;
                            <input type="hidden" name="mode" value="search">
                            <input type="submit" value="{button_search}">
                        </form>
                    </div>
                    <div class="block-bg-left">

We also don't need:

                    </div>
                </td>
                <td class="block-outerborder-left">
                    <div style="background:transparent; width:10px; height:1px;"></div>
                </td>

You should end up with the following:

<!-- Start of Left blocks -->

                        {glFusion_blocks}
                        <div class="block-bg-spreader"></div>

5. Now let's dive further into the {glFusion_blocks} call and take a look at blockheader-left.thtml and blockfooter-left.thtml. In blockheader-left.thtml change:

<div class="block-box-left">
    <span class="block-helpicon">
        {block_help}
    </span>
    <h2>{block_title}</h2>

to:

                             <h1>{block_title}</h1>
                                 <div class="left-box">
                                     <p>

In blockfooter-left.thtml change:

</div>
<div class="aligncenter">
    <div class="block-divider-left"></div>
</div>

to:

                                     </p>
                                 </div>

Save your changes to all the fiels modified above, and upload them to your web server overwriting the existing ones. Refresh your browser page and you should have something that looks like this:

Main Content Area

6. In our original Refresh theme, the main content area begins with the <div id=“main”> tag. glFusion's main content area begins at the very bottom of header.thtml. So copy <div id=“main”> from index.html and paste it at the bottom of header.thtml as follows:

		<div id="main">
                <!-- START OF CONTENT AREA -->

Let's also close out that <div id=“main”> tag by inserting a closing </div> tag in footer.thtml at the top like this:

            <!-- End Content Area -->
	    </div>

7. Now let's take a look at the actual formatting of a story. First, we'll modify featuredstorytext.thtml. For this particular theme, we don't want the featured story to look any different from a regular story. The only difference is that the featured story will render at the top of the page, regardless of the publication date.

You will also notice in the picture above that the title of the story is currently invisible because it is being styled by the a:link.non-ul stylesheet selector. This is making it white, like the site name in the header. To change that we will need to create another selector entry in style.css, but don't worry, we will do that in a later step during cleanup. It's best not to get sidetracked. ;-)

glFusion also provides us with many variables that render information about the story. Don't feel that you always have to use every option that glFusion provides. For this theme (which is geared towards a personal blog) we basically only need to wrap the title in a <h1> tag, wrap the {story_introtext} in a <p> tag, and move some things around in the story footer. The easiest way to do this is copy the necessary { } elements from featuredstorytext.thtml and paste them into index.html. Once we have everything we need, then we will copy the whole block of code back over into featuredstorytext.thtml.

So first, from featuredstorytext.thtml copy:

{start_storylink_anchortag}{story_title}{end_storylink_anchortag}

and paste it into index.html overwriting the text within the <h1> tag like this:

<h1>{start_storylink_anchortag}{story_title}{end_storylink_anchortag}</h1>

Next, from featuredstorytext.thtml copy:

{story_anchortag_and_image}{story_introtext}

and paste it into index.html overwriting the text within all the <p> tags. Your end result should look like this:

				<h1>{start_storylink_anchortag}{story_title}{end_storylink_anchortag}</h1>
				
				<p>{story_anchortag_and_image}{story_introtext}
</p>
				
				<p class="post-footer align-right">					
					<a href="index.html" class="readmore">Read more</a>
					<a href="index.html" class="comments">Comments (7)</a>
					<span class="date">Oct 01, 2006</span>	
				</p>

Now copy the desired footer { } tags into index.html, making sure to change the <a href> tags to <span> tags as follows:

				<p class="post-footer align-right">					
					<span class="readmore">{readmore_link}</span>
					<span class="comments">{post_comment_link}&nbsp;{start_comments_anchortag}{comments_with_count}{end_comments_anchortag}</span>
					<span class="date">{story_date}</span>	
				</p>

Finally copy the entire story formatting back into featuredstorytext.thtml. The entire file should look like this:

            <h1>{start_storylink_anchortag}{story_title}{end_storylink_anchortag}</h1>
				<p>{story_anchortag_and_image}{story_introtext}</p>

				<p class="post-footer align-right">					
					<span class="readmore">{readmore_link}</span>
					<span class="comments">{post_comment_link}&nbsp;{start_comments_anchortag}{comments_with_count}{end_comments_anchortag}</span>
					<span class="date">{story_date}</span>	
				</p>

8. Since our featured stories will also look like regular stories, copy the exact code above and paste it into storytext.thtml as well. Save all your changes to the above files and upload them to your web server. Refresh your browser page and have a look. You should have something similar to this:

At this point, we'll move on to the site's footer. If you haven't already, I recommend taking a little break. Get up, stretch, spend some time with friends or a loved one. It will do you good! :-D

Back to:Step Three - Modifying the Header
Next up:Step Five - Modifying the Footer

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

Page Tools