glFusion Wiki

Site Tools


glfusion:development:themes:porting_a_theme:step_six

Step Six - Cleaning Up

This step might seem relatively easy, but it actually can become the most time consuming. The idea is to fix the issues that we spotted earlier while porting the theme. That, in itself, isn't a big deal. Going through all the pages on your site and making sure everything looks and behaves as expected is what takes the most time.

Let's begin by looking at the issues we discussed earlier. Then, we'll talk about some other things to consider.

1. On the homepage, we see that the story titles aren't showing up. Since the story title is the same color as the background, they blend right in unless you drag your mouse over them and select the text. This is because the selector that is styling the story title text is the same one that styles the header site name.

To fix this, we will need to create a separate selector entry specifically for stories, and create some child selectors to style the links. Since the story title link is generated by {start_storylink_anchortag} and ends with {end_storylink_anchortag} we will wrap that in a <div> and give it a class definition of class=“post-title”. To do this, simply open featuredstorytext.thtml and storytext.thtml with Notepad++. Change the first line in these files to look like:

            <div class="post-title">{start_storylink_anchortag}<h1>{story_title}</h1>{end_storylink_anchortag}</div>

Then, open style.css and add the .post-title class selectors right before the .post-footer selector, like this:

.post-title  h1 a:link, a:visited {
	text-decoration: none;
	color: #4F82CB;
}
.post-title  h1 a:hover {
	color: #4EBF37;
}
.post-footer {
	background-color: #FAFAFA;
	padding: 5px; margin: 20px 10px 30px 10px;
	border: 1px solid #f2f2f2;
	font-size: 95%;	
}

(Special thanks to machinari over in the glFusion forums for help with that one!) This will also fix a render bug in Firefox which displays two of the green square images, so in the end it was a good thing. :-)

2. This brings us to the story footer. *sigh* …While I like the images by the read more and Post a comment links, they are problematic for a couple reasons:

  1. There is the same render bug mentioned above in Firefox 2 where the images are doubled.
  2. glFusion will dynamically turn off those links, depending on if a body to the story was written, or if the author decides they want to allow comments. This would leave the icons just floating there, without the text, doing nothing.

Now, both of these issues can be fixed if we start mucking around in glFusion's language files or other core function files, but as a general guideline for theme building, we don't want to do that. We want to keep all of our changes self-contained in the theme folder as much as possible. For this reason, we will re-arrange things a bit. We are going to get rid of the images, and instead just have text-only links. Also, we will move the {story_date} call up to the top of the story, just under the title, and we will add back the {edit_link} and {page_selector}.

Start by changing archivestorytext.thtml (which should always be changed to match the other two), featuredstorytext.thtml, and storytext.thtml. They should now look like this:

            <h1>{story_title}</h1>
			    &nbsp;&nbsp;{story_date}
				<p>{story_anchortag_and_image}{story_introtext}</p>

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

Then, in style.css delete the background image property from the “.post-footer .comments” and “.post-footer .readmore” selectors. While here, let's give the story footer a little more breathing room between stories by modifying the bottom margin of “.post-footer”. This section of code should now look like:

.post-footer {
	background-color: #FAFAFA;
	padding: 5px; margin: 20px 10px 30px 10px;
	border: 1px solid #f2f2f2;
	font-size: 95%;	
}
.post-footer .date {
	background: url(images/clock.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .comments {
	padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .readmore {
	padding-left: 20px; margin: 0 10px 0 5px;
}

3. To fix the site footer, really the easiest way is to edit the glFusion language file, and trim the copyright text. But again, we will try to avoid it to keep all the theme code changes within the theme folder. I've made some changes and the finished code in footer.thtml looks like this:

		<p>
			&copy; 2007 <a href="{site_url}">{site_name}</a>&nbsp;|&nbsp;
			Design by <a href="http://www.styleshout.com/">styleshout</a>&nbsp;|&nbsp;
			{powered_by} <a href="{glFusion_url}">glFusion</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="{site_url}">Home</a>&nbsp;|&nbsp;
			<a href="{site_url}/profiles.php?uid=2">Contact</a>&nbsp;|&nbsp;
			<a href="{site_url}/stats.php">Stats</a>&nbsp;|&nbsp;
			<a href="{site_url}/backend/glFusion.rss">RSS Feed</a>
   		</p>

The final footer now looks like this:

This would also be a good place for a 'back to top' link. You would need to add an anchor tag somewhere in the header to provide a place to link back to. To learn more about anchor links visit http://www.w3schools.com/html/html_links.asp

4. As you look around in your website, you'll notice that all images have a grey border. The original author did this as a style choice, but since it was applied to all images, it makes the glFusion admin panels (among other things) look funky. So let's open style.css and fix it. Find the following code and delete it:

img {
	border: 2px solid #CCC;
}

Save your changes and upload them to your web server. Now spend a few minutes browsing around your site and let's see if there is anything else that needs attention.

5. If you go to (your_website)/directory.php, you will notice that the title of that section is shifted up partially covering the menu (in Firefox at least). Unfortunately, this page does not have a separate .thtml file governing its layout. We will need to edit (public_html)/directory.php directly.

Open directory.php in Notepad ++, and find the following around lines 439-440 :

    $retval .= '<div><h1 style="display:inline">' . $LANG_DIR['title']
            . '</h1> ' . DIR_topicList ($topic) . '</div>' . LB;

and insert a <p> tag like this:

    $retval .= '<p><div><h1 style="display:inline">' . $LANG_DIR['title']
            . '</h1> ' . DIR_topicList ($topic) . '</div>' . LB;

That will bump down the misbehaving title element, and make everything look normal. Make sure to save the changes you made and upload it to your web server.

6. When you aren't logged in to your site, you will notice that the Username and Password fields look odd, with a lonely “:” pushed down onto its own line. To fix this simply remove the display:block; property and value from the label selector in style.css like this:

label {
	font-weight:bold;
	margin:5px 0;
}

7. Once you have looked around in your theme and are satisfied with the way it looks in your browser, do yourself a favor and take a look at it in other browsers as well. If you use Firefox, make sure it looks the same way in Internet Explorer, Safari (they have a PC version now which makes it easier to test, you don't have to have a Mac! get it at http://www.apple.com/safari/download/ ), Opera, or any other browser that tickles your fancy. This way, you can eliminate any glaring render bugs before someone else notices them and points them out to you! ;-) (like the following…)

8. FIXME IE outer border funkiness

Back to:Step Five - Modifying the Footer
Back to:Porting a Theme

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

Page Tools