Ravens PHP Scripts: Forums
 

 

View next topic
View previous topic
Post new topic   Reply to topic    Ravens PHP Scripts And Web Hosting Forum Index -> How To's
Author Message
spottedhog
Regular
Regular



Joined: Jun 02, 2004
Posts: 88

PostPosted: Mon Apr 03, 2006 3:20 pm Reply with quote

Here is what I created to make W3C compliant themes for a PHP Nuke "fork" SMF-Nuke. [ Only registered users can see links on this board! Get registered or login! ]

A short background: SMF-Nuke is Nuke 7.6 with manually coded 3.2 patches. It has a lot of "stuff" removed like Group Points for example. phpBB has been removed and replaced with SMF (SimpleMachines Forums).

Using SMF, it can be used for Forums, Calendar, Survey, and News. Soooo, we no longer use the original Nuke News module and associated modules and code. Instead, we have 1 line of code to call the SSI.php file (from the SMF code) which pulls the "News" and then it can then be displayed as a module, just like we have at [ Only registered users can see links on this board! Get registered or login! ]

OK, that being said, you can imagine what is a tremendous advantage in making a compliant theme. We can delete all the code associated with creating the News display.

Another thing I have done to the Nuke code is to remove ALL of the $bgcolor and $textcolor from the modules and placed that code in the style.css file. Then in each module I replaced the $bgcolor with class=bgc1.... etc. and removed all the global calls for $bgcolor, etc.

Here are style classes I created:
bgc1, bgc2, bgc3, bgc4, txtclr1, txtclr2 and made the code like this:
bgc1 {background:silver} (for example)

One last thing.... I created a themecontrol.php file and in it I have the $datetime code, the $theuser code, the logo and ad banner code, the navigational code, and also footer code for banner display if needed. This essentially removes all that extra code for $datetime in each theme, and it is also extremely easy to place you ad banner if desired. This way I can have websites use multiple themes and I can control the navigational info, logo, banners, and footer extras all from one file. No need to put that info into each of the multiple themes.

On with the "HowTo".........

I have used the style.css to contain all the info related to the theme. That includes margins, cellpadding, borders, fonts, widths.... All we have in the theme.php file is some pure basic table code and a few globals.

Now the overall concept......

Think of a theme as containing only 6 tables:
header
navigational bar
blocks
OpenTable
OpenTable2
Footer

Now within those elements, you can layout your theme based on how many rows and columns you need.

Let's look at the default theme here at Raven's. Below is how it can be laid out to move all the info into the style.css file:

header: 1 table, 3 rows, 1 data cell per row. Each td can have a background graphic.

navigational bar: 1 table, 1 row, 1 data cell

blocks: 1 table, 3 rows, 1 data cell per row

OpenTable: 1 table, 2 rows

footer: 1 table, 1 row, 1 data cell


I am not a theme expert, but I think a vast majority of themes can be created/converted using the format of 1 table per theme element. For example, there are themes that have graphics completely around the header. Think of that as 1 table with 3 rows and 3 data cells per row. This 3 X 3 arrangement can have the outside 8 data cells with the specific graphics and the inner middle data cell can also have a background graphic but it can also contain the logo and ad banner.

Now think about how to put this info into the style.css file..... In the style.css file, you will need to create a "class" for each data cell and make sure each has a unique name. Then in this "class" you can put in background (either color or graphic url), margin, padding, height, width, border, alignment.

Here is the code I used to convert the Cold Steel theme I have in default at [ Only registered users can see links on this board! Get registered or login! ] ......

theme.php

Code:
<?php


/************************************************************/
/* modified for SMF-Nuke   http://www.smf-nuke.com          */
/* Theme Name: CSS-Coldsteel                                */
/************************************************************/

function OpenTable() {
    echo "<table class=\"ot1\"><tr><td>\n";
}

function CloseTable() {
    echo "</td></tr></table>\n";
}

function OpenTable2() {
    echo "<table class=\"ot2\"><tr><td>\n";
}

function CloseTable2() {
    echo "</td></tr></table>\n";
}

include("themes/themecontrol.php");

function themeheader() {
   global $Header_Code, $navbar;
echo "<body>";
echo "<div class=\"bodyline\">";
/* Begin main code here */          
echo "<table class=\"hdr\">$Header_Code</table>";
echo "<table class=\"navbar\">$navbar</table>";
echo "<table class=\"mid\"><tr class=\"vert-r\"><td class=\"vert1\">";

// Modification to hide left blocks in Modules
if (defined('HIDELEFT')){
  /* Don't display it. */
} else {
  blocks(left);
}
echo "</td><td class=\"vert2\">";

}

function themefooter() {
   global $Footer_Code;   
    if (defined('INDEX_FILE')) {
echo "</td><td class=\"vert3\">";      
   blocks(right);
    }
echo "</td></table>";
/* Begin footer code here */          
echo "<table class=\"ftr\">";
echo "$Footer_Code";
echo "<tr><td><center>";
footmsg();
echo "</center></td></tr></table></div>";


}

function themesidebox($title, $content) {

echo "<table class=\"sidebox\">";   
echo "<tr><td class=\"t-cell\">$title</td></tr>";
echo "<tr><td class=\"c-cell\">$content</td></tr>";
echo "<tr><td class=\"b-cell\"></td></tr>";
echo "</table>";

}

?>



style.css

Code:
DIV      {FONT-FAMILY: Verdana,Helvetica,Sans-Serif; FONT-SIZE: x-small;color:black}

TD     {FONT-FAMILY: Verdana,Helvetica,Sans-Serif; FONT-SIZE: x-small;color:black}
P      {FONT-FAMILY: Verdana,Helvetica,Sans-Serif; FONT-SIZE: x-small;color:black}
.title  {FONT-FAMILY: Verdana,Helvetica,Sans-Serif; FONT-SIZE: x-small;color:black;FONT-WEIGHT:bold}
.content{FONT-FAMILY: Verdana,Helvetica,Sans-Serif; FONT-SIZE: x-small;color:black}
.option {FONT-FAMILY: Verdana,Helvetica,Sans-Serif; FONT-SIZE: x-small;color:black}
.tiny   {FONT-FAMILY: Verdana,Helvetica,Sans-Serif; FONT-SIZE: xx-small:color:black}


img     {border:0}

BODY {background:white;margin:5px}
.bodyline {background:white;border:none;margin:none;padding:none;width:100%}

/* Header.Navbar.Blocks(sidebox).mid.OpenTable.OpenTable2.Footer table properties*/
table.hdr     {background-image: url(images/cellpic_bkg.gif); padding: 2px; border:none; width:100%; height:85px}
table.navbar  {background-image: url(images/cellpic1.gif); padding: none; border:none; width:100%}
table.sidebox {background: none; padding: none; border:1px solid black; width:170px; margin-top:5px}
table.mid     {background: none; padding: none; margin:none; border:none; width:100% text-align: center}
table.ot1     {background: #f1f1f1; padding: 2px; border:1px solid black; width:100%; margin-top:5px}
table.ot2     {background: #c0c0c0; padding: 2px; border:1px solid black; width:100%; margin-top:5px}
table.ftr     {background: #efefef; padding: 2px; border:1px solid black; width:100%; margin-top:3px}

/*Vertical-align table cells to show center and right blocks properly*/
td.vert1  {vertical-align: top; width: 1px}
td.vert2  {vertical-align: top; width: 100%}
td.vert3  {vertical-align: top; width: 170px}/*must be same width as table.sidebox above*/
tr.vert-r {vertical-align: top}


/*Header Cell Properties*/
td.hdr-lft {text-align:left;width:40%;vertical-align:middle}
td.hdr-rgt {text-align:right;width:60%;vertical-align:middle}

/*Block Cell Properties*/
td.t-cell     {BACKGROUND-image: url(images/cellpic3.gif); COLOR: black; FONT-SIZE: x-small; FONT-WEIGHT: bold; FONT-FAMILY:  Verdana, Helvetica, Sans-Serif; TEXT-DECORATION: none;text-align:center; height:30px}
td.c-cell     {BACKGROUND: #f1f1f1; COLOR: black; FONT-SIZE: x-small; FONT-FAMILY:  Verdana, Helvetica, Sans-Serif}
td.b-cell    {background-image: url(images/cellpic1.gif); height:26px}

/*Links properties*/
A:link {color:black;FONT-SIZE: x-small; FONT-FAMILY:  Verdana, Helvetica, Sans-Serif;text-decoration:none}
A:active {color:black;FONT-SIZE: x-small; FONT-FAMILY:  Verdana, Helvetica, Sans-Serif;text-decoration:none}
A:visited {color:black;FONT-SIZE: x-small; FONT-FAMILY:  Verdana, Helvetica, Sans-Serif;text-decoration:none}
A:hover {color:red;FONT-SIZE: x-small; FONT-FAMILY:  Verdana, Helvetica, Sans-Serif;text-decoration:underline}

/* $bgcolor and $textcolor values moved from theme.php file.... some modules use these*/
.bgc1    {background: #ffff80}
.bgc2    {background: #efefef}
.bgc3    {background: #d9d9d9}
.bgc4    {background: #b3b3b3}
.txtclr1 {color: black}
.txtclr2 {color: black)

/* Code for potential text-align */
span.l     {text-align:left}
span.c     {text-align:center}
span.r     {text-align:right}

/* Form elements */
input,textarea,select{
border-color:black;
color:black;
border:1px solid;
font:normal x-small Verdana,Helvetica,sans-serif}

/* The text input fields background colour */
input.post,textarea.post,select{background:#ffffff}
input{text-indent:2px}

/* The input buttons used in Admin files */
input.button{
background:#efefef;border:3px outset black; color:black; font:11px Verdana,Helvetica,sans-serif}

/* The main submit button option */
input.mainoption{background:#fafafa;font-weight:bold}

/* None-bold submit button */
input.liteoption{background:#fafafa;font-weight:normal}

/* Quote & Code blocks */
.code{
background:#fafafa;
border:1px solid #d1d7dc;
color:#006600;
font:x-small Courier,'Courier New',sans-serif
}
.quote{
background:#fafafa;
border:1px solid #d1d7dc;
color:#444444;
font:x-small Verdana,Helvetica,sans-serif}


There are a few things to notice in the style.css file. According to the W3C website, it is best to use abosule size: xx-small, x-small, small, normal for font sizes properties. Also, as much as possible, use the 17 keyword colors for the background colors.

EDIT: I am not so sure that I agree with what W3C says about font sizing. By comparison, IE makes the font maybe 33% larger than what Firefox does. I think I am going to only use the 8px, 10px, 12px, etc. for the themes I convert. At least that font will display nearly exactly the same in IE and Firefox.

OK.... the above theme code has a background graphic in the header, the navigational bar, the block title and bottom of block. These are all called in the style.css file. Smile As you may notice, the code for calling them is this:

b-cell {background-image: url(images/cellpic1.png); height:20px}
--for the bottom block cell

Note how you do not need to put in the absolute URL for the graphic. The change here is that you must put the images folder inside the style folder. This way the style.css will find the relative path. This has another benefit.... You can change the theme name by simply changing the folder name. No need to change the theme name for the path to all the background graphics used. Smile


Thinking ahead...... Now you will not ever need to put anything in the theme.php except for the pure basics. Actually, you could use the same theme.php file as a template for other similar theme layouts.

Using this approach you will have a W3C compliant theme by simply putting all the info in the style.css file.

Well........... I have left out one part for all of you regular Nuke users..... I did not address what to do to create the News module display. I have not looked at that since I have deleted all that code in the themes I have modified. Sorry...... a quick thought could be to move that code into the News module.... (just a thought)


Here is an interesting piece of information..... Do you realize what the total filesize is for a theme like you see here on Raven's site? Probably less than 7k including the graphics.

This can be a start on making W3C compliant themes for PHP Nuke.....


Last edited by spottedhog on Tue Apr 04, 2006 6:50 am; edited 1 time in total 
View user's profile Send private message Visit poster's website
technocrat
Life Cycles Becoming CPU Cycles



Joined: Jul 07, 2005
Posts: 511

PostPosted: Mon Apr 03, 2006 5:18 pm Reply with quote

I hate to burst your bubble but 64bit made a version of nuke that was completely W3C XHTML complaint last year. If he had not got pulled into Katrina stuff we would probably already see it in the wild.

We have also had a pretty close to compliant version and the next release will finally be reasonably close in all the modules.

I will say that using the style sheet is something no one has done. Nice work Wink

_________________
Nuke-Evolution
phpBB-Evolution / phpBB-Evolution Blog 
View user's profile Send private message
spottedhog







PostPosted: Mon Apr 03, 2006 5:39 pm Reply with quote

Actually, I followed Stephen's site and postings and he is who inspired me to make it compliant. I already know he had the 7.8 version compliant and according to his website, he was working on 7.6, etc. until the big wind....

I am not saying what I have done is the first, but as you have just suggested, he has been busy. He has probably made it more purely technical than what I have.

My Nuke Fork direction has been a bit different..... no big deal.

Smile I am aware of what you and others have done..... I have just been in the shadows absorbing info.... lol
 
technocrat







PostPosted: Mon Apr 03, 2006 5:45 pm Reply with quote

Ok, just making sure Wink

Yeah I remember we talk right as we were starting Evo.....that seems like so long ago now. Nice to see your project is progressing well. Very speedy with out the PHPBB rock round the neck. Smile

Is your package out, I would love to take a look at it?
 
spottedhog







PostPosted: Mon Apr 03, 2006 5:54 pm Reply with quote

I need to do some more work/testing with the single user login before releasing it. Otherwise, it is done.

When it is ready for the public, I will put out a News article on the main sites, etc.

And yes, we have talked.... Wink

I just thought I would post what I have worked on the themes so maybe some others can give some inputs. I am always looking for better ways, and themes have not been a major topic that I can ever remember in the past few years. I had to get the nuke code compliant so I could test the themes. lol.....
 
Raven
Site Admin/Owner



Joined: Aug 27, 2002
Posts: 17088

PostPosted: Mon Apr 03, 2006 7:30 pm Reply with quote

Thank you for sharing this with us. I am making this a sticky.
 
View user's profile Send private message
spottedhog







PostPosted: Tue Apr 04, 2006 6:32 am Reply with quote

thanks former hoosier.... Wink
 
Display posts from previous:       
Post new topic   Reply to topic    Ravens PHP Scripts And Web Hosting Forum Index -> How To's

View next topic
View previous topic
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You can attach files in this forum
You can download files in this forum


Powered by phpBB © 2001-2007 phpBB Group
All times are GMT - 6 Hours
 
Forums ©