second HTML header in the forum files?

New Member Joined: Oct 09, 2006 Posts: 11

I've been working on fixing up a theme for the website I'm currently administering, based on modding fisubice (came with currently latest ravennuke release), and have found a few inconsistencies. Among linebreaks in the bbcode table that cause spaces between bbcoded text and non-bbcoded, and the forums.css not being loaded, but overridden through embedded stylesheets in overall_ and simple_header.tpl, I have noticed that there is an additional HTML header inside of those files.
Everything from doctype to meta tags is in this second header, and another body tag as well, and this secondary header overrides settings input from the first one from nuke from the actual theme itself (style.css).
I found the same in the subblack and deepblue themes.

My main question here is why this secondary header is in there. Especially since it doesn't seem very kosher to have a two headers in the same html/php file loaded in your browser (though I'm no expert, I just dabble).

Does it serve a specific function, that if removed, will render the forum theme useless? Does it ensure that certain functions (images, textstyle) of the forum will work differently? If the latter, is it necessary to keep it there, or could the same be achieved by simply embedding the required changes in the theme.css?

Any information would be helpful.
Regards
Quin

Posted: Mon Nov 06, 2006 8:34 am

When I got Nuke 7.9 I had perhaps a similiar issue; a second header and the forums css was being sent on ever page. I'll have to go check my files at home to see what I did to fix it, it was so long ago. I remember taking the forums css and appending it to my theme's css. However I did find that for IE6, I did have to send some of the forum's css with each page to get some things to work. I chalked it up to IE6 being so badly broken with respect to css (other browsers were fine). I remember putting that code in the custom header file. Anyway, sorry for posting wihout my facts in front of me, but yes I saw some weird stuff like that too.

Posted: Mon Nov 06, 2006 6:04 pm

It is definitely an integration issue. This came up recently in an internal RavenNuke discussion. It is "on the list" to fix, but not sure if it will make it into 2.10.00... we have to draw the line somewhere or we'll never get this thing "out the door"... Laughing

Posted: Mon Nov 06, 2006 6:45 pm

Apparently what I did was this:

Took the css out of overall_header.tpl and appended it to my theme's style.css file.

Then I found IE6 refused to render the forums properly with all of the css in an external file. Mad

So I had to "resend" a portion of the forum's css with each page. Through trial and error I determined how much css needed to be sent to make things look right.

To send the css with each page (in the header this time!!), I created a file under includes/custom_files called custom_head.php. Nuke is already setup to look for custom_head.php, and if it is there, to execute it. All custom_head.php does is read a file called custom_head.html (which contains the css that needed duplication) and echos it (via the implode/file trick).

Thanks to subversion I can tell you all this, otherwise it would be long forgotten. Cool

Posted: Mon Nov 06, 2006 6:49 pm

You might also be able to "wrap" that code, which is echo'ing out the link to the external CSS file, with something like:

if ($module_name=="Forums" || $module_name=="Private_Messages" || $module_name=="Message_List") {
<<echo out the link to a .css file>>
} else {
<<echo out the link to a different one>>
}

Or something like that depending upon what you really want.

BTW, you may need a statement like this ahead of this code:

global $module_name;

Regular Joined: Feb 16, 2005 Posts: 67 Location: Canada

I had to cut the second head statement out and merge the css files to get html valid. It took some messing around but eventually it worked with all the css in one external file. I had to alter some of the entries in the css file and in the template to prevent the wrong style from showing. Glad to see you got it working, wouldn't it be great if all themes allready had this done!

Posted: Tue Nov 07, 2006 5:29 am

Well, that takes care of the stylesheets, but what about the second header? I mean if you open those two files in the abovementioned themes (the only I had which had forum adaptions), then you'll see there's an actual HTML header and another body tag in there (here simplified):

Code:

<head>


</head>


<body>

That's what I'm most confused about really.

Posted: Tue Nov 07, 2006 11:52 am

Just delete the header stuff in the forum template. Nuke is already generating a header.

Posted: Tue Nov 07, 2006 4:12 pm

To be honest, this remains a key problem in Nuke.

When I wrote my own bbtonuke port, I completely stripped out all of the module level CSS. (I say stripped, when I should really say that CSS was built without any modules and in a more (future vision) compliant manner. The result is a MUCH smaller CSS file, and thus improved performance. You don't want comments, you don't want extra lines of any kind, nor spaces. In fact, short-hand is even better.

Why is this important? Because the size of CSS files dramatically impacts overall site performance. Since you don't need "Forums" CSS for non-forums modules, why load it? Instead, my strategy allows you to simply write a CSS file for the module in question and then include that CSS file at: themes/YOUR_THEME/style/MODULE_NAME.css

There are major advantages to this approach. While it allows you to eliminate unwanted CSS on pages where it isn't needed, it also brings new CSS functionality (yeah, those intense things that Nuke doesn't do) to 3rd party modules that are written with their own templating systems and in doing so, can run that inside a "shell" of your default theme (as a module) with very little modifications.

To make this work is simple.

I created my own standard for this that looks like this.

First, the header.php function needs to recognize if ANY module has an independant CSS as well as the theme's CSS.

header.php

Code:

    echo "<link rel=\"StyleSheet\" href=\"themes/$ThemeSel/style/style.css\" type=\"text/css\">\n\n\n";


    if(defined('MODULE_CSS')) {


          echo "<link rel=\"StyleSheet\" href=\"themes/$ThemeSel/style/$module_name.css\" type=\"text/css\">\n";


        }

Next, inside any page of module component, define that it has a CSS file. For example:

Code:

define('MODULE_CSS', true);

You can put that either in the index.php of a module (if that's the root base for it) or a common file that is used by the module like a common.php file.

Cut all of the CSS out of the forums header files (simple and overall) (AS WELL AS IN THE DEFAULT THEME, because yeah, it's in both places in most nuke themes) and after you gutt out the spaces and consolidate functions, save it as:

themes/YOUR_THEME/style/Forums.css

The result is whenever you are on a forums page, it will load the forums components CSS. This works in action on my domains and to date, without any problems and yeilding much better performance.

You can then have really clean forums "headers". For example, my simple_header.php which is 100% W3C Compliant, looks like this.
http://1cms.org/modules.php?name=Forums&file=viewtopic&p=157#157

I've posted the above URL because like most sites, this one can't support me pasting in the code. It is being rejected/filtered by the replicated (unnecessary) security filtering configuration. Sad

Anyway, you might consider this method instead of using the custom_header.php function that will force the load on every page.

Hope this helps!
Steph

Posted: Tue Nov 07, 2006 5:04 pm

Isn't true that browsers will cache css files though? That is the big advantage of putting all your css in an external file instead of sending it with every page.

Posted: Tue Nov 07, 2006 5:25 pm

Gremmie wrote:

Isn't true that browsers will cache css files though? That is the big advantage of putting all your css in an external file instead of sending it with every page.

Nuke loads external by default, except in how the forums module *used to* (depending on you have it coded in your site and theme) handle it.

The above method that I describe uses the reference in the appropriate head section of the overall page and is in fact external. Keep in mind, CSS must load before content.

Small size does matter if only for the reason that most browsers block page display while waiting for the style sheet to load. On top of everything else, having styles defined in forum overall_header pages is not W3C compliant as the head arguement has already been closed by Nuke (except in the case of simple_header used for popups). My solution addresses that problem directly in not only improving performance (in AND out of forums) but at the same time (for the first time) makes forums pages W3C compliant.

In any case linked CSS is better than simply including it in the header.tpl's though you will find that both the bbtonuke ports as well as 99% of the themes out there in some places include CSS in their forums/Private Messages header files, albeit incorrect and non-compiant.

Posted: Tue Nov 07, 2006 6:09 pm

Thank you Steph, that basically answers the question I had about that.

Now just to figure out how to implement that.

Wanders off, mumbling about learning to properly program this stuff. Rolling Eyes

Posted: Tue Nov 07, 2006 7:04 pm

Steph, I hear what you are saying, and your solution is pretty cool, but I'm just saying that I think browsers cache css files. So a browser will get a page of content, then realize it needs to load external style sheets, and it may decide it doesn't need to as it may have one cached, speeding up the whole process. I've seen this behavior myself. I wish I had a dime for every time I made a change to my css file and not have the change show up. I tear out my hair wondering why it doesn't work, only to finally remember the browser is caching an older copy. Once I clear my browsers cache it works.

I only added css to my custom_head file to make IE6 happy, as it did not seem to like all of the css being in an external file. Even now, my forums are inconsistently displayed under IE6 (sometimes links are underlined and sometimes they aren't)...I'm using subSilver. No other browser does this. IE6 really sucks at CSS2.

quindoma, its not hard to fix. Chop out the extra header and body tag from the overall_header.tpl. Take the css from that file and append it to all your themes style.css files. I may have forgotten a detail or two but thats it in a nutshell. I ran Nukes output through a HTML and CSS validator a few times to find all these problems. Nuke is really bad about being HTML compliant, its pretty embarassing. You'd think FB would have checked that. Taking pride in ones work and all that...

Posted: Wed Nov 08, 2006 5:11 am

Gremmie wrote:

Steph, I hear what you are saying, and your solution is pretty cool, but I'm just saying that I think browsers cache css files. So a browser will get a page of content, then realize it needs to load external style sheets, and it may decide it doesn't need to as it may have one cached, speeding up the whole process. I've seen this behavior myself. I wish I had a dime for every time I made a change to my css file and not have the change show up. I tear out my hair wondering why it doesn't work, only to finally remember the browser is caching an older copy. Once I clear my browsers cache it works.

That is only the case if your 1 CSS file has it all AND it only happens if the page calls for the CSS file every time, which is the default build configuraiton of Nuke. That manner is neither good performance wise, nor logic wise in that unneeded CSS would load with every page.

In the case of using my mod above, I have basically cut the default CSS in half which makes every page load much faster and as described by putting the CSS for other modules in supplimental CSS files, it only loads the CSS that it needs on a page, for that page.

If the CSS code doesn't exist in an external "Forums.css" it will not load, making it work properly on forums as well as non-forums pages. While the call is an external HREF, again, it must be identified in the HEAD section for any page of any module where it would be needed and (again) it only loads when needed because of this design.

Gremmie wrote:

I only added css to my custom_head file to make IE6 happy, as it did not seem to like all of the css being in an external file. Even now, my forums are inconsistently displayed under IE6 (sometimes links are underlined and sometimes they aren't)...I'm using subSilver. No other browser does this. IE6 really sucks at CSS2.

Actually, it is probably having conflicts with both existing forums styles in the default "theme" CSS conflicting with forums style code on forums sections pages. You might also look for IE specific CSS in the formIE.css and/or in the subSilver.css. Again, if you have bad formatting, most likely it is because of conflicts and replicated styles THAT DO EXIST. Again, I can't emphasize enough that you really don't want forums CSS styles to load with every page if for no other reason than it doesn't have to.

Gremmie wrote:

quindoma, its not hard to fix. Chop out the extra header and body tag from the overall_header.tpl. Take the css from that file and append it to all your themes style.css files. I may have forgotten a detail or two but thats it in a nutshell. I ran Nukes output through a HTML and CSS validator a few times to find all these problems. Nuke is really bad about being HTML compliant, its pretty embarassing. You'd think FB would have checked that. Taking pride in ones work and all that...

Important Note: Finally, I want to point out that by putting ANY CSS directly in the custom_header.php file, you are in fact forcing your domain to use only ONE theme. Doing it in the manner that I identified enforces that CSS exists only in a pre-designated place for EACH theme (in that theme's folder), which is in fact the way it should work so your domain can support more than one theme, OR should you ever change themes, you will have no need to alter that baseline code which would conflict with the new or "other" theme's definitions.

You'll see that my examples not only make the pages W3C Compliant (something that I've spent 3 years working on) but it also only calls the CSS on pages where it is needed (efficient).

While true, FB should be embarrassed, my domains are working examples of Nuke recoded for 100% W3C Compliance for the past couple of years.

I should mention that I have worked on W3C Compliance in detail and have had the only 100% W3C Compliant Nuke-based Domains in existance for those past couple of years, so this kind of thing is actually, "right up my alley".

A visit to my 1CMS.ORG domain demonstrates this (as a member, you can see both my "a4" theme and my fully fixed "DeepBlue" theme working with 100% W3C Compliance!).

I have also demonstrated 100% W3C XHTML 1.1 and UTF-8 for all versions of nuke from 7.4 on, so yes, it can be done.

By the way, browser Caching was implemented to support a World where people used 28.8 dial-up modems. If you use broadband, you should turn browser caching off to get the real feel of how the Internet works. Smile

Steph

Posted: Wed Nov 08, 2006 2:05 pm

64bitguy wrote:

That is only the case if your 1 CSS file has it all AND it only happens if the page calls for the CSS file every time, which is the default build configuraiton of Nuke. That manner is neither good performance wise, nor logic wise in that unneeded CSS would load with every page.

Your last sentence doesn't make sense to me. If I only have 1 CSS file, and it is sent with every request (meaning a <link> to it is present in every <head>), the browser is probably going to cache it. I'll give you that your method is probably better without caching, but in the presense of caches, it probably doesn't matter. Plus there is no PHP code to maintain or execute that decides which <link> gets put in the header on every page generation.

And.... like I said, I really wish I didn't have to send CSS in custom_head.php. It was the only way I could get things to work under IE6. All I'm doing is duplicating some of the css that is already in the linked css file and sending it with the page. And yes, my site only has 1 theme, so this won't work for everyone. But again, its just a work around for IE6. If I had more than 1 theme I would do what you suggest.

Cheers.

Posted: Wed Nov 08, 2006 3:32 pm

Gremmie wrote:

64bitguy wrote:

That is only the case if your 1 CSS file has it all AND it only happens if the page calls for the CSS file every time, which is the default build configuraiton of Nuke. That manner is neither good performance wise, nor logic wise in that unneeded CSS would load with every page.

Your last sentence doesn't make sense to me. If I only have 1 CSS file, and it is sent with every request (meaning a <link> to it is present in every <head>), the browser is probably going to cache it. I'll give you that your method is probably better without caching, but in the presense of caches, it probably doesn't matter.

Actually, that's incorrect. Even with Caching, if you don't call it, you don't get it.

Your method forces CSS on every page and NOT through a cacheable HREF call, but rather by forceably placing the physical definitions on every single page, on top of loading the default theme CSS through the linked call. Remember that having "the actual CSS definitions" outside of a linked .css file (in the custom_header, for example) forces that down to every page in every browser and NOT as linked (cacheable) CSS, but as actual style definitions! Even in modules that may have conflicting styles! My way prevents that by referencing only cacheable CSS that is needed, and only when it is needed.

Let me solve your problem.

1) Put all of your forums css code from your custom_header in a file called "Forums.css"
2) Save that file to /themes/YOUR_THEME/style/Forums.css
3) Edit

/modules/Forums/nukebb.php
Find:

Code:

global $db, $prefix, $phpbb_root_path, $nuke_root_path, $nuke_file_path, $phpbb_root_dir, $module_name, $name, $file;


$module_name = "Forums";

Add after that on a new line:

Code:

define('MODULE_CSS', TRUE);

4) Edit

/header.php
First find the "global" line and add "$module_name, " to it.
For example:

Code:

global $slogan, $sitename, $banners;

Would become:

Code:

global $slogan, $sitename, $banners, $module_name;

Next Find:

Code:

    echo "<link rel=\"StyleSheet\" href=\"themes/$ThemeSel/style/style.css\" type=\"text/css\">\n";

Add after that on a new line:

Code:

    if(defined('MODULE_CSS')) {


          echo "<link rel=\"StyleSheet\" href=\"themes/$ThemeSel/style/$module_name.css\" type=\"text/css\">\n";


        }

If you use the method of simple_header.tpl and overall_header.tpl (that I defined on my website at http://1cms.org/modules.php?name=Forums&file=viewtopic&t=46), this method will allow everything to work in forums and all versions of Internet Explorer. I'm assuming you've already taken the replicated header stuff out of those pages as I did in which case, you don't need to edit anything else.

In a nutshell, the nukebb.php gets called by everything (for Forums and PM modules) so it will only load the Forums.css on Private_Messages and Forums module pages (when it should).

Gremmie wrote:

Plus there is no PHP code to maintain or execute that decides which <link> gets put in the header on every page generation.

Module designers I have found have no problems with adding 1 line of code to get full module styles customization for any theme for any module. Including such CSS code in the custom_header.php would be unrealistic as it impacts every page, whereas with my method, every module, ANY MODULE can now support custom CSS for any theme type.

Gremmie wrote:

And.... like I said, I really wish I didn't have to send CSS in custom_head.php. It was the only way I could get things to work under IE6. All I'm doing is duplicating some of the css that is already in the linked css file and sending it with the page. And yes, my site only has 1 theme, so this won't work for everyone. But again, its just a work around for IE6. If I had more than 1 theme I would do what you suggest.

Cheers.

Like I said, edit the THREE FILES above and you're done (if you removed the replicated doctype, header and all that junk from your overall_header.tpl and simple_header.tpl files, which it sounds like you already did.) I can't image an easier fix for a substantial performance gain and fix of the problem at the same time.

Posted: Wed Nov 08, 2006 4:07 pm

I'll try it out, thanks for the tips!

Posted: Wed Nov 08, 2006 5:29 pm

Well I got those changes in, but I'm running into the same problem I had before. The CSS just does not work when its all in a separate file. In particular, the table headers (<th>) are not filled in with the background images. I like your approach 64bitguy, and I'll drive on with it. I think there just must be something not correct with the subSilver css or something.

In other words:

Code:




/* Header cells - the blue and silver gradient backgrounds */


th {


   color: #FFFFFF; font-size: 11px; font-weight : bold;


   background-image: url(modules/Forums/templates/subSilver/images/cellpic3.gif);


}





td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {


         background-image: url(modules/Forums/templates/subSilver/images/cellpic1.gif);


         background-color:#D1D7DC; border: #FFFFFF; border-style: solid; height: 28px;


}

doesn't seem to be getting applied unless I also send it with the page in custom_head.php.

This is happening in Firefox 2.0 and IE7.

Posted: Wed Nov 08, 2006 6:19 pm

Okay, I'm on to something. I did some googling, and it appears that pathnames are relative to the stylesheet. So this does appear to work:

Code:




th {


   color: #FFFFFF; font-size: 11px; font-weight : bold;


   background-image: url(../../../modules/Forums/templates/subSilver/images/cellpic3.gif);


}

This is probably another PHP-Nuke/phpBB integration thing.

Cheers!

Posted: Wed Nov 08, 2006 6:23 pm

And of course IE7 is still inconsistently underlining links in the forums. Razz

But I guess I can still live with that. Thanks 64bitguy!

Posted: Wed Nov 08, 2006 6:39 pm

One more thing 64bitguy, I had to add a "global $module_name;" to my header.php, but I can see how that may or may not be there depending on what version of nuke you have.

Cheers.

Posted: Wed Nov 08, 2006 9:02 pm

Yes, I should have mentioned the global. My bad.

Another thing is to go ahead and put the forums CSS link into your simple_header.php too (I found this fixed a look and feel issue the topic_review templates that also uses the simple_header.tpl for the sub-body of previews.

I have modified the above code accordingly.

To address the url underlining issue in IE7, you'll need to keep in mind that phpBB templates (forum .tpl files) included with nuke as well as most of the ones for phpBB itself were not designed to work with IE7 nor to deeply root styles with CSS. With that in mind, if you want a more consistent look in IE7, you'll need to modify your .tpl files (as I have most of mine) as well as your CSS files to be more compliant to CSS standards and to call the styles throughout the templates (classes, classes, classes). Things such as "order" mean a lot and that has historically been overlooked by phpBB, but especially Nuke where a compliant theme has NEVER been included.

Posted: Wed Nov 08, 2006 9:24 pm

Thanks. BTW the "URL underlining issue" is also present in IE6. It's not present with Firefox or Safari. I've studied the resulting HTML from phpBB and I can't see anything wrong. The text that does or does not get underlined has the same class as the others that do work. But now that you've started me on this track maybe I'll study it some more.

Posted: Wed Nov 08, 2006 9:42 pm

It's probably not defined in the right order. Also, keep in mind in IE7 that "text-decoration:none;" will remove it where you may want it. I

The ruquired order would be:

a:link {}
a:visited {}
a:hover {}
a:active {}

Posted: Wed Nov 08, 2006 10:05 pm

WOW!

I think you've hit upon it.

I had css like this:

Code:




.forumlink        { font-weight: bold; font-size: 12px;  }


a.forumlink      { text-decoration: none;  }


a.forumlink:visited  { text-decoration: none;  }


a.forumlink:hover { text-decoration: underline;  }

Changing it to this seems to have done it!

Code:




.forumlink        { font-weight: bold; font-size: 12px;  }


a.forumlink:link  { text-decoration: none;  }


a.forumlink:visited  { text-decoration: none;  }


a.forumlink:hover { text-decoration: underline;  }


a.forumlink:active { text-decoration: underline;  }

Note that I had to add a :link to one and then added an :active.

I have many, many links like this in the css. I will play with this more tomorrow. You rock 64bitguy!! This problem has annoyed me for months!