TechDocs/FellowshipHacks/Projects/Blog/ThemeFellowshipClassic

"Classic Green" Theme

This task is part of the FellowshipHacks/Projects/Blog project.

Goal

Debug/improve the "Classic Green" Wordpress theme used in blogs.fsfe.org

People

People working on this task.

Volunteers are always welcome! Have a look at FellowshipHacks/Projects/Blog to know how you can help

Status

Last updated on: 100311

Some pages don't display correctly. See below for details.

Bugs

Width of the central area

The width of the central (white background) area depends on line length, so in some cases (page not found, search results) it's too narrow, while in others it's too wide. The central area should have a fixed (or percentage) width, and the text should adapt to this, not vice versa.

There seems to be a problem with the inner-wrapper element not wrapping the content element, thus permitting the content section to have its own width. Also, the page claims to be XHTML but is not well-formed.

Affected pages:

Truncated pages

This is related to the above bug since the well-formedness of the output is the real problem. See below for suggested fixes.

Affected pages:

Page section detachment

Here, the upper part of the page is "detached" from the menu and content region. See below for suggested fixes.

Affected pages:

Some Investigation

The problem appears to be the above well-formed issue, specifically that the footer of the page is the last thing generated, and there doesn't seem to be a contentbottom section or any closing tags for the wrapper or inner-wrapper elements, or for the body or html elements. The following is more or less missing:

</div><!-- end text -->
</div><!-- end content -->
<div id="contentbottom"><div>
</div></div>
</div><!-- end inner-wrapper -->
</div><!-- end wrapper -->
</body>
</html>

The closing div for the text section is added here to make the footer's right border look correct, and thus the closing div currently appearing before the footer section should be removed.

Looking at the CSS, it seems that various rules have been overridden in the fsfe.css file:

#content {
float:left;
}

#contentbottom {
float:left;
}

The former overrides the relative positioning of the content section and makes it only as narrow as the text. The latter appears to prevent the contentbottom section from being displayed in a visible place. Removing these rules permits the correct horizontal dimensions to be observed and the contentbottom section to appear, but then the content area is not tall enough to make the contentbottom section appear below the sidebar.

Adding this rule (in place of the above) at least fixes the vertical positioning (in addition to the horizontal sizing):

#contentbottom {
clear: left;
}

We then just need to persuade the content to fill the available vertical space alongside the menus. -- pboddie 2009-11-22 01:26:04

This can apparently be done for specific pages, like the "about" page (see http://blogs.fsfe.org/pboddie/?page_id=2), by adding this rule to fsfe.css, replacing the above #content and #contentbottom rules entirely:

#footer {
clear: left;
}

This causes the footer to "wait" until the bottom of the sidebar before showing itself.

To summarise, the following things need fixing:

-- pboddie 2010-02-04 19:19:58

At least in the search results and article pages, the lack of any content after the footer may well be a reason for the rendering problems at the bottom of the page. See the above HTML excerpt for the missing closing tags.

-- pboddie 2010-03-05 00:11:15

For the 404 page bug, the well-formedness does not seem to be the problem here, but instead there are two div elements bearing the content identifier - one holding both the menu and content region's div, and the content region's div itself - and the CSS rules are likely to be misapplied in this situation. The fix is to change the content region's div identifier to something else, most probably text:

<div id="text" class="narrowcolumn">

        <h2 class="center">Error 404 - Not Found</h2>

</div>

-- pboddie 2010-03-11 21:57:26

The 404 page is fixed now; it needed both a fix in sidebar.php and replacing <h2> with <h1> in 404.php

-- cri 2010-03-29 15:17:49

Another thing I just saw was that the border on the right edge of the content area is missing on the 404 page. This appears to be due to the text section not encapsulating the footer section:

<div id="text">
        <h1>Error 404 - Not Found</h1>
</div>


<div id="footer">

Looking at the "About" page, it would seem that the end div tag for the text should appear after the end div defining the footer. In other words, footer should appear inside text. -- pboddie 2010-03-29 15:41:22


Category/FellowshipHacksTasks

TechDocs/FellowshipHacks/Projects/Blog/ThemeFellowshipClassic (last edited 2016-03-21 17:50:54 by paul)