Ravens PHP Scripts: Forums
 

 

View next topic
View previous topic
Post new topic   Reply to topic    Ravens PHP Scripts And Web Hosting Forum Index -> Themes
Author Message
fkelly
Former Moderator in Good Standing



Joined: Aug 30, 2005
Posts: 3312
Location: near Albany NY

PostPosted: Mon Jan 09, 2006 2:30 pm Reply with quote

I've seen a number of postings about the desirability of having a Nuke theme or themes that are driven by CSS rather than tables. I'd be happy if anyone could point me to existing ones but not finding any myself I decided to see what I could do to develop one.

Caveats: read this part ... What follows is an initial attempt to develop a theme that relies on CSS yet which is also compatible with existing Nuke themes (so users can go back and forth). This isn't easy since Nuke and requires a number of changes to mainfile as well as a few to existing themes. I would only recommend trying it to developers who are interested in the concept and who are comfortable "hacking" Nuke code. Be aware that I am a relative newbie at Nuke coding and profess no particular expertise with styles either. And I will be happy to have suggestions or to colloborate with anyone who wants to help.

Background: my site uses Nuke 7.6, patched to the 3.1 level and Sentinel 2.4.2. I only have three themes (deepblue, nukenews and subblack3dblue) plus now skidoo_too. I developed on my server on my home computer and just recently copied the changes over to my real site (webmhcc.org) but I'm afraid that I don't have the facilities to offer a demo there. I don't want to create "dummy" users or make the skidoo_theme be default.

Getting started. Not knowing CSS all that well I borrowed the styles that form the basis for my theme from:

http://webhost.bridgew.edu/etribou/layouts/skidoo/

There is both a two column layout and a three column layout that I am using depending on whether index_file is defined (this tells Nuke to use the right column if it's on in a module).

I started by modifying the Nukenews theme but it quickly became apparent that a css based theme would bear little similarity to a standard Nuke theme. You only need to copy three files to your themes directory. One is theme.php which goes in a skidoo_too directory and and the other two are styles that go in a styles subdirectory of skidoo_too. Without further adieu here they are:

Code:
<?php



/************************************************************/
/* textcolors and opentables are here for compatability with
   base Nuke. 
*/
$textcolor1 = "#000000";
$textcolor2 = "#000000";

function OpenTable() {
 // echo "<div id=\"contentColumn\" class=\"inside\">\n";
 // echo "<div> \n";
   // control the divs in the theme so you dont wind up with multiple
   // basically this is a no-op for compatibility
}

function CloseTable() {
 //  echo "</div>\n";
}

function OpenTable2() {
 // echo "<div id=\"contentColumn\">\n";
 //   echo "<div class=\"inside\">\n";
}

function CloseTable2() {
    //echo "</div></div>\n";
}


function themeheader() {
    global $user, $banners, $sitename, $slogan, $cookie, $prefix, $db, $anonymous;
    cookiedecode($user);
    $username = $cookie[1];
    if (empty($username)) {
        $username = $anonymous;
    }

   if ($banners == 1) {
   include("banners.php");
    }
    if ($username == $anonymous) {
   $theuser = "&nbsp;&nbsp;<a href=\"account-new_user.html\">Create an account";
    } else {
   $theuser = "&nbsp;&nbsp;Welcome $username!";
    }

echo '<body>';   
echo '<div id="pageWrapper">
            <hr class="hide" />
            <div id="masthead" class="inside">';


echo 'Mohawk Hudson Cycling Club';

// masthead content end

 echo '</div>';
 echo '<hr class="hide" />';
 echo '<div class="hnav">';

echo '<ul><li><a href="index.php"><em>Home</em></a><span class="divider"> : </span></li><li><a
   href="modules.php?name=Your_Account">Your Account</a><span class="divider"> : </span></li><li><a
   href="modules.php?name=MHCC_Membership">MHCC Membership</a><span class="divider"> : </span></li><li><a
   href="submit.html">Submit News</a><span class="divider"> : </span></li><li><a
   href="modules.php?name=Ride_Calendar">Ride Calendar</a><span class="divider"> : </span></li><li><a
   href="forums.html">Forums</a><span class="divider"> : </span></li></ul>
</div>';
 echo '<div id="outerColumnContainer"><div id="innerColumnContainer">';   
 // the above are closed in footer            
 echo '<hr class="hide" />';
   if (defined('INDEX_FILE') ) {
      // echo 'calling blocks r <br>';
         blocks("r");
         echo '</div>';
         echo '</div>'; }
         blocks("l");
         echo '</div>';
         echo '</div>';
      // the above close the left and right divs
         echo '<hr class="hide" />';   
          echo '<div id="contentColumn">';
          echo '<hr class="hide" />';
        echo '<div class="inside">'; 
  // these above are closed in footer
   
}

/************************************************************/
/* Function themefooter()                                   */
/*                                                          */
/* Control the footer for your site. You don't need to      */
/* close BODY and HTML tags at the end. In some part call   */
/* the function for right blocks with: blocks("r");       */
/* Also, $index variable need to be global and is used to   */
/* determine if the page your're viewing is the Homepage or */
/* and internal one.                                        */
/************************************************************/

function themefooter() {
    global $foot1, $foot2, $foot3, $copyright, $totaltime;

   echo '<div class="clear mozclear"></div>';
    echo '</div>';
   echo '</div>';
   echo '<div id="footer">';
    $footer_message = "$foot1<br>$foot2<br>$foot3<br>$copyright<br>$totaltime";
         echo '<p class="content">' . $footer_message . '</p>';
         echo '</div>'; // ends footer
   echo '</div></div></div>';  // ends column containers that are started in header and pagewrapper

}

/************************************************************/
/* Function themeindex()                                    */
/*                                                          */
/* This function format the stories on the Homepage         */
/************************************************************/

function themeindex ($aid, $informant, $time, $title, $counter, $topic, $thetext, $notes, $morelink, $topicname, $topicimage, $topictext) {
    global $anonymous, $tipath;
    $ThemeSel = get_theme();
    if (file_exists("themes/$ThemeSel/images/topics/$topicimage")) {
   $t_image = "themes/$ThemeSel/images/topics/$topicimage";
    } else {
   $t_image = "$tipath$topicimage";
    }
   
    if (!empty($notes)) {
   $notes = "<br><br><b>"._NOTE."</b> <i>$notes</i>\n";
    } else {
   $notes = "";
    }
    if ("$aid" == "$informant") {
          $content = "$thetext$notes\n";
   // $content = '<br>' . "$thetext$notes\n";
    } else {
   if(!empty($informant)) {
       $content = "<a href=\"modules.php?name=Your_Account&amp;op=userinfo&amp;username=$informant\">$informant</a> ";
   } else {
       $content =  "$anonymous ";
   }
   $content .= ""._WRITES." <i>\"$thetext\"</i>$notes\n";
    }
    $posted = ""._POSTEDBY." ";
    $posted .= get_author($aid);
    $posted .= " "._ON." $time $timezone ($counter "._READS.")";
   echo '<div id="storycontain">';
    echo '<div id="storytext" class="inside" >';


 echo '<div id="topicimage"><a href=modules.php?name=News&amp;new_topic=' . $topic . '><img src="' .  $t_image .  '"alt="' . $topictext . '"></a></div>';
 echo '<h2>' . $title . '</h2>';
 echo  $content . '<p>' . $posted . '</p><p>' . $morelink . '</p>';
 echo '</div>';
echo '</div>';
}

/************************************************************/
/* Function themearticle()                                  */
/*                                                          */
/* This function format the stories on the story page, when */
/* you click on that "Read More..." link in the home        */
/************************************************************/

function themearticle ($aid, $informant, $datetime, $title, $thetext, $topic, $topicname, $topicimage, $topictext) {
    global $admin, $sid, $tipath;
    $ThemeSel = get_theme();
    if (file_exists("themes/$ThemeSel/images/topics/$topicimage")) {
   $t_image = "themes/$ThemeSel/images/topics/$topicimage";
    } else {
   $t_image = "$tipath$topicimage";
    }
    $posted = ""._POSTEDON." $datetime "._BY." ";
    $posted .= get_author($aid);
    if (!empty($notes)) {
   $notes = "<br><br><b>"._NOTE."</b> <i>$notes</i>\n";
    } else {
   $notes = "";
    }
    if ("$aid" == "$informant") {
   $content = "$thetext$notes\n";
    } else {
   if(!empty($informant)) {
       $content = "<a href=\"modules.php?name=Your_Account&amp;op=userinfo&amp;username=$informant\">$informant</a> ";
   } else {
       $content = "$anonymous ";
   }
   $content .= ""._WRITES." <i>\"$thetext\"</i>$notes\n";
    }
   
 echo '<div id="storycontain">';
    echo '<div id="storytext" class="inside" >';


 echo '<div id="topicimage"><a href=modules.php?name=News&amp;new_topic=' . $topic . '><img src="' .  $t_image .  '"alt="' . $topictext . '"></a></div>';
 echo '<h2>' . $title . '</h2>';
echo  $content . '<p>' . $posted . '</p><p>' . $morelink . '</p>';
 echo '</div>';
echo '</div>';
}

/************************************************************/
/* Function themesidebox()                                  */
/*                                                          */
/* Control look of your blocks. Just simple.                */
/************************************************************/

function themesidebox($title, $content, $side="x")
{
//  echo 'in themesidebox value of side ' . $side . '<br>';
static $rightswitch;
static $leftswitch;
if (defined('INDEX_FILE') ) {
//   need to have rightcolumn div even if no blocks are right
      if (!isset($rightswitch)) {
               $rightswitch = "1";
               echo '<div id="rightColumn">';
                    echo '<div class="inside">';   
                echo '<hr class="hide" />'; } // end of rightswitch
         if ($side == "r")
         {
         echo '<h2>' . $title . '</h2>';
         echo '<span class="content">' . $content . '</span>';
         } // end of side = r
         } // end of index file -- shouldn't get side = r without index file
         
   if ($side == "l") {
         // echo 'in themesidebox with side = l <br>';
         if (!isset($leftswitch)) {
            $leftswitch = "1";
            echo '<div id="leftColumn">';
                echo '<div class="inside">';   
             echo '<hr class="hide" />'; }
          echo '<h2>' . $title . '</h2>';
         echo '<span class="content">' . $content . '</span>'; }
   
}
?>


In styles, this is style.css:

Code:
@charset "iso-8859-1";


/*******************************************************************************
*  base.css : 2005-06-28 : Ruthsarian Layouts
* ------------------------------------------------------------------------------
*  base set of stylesheet rules needed to form the layout, and layout only.
*  color and fonts and such are not handled here.
*  side column widths are defined in EMs. see base_pixels.css for a pixel
*  version instead.
*******************************************************************************/
.content    {
   BACKGROUND: none;
   FONT-SIZE: 11px;
   FONT-FAMILY: arial, Helvetica, sans-serif;
   }
.content10    {
   BACKGROUND: none;
   FONT-SIZE: 10px;
   FONT-FAMILY: arial, Helvetica, sans-serif;
}
.option    {
   BACKGROUND: none;
   FONT-SIZE: 13px;
   FONT-WEIGHT: bold;
   FONT-FAMILY: arial, Helvetica, sans-serif;
}

img.top {vertical-align:text-top}

#pageWrapper
{
   margin: 0;
   width: auto;
   min-width: 600px;
}
#outerColumnContainer
{
   z-index: 1;
   border-color: #fff;   /* set default color to white. set the real
               color inside colors.css */
   border-style: solid;
   border-width: 0 15em;   /* sets the width of the borders used to create
               the left and right columns' background
               color. */
}
#innerColumnContainer
{
   z-index: 2;
   width: 100%;
}
* html #innerColumnContainer
{
   position: relative;   /* fix a render bug in IE under certain
               conditions */
}
#contentColumn
{
   margin: 0 -1px;      /* without this, boxes stop floating next to
               each other */
   width: 100%;
}
#storycontain
{
   margin: 0 -1px;      /*    without this, boxes stop floating next to
               each other  */
   width: 100%;   
}
* html #storycontain
{
   position: relative;

}
#storytext
{
   float: left;
   margin: 0 -1px;
   width: 90%;
   vertical-align: top;
}
#leftColumn, #rightColumn, #contentColumn, #storycontain, #storytext
{
   float: left;
   position: relative;   /* IE has a display/render bug with non-floated
               block elements inside floated block elements.
               setting position:relative on the floating
               element seems to resolve this. */
   z-index: 10;
   overflow: visible;   /* fix for IE italics bug */
}
#rightColumn
{
   float: right;      /* floating this right allows for the right
               column block to appear before the content
               column in the flow of the document. doing
               this allows for any easy 3 column layout
               in NN4.

               There is certainly a lot, in terms of layout
               'theory' about how the flow of the document
               should be. I won't get into it here. */
   width: 15em;
   margin: 0 -15em 0 1px;   /* same as in the #leftColumn selector up
               above. */
}
#topicimage
{
   float: right;
   text-decoration: none;   
   
}
#leftColumn
{
   width: 15em;
   margin: 0 1px 0 -15em;   /* like in the #contentColumn selector, without
               the 1px margin on the opposite side of the
               box, boxes stop floating next to each
               other */
}
#footer
{
   position: relative;
}
#masthead h1
{
   display: inline;   /* personal preference to keep the header
               inline. you could just as easily change
               padding and margins to 0. */
}
.clear
{
   clear: both;
   padding-bottom: 1px;   /* for Gecko-based browsers */
   margin-bottom: -1px;   /* for Gecko-based browsers */
}
.hide, #oldBrowserNotice, .ieSixCharDupBug
{
   /* hide elements that CSS-targeted browsers shouldn't show */
   display: none !important;
}
#contentColumn,  #storycontain, #storytext
{
   border-width: 0;   /* reset value from that in the version 4
               stylesheet. this isn't in borders.css because
               were you to create a print.css and not
               include borders.css, then the v4 border would
               still remain when you print. */
}
/*
   The below block of CSS is invalid, and will invalidate this stylesheet.
   So it is up to you to decide how you want to handle this.  */
* html #pageWrapper
{
   word-wrap: break-word;
}
/*******************************************************************************
*  hnav.css : 2005-08-31 : Ruthsarian Layouts
* ------------------------------------------------------------------------------
*  responsible for the horizontal navigation elements, one of which is usually
*  placed below the masthead but on top of the columns.
*
*******************************************************************************/

.hnav
{
   border-bottom: solid 1px #fff;
   text-align: center;
}
.hnav, .hnav ul li a
{
   /* need to middor veritcal padding on .hnav and child anchor elements
    * because the anchors are _not_ block elements. since they are not
    * block elements web browsers will not expand .hnav to contain them
    * even with the extra padding. by applying the same padding to both
    * the parent .hnav _looks_ like its containing the child anchor
    * elements.
    */
   padding-top: 3px;
   padding-bottom: 4px;
}
.hnav ul, .hnav ul li
{
   display: inline;
   list-style-type: none;
   margin: 0;
   padding: 0;
}
.hnav ul li a
{
   margin: 0 -1px 0 0;
   padding-left: 10px;
   padding-right: 10px;
   border-left: solid 1px #000;
   border-right: solid 1px #000;
   white-space: nowrap;
}
.hnav ul li a:link, .hnav ul li a:visited, .hnav ul li a:active, .hnav ul li a:hover
{
   text-decoration: none;
}
.hnav ul li span.divider
{
   display: none;
}
* html .hnav ul li, * html .hnav ul li a
{
   width: 1%; /* IE/Mac needs this */
   display: inline-block;   /* IE/Mac needs this */
   /* \*/
      width: auto;
      display: inline;
      position: relative;
   /* reset above hack */
}
* html .hnav, * html .hnav ul a
{
   /* \*/ height: 0.01%; /* hasLayout hack to fix render bugs in IE/Win.
             IE/Mac will ignore this rule. */
}
* html .HNAV
{
   padding: 0;   /* IE5/Win will resize #hnav to fit the heights of its
            inline children that have vertical padding. So this
            incorrect case selector hack will be applied only by
            IE 5.x/Win */
}

/*****************************************************************************
*  vnav.css : 2004-07-21 : Ruthsarian Layouts
* ------------------------------------------------------------------------------
*  responsible for the vertical navigation elements commonly found in the left
*  and / or right columns.
*******************************************************************************/

.vnav ul, .vnav ul li
{
   margin: 0;
   padding: 0;
   list-style-type: none;
   display: block;
}
.vnav ul
{
   border: solid 1px #000;
   border-bottom-width: 1px;
}
.vnav ul li
{
   border-bottom: solid 1px #000;
   
}
.vnav ul li a
{
   display: block;
   text-decoration: none;
   padding: 2px 10px;
}
* html .vnav ul li a/* hide from IE5.0/Win & IE5/Mac */
{
   height: 1%;
}
* html .vnav ul
{
   position: relative;   /* IE needs this to fix a rendering problem */
}
.vnav h3
{
   /* perhaps this belongs partly in gutters.css and partly in
      fonts.css. However, the heading size for vnav elements is
      controlled here because it is a specific vnav visual element
      rather than something that's going to be applied to the whole
      layout. So that if you were to remove vnav.css from your
      layout, you wouldn't have any extra, unused CSS in the rest
      of your stylesheets. */

   margin-bottom: 0;
   padding-bottom: 0;
   font-size: 126%;
}

/******************************************************************************/

/*******************************************************************************
*  colors.css : 2004-06-28 : Ruthsarian Layouts
* ------------------------------------------------------------------------------
*  defines background and foreground colors of elements within the layout.
*  sites that want to use different color schemes for different sub-sections
*  of a website need only make different versions of this stylesheet and link
*  or import them as need. The other stylesheets can be shared across the
*  entire site.
*******************************************************************************/

body
{
   background-color: #665;
   color: #fff;
}
#outerColumnContainer
{
   border-left-color: #cc9;   /* left hand column background color */
   border-right-color: #bb8;   /* right hand column background color */
}
#masthead
{
   background-color: #885;
   color: #fff;
}
#footer
{
   background-color: #885;
   color: #fff;
}
#outerColumnContainer, #contentcolumn   /* selector case hack to reset version 4
                  stylesheet setting */
{
   background-color: #fff;      /* this sets the background color on the
                  center column */
   color: #000;
}
#storytext
{
   background: none;
   background-color: #fff;
}
#leftColumn, #rightColumn, #contentColumn, #storycontain, #storytext
{
   color: #000;
}
.vnav ul li a
{
   color: #336;
   background-color: #cc9;
}
/* added 12-26 fjk cause not using vnav */
#leftColumn
{
   background-color: #cc9;
}
#rightColumn .vnav ul li a:hover, .vnav ul li a:hover
{
   background-color: #336;
   color: #fff;
}
#rightColumn .vnav ul li a
{
   color: #336;
   background-color: #ddb;
}
.hnav, .hnav ul li a
{
   background-color: #cc9;
   color: #336;
}
.hnav ul li a:hover
{
   background-color: #336;
   color: #fff;
}
#pageWrapper, #innerColumnContainer, #masthead, #footer, .hnav
{
   border-color: #000;
}

/******************************************************************************/

/*******************************************************************************
*  gutters.css : 2004-07-06 : Ruthsarian Layouts
* ------------------------------------------------------------------------------
*  handles the whitespace between and within elements; such as margins and
*  padding.
*******************************************************************************/

body
{
   margin: 0;
/*   padding: .25em;       remove this padding if you want the layout to
               stretch from edge to edge of the viewport. */
}
p, h1, h2, h3, h4, h5, h6
{
   margin: 1em 0;      /* specifically define this for Opera's sake,
               and also for better consistency across
               all platforms  */
}
.inside
{
   padding: 0 1.5em;   /* this padding is applied to every major box
               within the layout for a uniform gutter
               between borders

               _NOTE_: a small glitch in IE seems to appear
               if this class has vertical padding applied
               to it. so in cases where you want to add
               vert padding, use the parent element. margin
               values here don't work because .inside has
               a key role in border generation */
}
#leftColumn, #contentColumn, #rightColumn, #masthead, #storycontain, #storytext
{
   padding-top: 0.5em;
   padding-bottom: 0.5em;   /* this is the vert padding talked about in the
               previous selector. */
}
#masthead, #footer
{
   padding: 1em;
}
.vnav
{
   margin: 1em 0;
}
html>body #footer
{
   padding-bottom: 1.01em;   /* this is to fix a bug in mozilla that results
               in a 1px line of white below the footer when
               the document gets very long. extremely long
               documents may generate the bug again. if
               you experience that, increasing this value
               may help. i think this is related to moz's
               off-by-one troubles as the bug does not
               occur in any other browser */
}
/******************************************************************************/
/*******************************************************************************
*  borders.css : 2004-07-29 : Ruthsarian Layouts
* ------------------------------------------------------------------------------
*  this stylesheet defines any and all borders that are rendered on the layou.
*  this includes the left and right-hand borders of the #outerColumnContainer
*  element which are used as the backgrounds for the left and right columns.
*******************************************************************************/

#pageWrapper
{
   border-style: solid;   /* explicitly defined within eact selector in
               case you want change border styles (to mix
               it up) between elements */
   border-width: 0 1px;   /* puts a border on the left and right sides of
               the page. #masthead and #footer will handle
               the top and bottom borders */
}
#innerColumnContainer
{
   border-style: none;
   border-width: 0 1px;   /* puts borders between center and the side
               columns. */
   margin: 0 -1px;      /* compensation for the borders because of
               100% width declaration on this object */
}
* html #outercolumncontainer
{
   /* IE5.0/Win fix for 1px whitespace between masthead and body. */
   margin-top: -1px;
   border-top: solid 1px #000;
}
#masthead
{
   border-style: solid;
   border-width: 1px 0;   /* handles the top of the layout's border and the
               bottom of the masthead section */
}
#storycontain
{
   border-style: none;
   /* border-width: thin; */
}
.hnav
{
   border-style: solid;
   border-width: 0 0 1px 0;
}
#footer
{
   border-style: solid;
   border-width: 1px 0;   /* handles the top of the footer section and
               the bottom of the entire layout */
}

/*******************************************************************************
*  fonts.css : 2004-06-28 : Ruthsarian Layouts
* ------------------------------------------------------------------------------
*  handles the font type (family), sizes, line-height, alignment, and any other
*  properties relating to fonts - with the exception of color.
*
*  Perhaps font color declarations should be in this file as well.
*  However, certain CSS validators (hello w3!) will complain if colors
*  and background colors are not declared in the same selector or
*  at least within the same stylesheet. So font colors, including links,
*  are defined in colors.css.
*******************************************************************************/

body
{
   font-family: arial, helvetica, sans-serif;
   font-size: 100.1%;
   text-decoration: none;
}
td
{
   BACKGROUND: none;
   COLOR: #000000;
   FONT-SIZE: 11px;
   text-decoration:none
   FONT-FAMILY: arial, Helvetica, sans-serif;
   background-color: #FFFFFF;
}
#pageWrapper
{
   font-size: 80%;
}
#footer
{
   text-align: center;
}
/* :root is an invalid pseudo class but mozilla knows it */
:root code
{
   font-size: 120%;   /* monospace fonts are typically smaller that
               'normal' fonts under Mozilla. */
}
html[xmlns] .mozclear
{
   /* this selector should be valid CSS, but Opera 7.5 (and above) will pick
    * this up as well. Shouldn't be a problem, Opera should handle this fine,
    * but it's a Mozilla-targeted hack, and it should probably only affect
    * mozilla. You can do that by replacing the INVALID CSS selector
    * :root .mozclear for what's give here.
    */
   border-bottom: 1px solid;
   border-color: transparent;
   margin-bottom: -1px;
}
/* this hack added cause forums overrides h1 so modules like memberslist are odd */
#masthead
{
   font-size: 210%;
}   
/*
   Time to try and get all the heading elements to the same size
   regardless of browser. (IE seems to put them a big bigger
   than Mozilla, typically.)
*/
h1
{
   font-size: 210%;
}
h2
{
   font-size: 160%;
}
h3
{
   font-size: 140%;
}
h4
{
   font-size: 126%;
}
h5
{
   font-size: 110%;
}
h6
{
   font-size: 100%;
}
/* mac hide and combat ie's 3 pixel jog \*/
    html #contentColumn{overflow:auto;}
/* end hide*/   
/* mac hide and combat ie's 3 pixel jog \*/
    html #rightColumn{overflow:auto;}
/* end hide*/   
/* mac hide and combat ie's 3 pixel jog */
/* html #storycontain{overflow:auto;}  guess i dont need this  */
/* end hide*/   
/******************************************************************************/


and this is twocols.css which also goes in the styles subdirectory ...

Code:
@charset "iso-8859-1";


/*******************************************************************************
*  twoColumnsLeft.css : 2004-08-17 : Ruthsarian Layouts
* ------------------------------------------------------------------------------
*  This stylesheet removes the right-hand column from the 3 column layout
*******************************************************************************/

html>body #rightColumn
{
   display: none;   /* for compliant browsers, hide this column entirely */
}
* html #rightColumn *
{
   display: none;   /* ie's ghost-text bug is triggered by key elements
            having display:none set. #rightColumn is one of those
            key elements. so we display:none all child
            elements (doesn't trigger the bug) and try to
            make #rightColumn have no chance to affect
            document flow. */
}
#rightColumn
{
   position: absolute;
   margin: 0;
   padding: 0;
   width: 0;
   height: 0;
   border: none;   /* remove anything that'll give this elemnt width. */
}
#outerColumnContainer, #innerColumnContainer
{
      border-right-width: 0;   /* to get from 3 to 2 columns, we must hide the
               right-side border */
}
#innerColumnContainer
{
   margin-right: 0;
}

/************************************************/


To keep this manageable I will do another posting with related nuke changes. Continued ...
 
View user's profile Send private message Visit poster's website
fkelly







PostPosted: Mon Jan 09, 2006 3:01 pm Reply with quote

With the theme.php and two style sheets from the previous post in place you will need to make a number of changes to other nuke files to make the skidoo theme work right and be compatible with existing themes.

Existing themes generally call mainfile routines by issuing the command, "blocks("Left")" or blocks("right"). The way this is called is inconsistent as is the treatment in mainfile. In fact the code in mainfile is an abomination, the author takes the first element of the string array (so a L or l for Left or left) and does a strtolower on it and then does all sorts of other inconsistent manipulations throughout mainfile. After looking at this a while I said F*** it and rewrote those sections. All themes will now call mainfile with blocks(l) for left, r for right, c for center and d for down. And anytime that mainfile calls themesidebox it will do so with $side as a parameter. This doesn't cause problems for existing themes which simply ignore the extra parameter and it is necessary for the skidoo_too theme.

Anyway, here are the rewritten blocks and render_blocks functions:

Code:
function render_blocks($side, $blockfile, $title, $content, $bid, $url) {

    if(!defined('BLOCK_FILE')) {
      define('BLOCK_FILE', true);
    }
    if (empty($url)) {
      if (empty($blockfile)) {
          if ($side == "c") {
            themecenterbox($title, $content);
          } elseif ($side == "d") {
            themecenterbox($title, $content);
          } else {
            themesidebox($title, $content, $side);
          }
      } else {
          if ($side == "c") {
            blockfileinc($title, $blockfile, $side);
          } elseif ($side == "d") {
            blockfileinc($title, $blockfile, $side);
          } else {
            blockfileinc($title, $blockfile, $side);
          }
      }
   } else {
      if ($side == "c" OR $side == "d") {
          headlines($bid,1,$side);
      } else {
             headlines($bid,0,$side);
      }
    }
}

function blocks($side) {
    global $storynum, $prefix, $multilingual, $currentlang, $db, $admin, $user;
    if ($multilingual == 1) {
       $querylang = "AND (blanguage='$currentlang' OR blanguage='')";
    } else {
       $querylang = "";
    }
   $sql = "SELECT bid, bkey, title, content, url, blockfile, view, expire, action, subscription FROM ".$prefix."_blocks WHERE bposition='$side' AND active='1' $querylang ORDER BY weight ASC";
    $result = $db->sql_query($sql);
   if ($numrows = $db->sql_numrows($result) == 0) {
       $ThemeSel = get_theme();
       if ($ThemeSel == "skidoo_too") {
      themesidebox("", "", $side); } // no blocks on right but we still need to call this once for skidoo
      return;
   } // needed if nothing defined on right side for skiddoo theme
    while($row = $db->sql_fetchrow($result)) {
   $bid = intval($row['bid']);
   $title = stripslashes(check_html($row['title'], "nohtml"));
   $content = stripslashes($row['content']);
   $url = stripslashes($row['url']);
   $blockfile = $row['blockfile'];
   $view = intval($row['view']);
   $expire = intval($row['expire']);
   $action = $row['action'];
        $action = substr("$action", 0,1);
       $now = time();
       $sub = intval($row['subscription']);
       if ($sub == 0 OR ($sub == 1 AND !paid())) {
          if ($expire != 0 AND $expire <= $now) {
              if ($action == "d") {
                  $db->sql_query("UPDATE ".$prefix."_blocks SET active='0', expire='0' WHERE bid='$bid'");
                  return;
              } elseif ($action == "r") {
                  $db->sql_query("DELETE FROM ".$prefix."_blocks WHERE bid='$bid'");
                  return;
              }
          }
         if ($row['bkey'] == "admin") {
             adminblock($side);
         } elseif ($row['bkey'] == "userbox") {
             userblock($side);
         } elseif (empty($row['bkey'])) {
      // echo 'in blocks routine ' . $side . '<br>';
             if ($view == 0) {
               render_blocks($side, $blockfile, $title, $content, $bid, $url);
             } elseif ($view == 1 AND is_user($user) || is_admin($admin)) {
               render_blocks($side, $blockfile, $title, $content, $bid, $url);
             } elseif ($view == 2 AND is_admin($admin)) {
               render_blocks($side, $blockfile, $title, $content, $bid, $url);
             } elseif ($view == 3 AND !is_user($user) || is_admin($admin)) {
               render_blocks($side, $blockfile, $title, $content, $bid, $url);
             }
         }
       }
    }
   $db->sql_freeresult($result);
}


Here is a modified blockfileinc function:

Code:


function blockfileinc($title, $blockfile, $side=0) {
    $blockfiletitle = $title;
   // side is the letter l not a number one
    $file = file_exists("blocks/".$blockfile."");
    if (!$file) {
   $content = _BLOCKPROBLEM;
    } else {
   include("blocks/".$blockfile."");
    }
    if (empty($content)) {
   $content = _BLOCKPROBLEM2;
    }
    if ($side == "c") {
   themecenterbox($blockfiletitle, $content);
    } elseif ($side == "d") {
   themecenterbox($blockfiletitle, $content);
    } else {
   themesidebox($blockfiletitle, $content, $side);
    }
}


Function adminblock should be changed to

function adminblock($side) {

and the two calls to themesidebox in it should be changed to:

themesidebox($title, $content, $side);

Likewise userblock should take a $side parameter,
function userblock($side) { and call
themesidebox($title, $ublock, $side);

Likewise, the function headlines should have the following invocation:
function headlines($bid, $cenbox=0, $side)
and three instances of calls to themesidebox should be rewritten to say:
themesidebox($title, $content, $side) and the read of the blocks table should include the field bposition as per:
Code:
 $result = $db->sql_query("SELECT title, bposition, content, url, refresh, time FROM ".$prefix."_blocks WHERE bid='$bid'");

    list($title, $bposition, $content, $url, $refresh, $otime) = $db->sql_fetchrow($result);


Also, in loginbox function I just forced it to call themesidebox as per:
themesidebox($title, $boxstuff, "l");


If you are still with me, next header.php has to be modified to include the new style sheets. Just insert the following code:

Code:
    echo "<LINK REL=\"StyleSheet\" HREF=\"themes/$ThemeSel/style/v4.css\" TYPE=\"text/css\">\n\n\n";

    echo "<LINK REL=\"StyleSheet\" HREF=\"themes/$ThemeSel/style/style.css\" TYPE=\"text/css\">\n\n\n";
   if ( !defined('INDEX_FILE') ) {
    echo "<link rel=\"StyleSheet\" href=\"themes/$ThemeSel/style/twocols.css\" type=\"text/css\">\n\n";


And last but not least do a global search and replace in your themes directories and change all occurrences of "blocks(left (or right or center or down or anything else)" to l, r, c, or d. Note that themes are not consistent currently in how they do this and this is nonsense that should be fixed anyway.

If you've gone this far you might want to read part 3 which is a brief intro to how it works.
 
fkelly







PostPosted: Mon Jan 09, 2006 3:16 pm Reply with quote

Now you've copied in the skidoo theme and styles and made the changes to the rest of Nuke that are needed. You can go into your account and select the theme and see what happens.

Here's a few notes. The style uses a bunch of divs to control content. This is done in preference to tables. You'll notice that in my theme.php file I kept the opentable and closetable functions and just essentially made them into noops (no operations). This is needed to maintain compatibility with the rest of Nuke code, I believe. Most of the divs are as defined by the web page author I referenced in part 1 of this posting. However, I added a "storycontain", a "storytext" and a "topicimage" style to contain news stories. These all fit within the predefined "contentcolumn".

And, even though I don't use the right hand column very much on my web site, I tried to maintain compatibility by only including the twocolumns style sheet where index_file is not defined. The two columns style sheet essentially defines the righthandcolumn div down to zero width, making it disappear.

Much of the work I had to do involved getting all the content for the leftcolumn to be written within that div, likewise for the contentcolumn and likewise for the rightcolumn. That's why the themesidebox function always has to have a $side. There may be better ways to do this, I just couldn't think of what they were. I use static variables in the themesidebox function to try to assure that the divs are only written out once and are closed properly.

There is a lot of madness with styles involving incompatibility between browsers. I spent a lot of time reading web sites about IE's broken box model and fiddling with fixes. There are still some undesirable scroll bars that I am trying to figure out how to eliminate but the basics work in Firefox 1.5 and IE 6. Sorry to say I haven't tried other browsers, well actually I upgraded to Firefox 1.5 because there were some intermittent lines thru the images in previous versions that were listed as Firefox related CSS bugs.

Anyway that's it for today. Let me know if you have any questions or suggestions.

Oh ... separately the Nukefixes people really might want to look at the blocks function as I've rewritten it. The way $side is currently handled is totally crazy and should be "fixed" regardless of whether you are using my skidoo theme.
 
fkelly







PostPosted: Tue Jan 10, 2006 9:36 am Reply with quote

LOL, a conversation with myself. Anyway if you are venturesome and trying this you will want to modify header.php a bit from the way I originally put it out. Looking at my logs from the server I see that people using the old themes are getting a lot of file not founds when header.php tries to find the v4.css or twocols.css that don't exist in those themes. So the block of code in header should be modified like this:

Code:
    echo "<link rel=\"alternate\" type=\"application/rss+xml\" title=\"RSS\" href=\"backend.php\">\n";

      if ($ThemeSel == "skidoo_too") {
  echo "<LINK REL=\"StyleSheet\" HREF=\"themes/$ThemeSel/style/v4.css\" TYPE=\"text/css\">\n\n\n"; }
    echo "<LINK REL=\"StyleSheet\" HREF=\"themes/$ThemeSel/style/style.css\" TYPE=\"text/css\">\n\n\n";
    if ($ThemeSel == "skidoo_too") {
         if ( !defined('INDEX_FILE') ) {
    echo "<link rel=\"StyleSheet\" href=\"themes/$ThemeSel/style/twocols.css\" type=\"text/css\">\n\n"; }
   }  // prevent file not founds by only looking for v4.css and twocols with skidoo theme


I also turned off index_file in the index.php for the news module. As stated, I don't have much use for the right column and doing it this way gives a broader middle column for the content. It even occurs to me that the approach of overriding a default three column layout with a two column one is backwards and it might be better to override a default two column layout with an occasional three column one in those rare cases where index_file is "on". But that's site dependent and another day.
 
fkelly







PostPosted: Thu Jan 12, 2006 8:51 am Reply with quote

Hey, this is great ... my own thread right here on the best Nuke Forums anywhere.

Seriously, taking a little broader perspective on this, especially since Raven is mentioning the F word (fork) how about dumping the whole current "themes" architecture entirely. How about creating a SQL table to hold and maintain styles? There would be a "record" for each combination of selector, property and value in a style. Actually I suppose the record would contain: style name or identifier, selector, property and value. Then there would be something like the current Forums style administration screen only when the the value for a property is changed the change would be stored in the style table.

The css file could then be generated by PHP dynamically from the table and would reflect any changes the user made. In other words, in header.php it would read the style records for the current "theme" and echo out the appropriate CSS code.

Well ... that's what I was thinking in the middle of the night anyway. In the daylight I realize that it's one thing to have the concept and another to write the code to implement it. And there seems to be a million junior Nuke programmers who like creating the latest bizarre looking version of a Nuke theme and this would put them out of business. I am wondering if anyone has done something like this somewhere on the web and maybe it's worth a bit of Googling and looking in Sourceforge and elsewhere to see.
 
fkelly







PostPosted: Fri Jan 13, 2006 3:50 pm Reply with quote

Onwards ... in further testing I determined that I was creating multiple copies of some of the divs in my css file, specifically storycontain, storytext and topicimage. According the the validators, that's a no no so I fixed it. A revised theme.php and style.css are listed here.

1. Theme.php:
Code:
<?php



/************************************************************/
/* textcolors and opentables are here for compatability with
   base Nuke. 
*/
$textcolor1 = "#000000";
$textcolor2 = "#000000";

function OpenTable() {
 // echo "<div id=\"contentColumn\" class=\"inside\">\n";
 // echo "<div> \n";
   // control the divs in the theme so you dont wind up with multiple
   // basically this is a no-op for compatibility
}

function CloseTable() {
 //  echo "</div>\n";
}

function OpenTable2() {
 // echo "<div id=\"contentColumn\">\n";
 //   echo "<div class=\"inside\">\n";
}

function CloseTable2() {
    //echo "</div></div>\n";
}


function themeheader() {
    global $user, $banners, $sitename, $slogan, $cookie, $prefix, $db, $anonymous;
    cookiedecode($user);
    $username = $cookie[1];
    if (empty($username)) {
        $username = $anonymous;
    }

   if ($banners == 1) {
   include("banners.php");
    }
    if ($username == $anonymous) {
   $theuser = "&nbsp;&nbsp;<a href=\"account-new_user.html\">Create an account";
    } else {
   $theuser = "&nbsp;&nbsp;Welcome $username!";
    }

echo '<body>';   
echo '<div id="pageWrapper">
            <hr class="hide" />
            <div id="masthead" class="inside">';


echo 'Mohawk Hudson Cycling Club';

// masthead content end

 echo '</div>';
 echo '<hr class="hide" />';
 echo '<div class="hnav">';

echo '<ul><li><a href="index.php"><em>Home</em></a><span class="divider"> : </span></li><li><a
   href="modules.php?name=Your_Account">Your Account</a><span class="divider"> : </span></li><li><a
   href="modules.php?name=MHCC_Membership">MHCC Membership</a><span class="divider"> : </span></li><li><a
   href="submit.html">Submit News</a><span class="divider"> : </span></li><li><a
   href="modules.php?name=Ride_Calendar">Ride Calendar</a><span class="divider"> : </span></li><li><a
   href="forums.html">Forums</a><span class="divider"> : </span></li></ul>
</div>';
 echo '<div id="outerColumnContainer"><div id="innerColumnContainer">';   
 // the above are closed in footer            
 echo '<hr class="hide" />';
   if (defined('INDEX_FILE') ) {
      // echo 'calling blocks r <br>';
         blocks("r");
         echo '</div>';
         echo '</div>'; }
         blocks("l");
         echo '</div>';
         echo '</div>';
      // the above close the left and right divs
         echo '<hr class="hide" />';   
          echo '<div id="contentColumn">';
          echo '<hr class="hide" />';
        echo '<div class="inside">'; 
  // these above are closed in footer
   
}

/************************************************************/
/* Function themefooter()                                   */
/*                                                          */
/* Control the footer for your site. You don't need to      */
/* close BODY and HTML tags at the end. In some part call   */
/* the function for right blocks with: blocks("r");       */
/* Also, $index variable need to be global and is used to   */
/* determine if the page your're viewing is the Homepage or */
/* and internal one.                                        */
/************************************************************/

function themefooter() {
    global $foot1, $foot2, $foot3, $copyright, $totaltime;

   echo '<div class="clear mozclear"></div>';
    echo '</div>';
   echo '</div>';
   echo '<div id="footer">';
    $footer_message = "$foot1<br>$foot2<br>$foot3<br>$copyright<br>$totaltime";
         echo '<p class="content">' . $footer_message . '</p>';
         echo '</div>'; // ends footer
   echo '</div></div></div>';  // ends column containers that are started in header and pagewrapper

}

/************************************************************/
/* Function themeindex()                                    */
/*                                                          */
/* This function format the stories on the Homepage         */
/************************************************************/

function themeindex ($aid, $informant, $time, $title, $counter, $topic, $thetext, $notes, $morelink, $topicname, $topicimage, $topictext) {
    global $anonymous, $tipath;
    $ThemeSel = get_theme();
    if (file_exists("themes/$ThemeSel/images/topics/$topicimage")) {
   $t_image = "themes/$ThemeSel/images/topics/$topicimage";
    } else {
   $t_image = "$tipath$topicimage";
    }
   
    if (!empty($notes)) {
   $notes = "<br><br><b>"._NOTE."</b> <i>$notes</i>\n";
    } else {
   $notes = "";
    }
    if ("$aid" == "$informant") {
          $content = "$thetext$notes\n";
   // $content = '<br>' . "$thetext$notes\n";
    } else {
   if(!empty($informant)) {
       $content = "<a href=\"modules.php?name=Your_Account&amp;op=userinfo&amp;username=$informant\">$informant</a> ";
   } else {
       $content =  "$anonymous ";
   }
   $content .= ""._WRITES." <i>\"$thetext\"</i>$notes\n";
    }
    $posted = ""._POSTEDBY." ";
    $posted .= get_author($aid);
    $posted .= " "._ON." $time $timezone ($counter "._READS.")";

 echo '<SPAN style="float: right"><a href=modules.php?name=News&amp;new_topic=' . $topic . '><img src="' .  $t_image .  '"alt="' . $topictext . '"></a></SPAN>';
 echo '<span style="vertical-align: top"><h2>' . $title . '</h2></span>';
 echo  $content . '<p>' . $posted . '</p><p>' . $morelink . '</p>';

}

/************************************************************/
/* Function themearticle()                                  */
/*                                                          */
/* This function format the stories on the story page, when */
/* you click on that "Read More..." link in the home        */
/************************************************************/

function themearticle ($aid, $informant, $datetime, $title, $thetext, $topic, $topicname, $topicimage, $topictext) {
    global $admin, $sid, $tipath;
    $ThemeSel = get_theme();
    if (file_exists("themes/$ThemeSel/images/topics/$topicimage")) {
   $t_image = "themes/$ThemeSel/images/topics/$topicimage";
    } else {
   $t_image = "$tipath$topicimage";
    }
    $posted = ""._POSTEDON." $datetime "._BY." ";
    $posted .= get_author($aid);
    if (!empty($notes)) {
   $notes = "<br><br><b>"._NOTE."</b> <i>$notes</i>\n";
    } else {
   $notes = "";
    }
    if ("$aid" == "$informant") {
   $content = "$thetext$notes\n";
    } else {
   if(!empty($informant)) {
       $content = "<a href=\"modules.php?name=Your_Account&amp;op=userinfo&amp;username=$informant\">$informant</a> ";
   } else {
       $content = "$anonymous ";
   }
   $content .= ""._WRITES." <i>\"$thetext\"</i>$notes\n";
    }
   
 echo '<SPAN style="float: right"><a href=modules.php?name=News&amp;new_topic=' . $topic . '><img src="' .  $t_image .  '"alt="' . $topictext . '"></a></span>';
 echo '<span style="vertical-align: top"><h2>' . $title . '</h2></span>';
echo  $content . '<p>' . $posted . '</p><p>' . $morelink . '</p>';

}

/************************************************************/
/* Function themesidebox()                                  */
/*                                                          */
/* Control look of your blocks. Just simple.                */
/************************************************************/

function themesidebox($title, $content, $side="x")
{
//  echo 'in themesidebox value of side ' . $side . '<br>';
static $rightswitch;
static $leftswitch;
if (defined('INDEX_FILE') ) {
//   need to have rightcolumn div even if no blocks are right
      if (!isset($rightswitch)) {
               $rightswitch = "1";
               echo '<div id="rightColumn">';
                    echo '<div class="inside">';   
                echo '<hr class="hide" />'; } // end of rightswitch
         if ($side == "r")
         {
         echo '<h4>' . $title . '</h4>';
         echo '<span class="content">' . $content . '</span>';
         } // end of side = r
         } // end of index file -- shouldn't get side = r without index file
         
   if ($side == "l") {
         // echo 'in themesidebox with side = l <br>';
         if (!isset($leftswitch)) {
            $leftswitch = "1";
            echo '<div id="leftColumn">';
                echo '<div class="inside">';   
/*             echo '<hr class="hide" />'; */ }
          echo '<h4>' . $title . '</h4>';
         echo '<span class="content">' . $content . '</span>'; }
   
}
?>


and 2. style.css

Code:
@charset "iso-8859-1";


/*******************************************************************************
*  base.css : 2005-06-28 : Ruthsarian Layouts
* ------------------------------------------------------------------------------
*  base set of stylesheet rules needed to form the layout, and layout only.
*  color and fonts and such are not handled here.
*  side column widths are defined in EMs. see base_pixels.css for a pixel
*  version instead.
*******************************************************************************/
.content    {
   BACKGROUND: none;
   FONT-SIZE: 11px;
   FONT-FAMILY: arial, Helvetica, sans-serif;
   }
.content10    {
   BACKGROUND: none;
   FONT-SIZE: 10px;
   FONT-FAMILY: arial, Helvetica, sans-serif;
}
.option    {
   BACKGROUND: none;
   FONT-SIZE: 13px;
   FONT-WEIGHT: bold;
   FONT-FAMILY: arial, Helvetica, sans-serif;
}

img.top {vertical-align:text-top}

#pageWrapper
{
   margin: 0;
   width: auto;
   min-width: 600px;
}
#outerColumnContainer
{
   z-index: 1;
   border-color: #fff;   /* set default color to white. set the real
               color inside colors.css */
   border-style: solid;
   border-width: 0 15em;   /* sets the width of the borders used to create
               the left and right columns' background
               color. */
}
#innerColumnContainer
{
   z-index: 2;
   width: 100%;
}
* html #innerColumnContainer
{
   position: relative;   /* fix a render bug in IE under certain
               conditions */
}
#contentColumn
{
   margin: 0 -1px;      /* without this, boxes stop floating next to
               each other */
   width: 100%;
}

#leftColumn, #rightColumn, #contentColumn
{
   float: left;
   position: relative;   /* IE has a display/render bug with non-floated
               block elements inside floated block elements.
               setting position:relative on the floating
               element seems to resolve this. */
   z-index: 10;
   overflow: visible;   /* fix for IE italics bug */
}
#rightColumn
{
   float: right;      /* floating this right allows for the right
               column block to appear before the content
               column in the flow of the document. doing
               this allows for any easy 3 column layout
               in NN4.

               There is certainly a lot, in terms of layout
               'theory' about how the flow of the document
               should be. I won't get into it here. */
   width: 15em;
   margin: 0 -15em 0 1px;   /* same as in the #leftColumn selector up
               above. */
}

#leftColumn
{
   width: 15em;
   margin: 0 1px 0 -15em;   /* like in the #contentColumn selector, without
               the 1px margin on the opposite side of the
               box, boxes stop floating next to each
               other */
}
#footer
{
   position: relative;
}
#masthead h1
{
   display: inline;   /* personal preference to keep the header
               inline. you could just as easily change
               padding and margins to 0. */
}
.clear
{
   clear: both;
   padding-bottom: 1px;   /* for Gecko-based browsers */
   margin-bottom: -1px;   /* for Gecko-based browsers */
}
.hide, #oldBrowserNotice, .ieSixCharDupBug
{
   /* hide elements that CSS-targeted browsers shouldn't show */
   display: none !important;
}
#contentColumn
{
   border-width: 0;   /* reset value from that in the version 4
               stylesheet. this isn't in borders.css because
               were you to create a print.css and not
               include borders.css, then the v4 border would
               still remain when you print. */
}
/*
   The below block of CSS is invalid, and will invalidate this stylesheet.
   So it is up to you to decide how you want to handle this.  */
* html #pageWrapper
{
   word-wrap: break-word;
}
/*******************************************************************************
*  hnav.css : 2005-08-31 : Ruthsarian Layouts
* ------------------------------------------------------------------------------
*  responsible for the horizontal navigation elements, one of which is usually
*  placed below the masthead but on top of the columns.
*
*******************************************************************************/

.hnav
{
   border-bottom: solid 1px #fff;
   text-align: center;
}
.hnav, .hnav ul li a
{
   /* need to middor veritcal padding on .hnav and child anchor elements
    * because the anchors are _not_ block elements. since they are not
    * block elements web browsers will not expand .hnav to contain them
    * even with the extra padding. by applying the same padding to both
    * the parent .hnav _looks_ like its containing the child anchor
    * elements.
    */
   padding-top: 3px;
   padding-bottom: 4px;
}
.hnav ul, .hnav ul li
{
   display: inline;
   list-style-type: none;
   margin: 0;
   padding: 0;
}
.hnav ul li a
{
   margin: 0 -1px 0 0;
   padding-left: 10px;
   padding-right: 10px;
   border-left: solid 1px #000;
   border-right: solid 1px #000;
   white-space: nowrap;
}
.hnav ul li a:link, .hnav ul li a:visited, .hnav ul li a:active, .hnav ul li a:hover
{
   text-decoration: none;
}
.hnav ul li span.divider
{
   display: none;
}
* html .hnav ul li, * html .hnav ul li a
{
   width: 1%; /* IE/Mac needs this */
   display: inline-block;   /* IE/Mac needs this */
   /* \*/
      width: auto;
      display: inline;
      position: relative;
   /* reset above hack */
}
* html .hnav, * html .hnav ul a
{
   /* \*/ height: 0.01%; /* hasLayout hack to fix render bugs in IE/Win.
             IE/Mac will ignore this rule. */
}
* html .HNAV
{
   padding: 0;   /* IE5/Win will resize #hnav to fit the heights of its
            inline children that have vertical padding. So this
            incorrect case selector hack will be applied only by
            IE 5.x/Win */
}

/*****************************************************************************
*  vnav.css : 2004-07-21 : Ruthsarian Layouts
* ------------------------------------------------------------------------------
*  responsible for the vertical navigation elements commonly found in the left
*  and / or right columns.
*******************************************************************************/

.vnav ul, .vnav ul li
{
   margin: 0;
   padding: 0;
   list-style-type: none;
   display: block;
}
.vnav ul
{
   border: solid 1px #000;
   border-bottom-width: 1px;
}
.vnav ul li
{
   border-bottom: solid 1px #000;
   
}
.vnav ul li a
{
   display: block;
   text-decoration: none;
   padding: 2px 10px;
}
* html .vnav ul li a/* hide from IE5.0/Win & IE5/Mac */
{
   height: 1%;
}
* html .vnav ul
{
   position: relative;   /* IE needs this to fix a rendering problem */
}
.vnav h3
{
   /* perhaps this belongs partly in gutters.css and partly in
      fonts.css. However, the heading size for vnav elements is
      controlled here because it is a specific vnav visual element
      rather than something that's going to be applied to the whole
      layout. So that if you were to remove vnav.css from your
      layout, you wouldn't have any extra, unused CSS in the rest
      of your stylesheets. */

   margin-bottom: 0;
   padding-bottom: 0;
   font-size: 126%;
}

/******************************************************************************/

/*******************************************************************************
*  colors.css : 2004-06-28 : Ruthsarian Layouts
* ------------------------------------------------------------------------------
*  defines background and foreground colors of elements within the layout.
*  sites that want to use different color schemes for different sub-sections
*  of a website need only make different versions of this stylesheet and link
*  or import them as need. The other stylesheets can be shared across the
*  entire site.
*******************************************************************************/

body
{
   background-color: #665;
   color: #fff;
}
#outerColumnContainer
{
   border-left-color: #cc9;   /* left hand column background color */
   border-right-color: #bb8;   /* right hand column background color */
}
#masthead
{
   background-color: #885;
   color: #fff;
}
#footer
{
   background-color: #885;
   color: #fff;
}
#outerColumnContainer, #contentcolumn   /* selector case hack to reset version 4
                  stylesheet setting */
{
   background-color: #fff;      /* this sets the background color on the
                  center column */
   color: #000;
}

#leftColumn, #rightColumn, #contentColumn
{
   color: #000;
}
.vnav ul li a
{
   color: #336;
   background-color: #cc9;
}
/* added 12-26 fjk cause not using vnav */
#leftColumn
{
   background-color: #cc9;
}
#rightColumn .vnav ul li a:hover, .vnav ul li a:hover
{
   background-color: #336;
   color: #fff;
}
#rightColumn .vnav ul li a
{
   color: #336;
   background-color: #ddb;
}
.hnav, .hnav ul li a
{
   background-color: #cc9;
   color: #336;
}
.hnav ul li a:hover
{
   background-color: #336;
   color: #fff;
}
#pageWrapper, #innerColumnContainer, #masthead, #footer, .hnav
{
   border-color: #000;
}

/******************************************************************************/

/*******************************************************************************
*  gutters.css : 2004-07-06 : Ruthsarian Layouts
* ------------------------------------------------------------------------------
*  handles the whitespace between and within elements; such as margins and
*  padding.
*******************************************************************************/

body
{
   margin: 0;
/*   padding: .25em;       remove this padding if you want the layout to
               stretch from edge to edge of the viewport. */
}
p, h1, h2, h3, h4, h5, h6
{
   margin: 1em 0;      /* specifically define this for Opera's sake,
               and also for better consistency across
               all platforms  */
}
.inside
{
   padding: 0 1.5em;   /* this padding is applied to every major box
               within the layout for a uniform gutter
               between borders

               _NOTE_: a small glitch in IE seems to appear
               if this class has vertical padding applied
               to it. so in cases where you want to add
               vert padding, use the parent element. margin
               values here don't work because .inside has
               a key role in border generation */
}
#leftColumn, #contentColumn, #rightColumn, #masthead
{
   padding-top: 0.5em;
   padding-bottom: 0.5em;   /* this is the vert padding talked about in the
               previous selector. */
}
#masthead, #footer
{
   padding: 1em;
}
.vnav
{
   margin: 1em 0;
}
html>body #footer
{
   padding-bottom: 1.01em;   /* this is to fix a bug in mozilla that results
               in a 1px line of white below the footer when
               the document gets very long. extremely long
               documents may generate the bug again. if
               you experience that, increasing this value
               may help. i think this is related to moz's
               off-by-one troubles as the bug does not
               occur in any other browser */
}
/******************************************************************************/
/*******************************************************************************
*  borders.css : 2004-07-29 : Ruthsarian Layouts
* ------------------------------------------------------------------------------
*  this stylesheet defines any and all borders that are rendered on the layou.
*  this includes the left and right-hand borders of the #outerColumnContainer
*  element which are used as the backgrounds for the left and right columns.
*******************************************************************************/

#pageWrapper
{
   border-style: solid;   /* explicitly defined within eact selector in
               case you want change border styles (to mix
               it up) between elements */
   border-width: 0 1px;   /* puts a border on the left and right sides of
               the page. #masthead and #footer will handle
               the top and bottom borders */
}
#innerColumnContainer
{
   border-style: none;
   border-width: 0 1px;   /* puts borders between center and the side
               columns. */
   margin: 0 -1px;      /* compensation for the borders because of
               100% width declaration on this object */
}
* html #outercolumncontainer
{
   /* IE5.0/Win fix for 1px whitespace between masthead and body. */
   margin-top: -1px;
   border-top: solid 1px #000;
}
#masthead
{
   border-style: solid;
   border-width: 1px 0;   /* handles the top of the layout's border and the
               bottom of the masthead section */
}

.hnav
{
   border-style: solid;
   border-width: 0 0 1px 0;
}
#footer
{
   border-style: solid;
   border-width: 1px 0;   /* handles the top of the footer section and
               the bottom of the entire layout */
}

/*******************************************************************************
*  fonts.css : 2004-06-28 : Ruthsarian Layouts
* ------------------------------------------------------------------------------
*  handles the font type (family), sizes, line-height, alignment, and any other
*  properties relating to fonts - with the exception of color.
*
*  Perhaps font color declarations should be in this file as well.
*  However, certain CSS validators (hello w3!) will complain if colors
*  and background colors are not declared in the same selector or
*  at least within the same stylesheet. So font colors, including links,
*  are defined in colors.css.
*******************************************************************************/

body
{
   font-family: arial, helvetica, sans-serif;
   font-size: 100.1%;
   text-decoration: none;
}
td
{
   BACKGROUND: none;
   COLOR: #000000;
   FONT-SIZE: 11px;
   text-decoration:none
   FONT-FAMILY: arial, Helvetica, sans-serif;
   background-color: #FFFFFF;
}
#pageWrapper
{
   font-size: 80%;
}
#footer
{
   text-align: center;
}
/* :root is an invalid pseudo class but mozilla knows it */
:root code
{
   font-size: 120%;   /* monospace fonts are typically smaller that
               'normal' fonts under Mozilla. */
}
html[xmlns] .mozclear
{
   /* this selector should be valid CSS, but Opera 7.5 (and above) will pick
    * this up as well. Shouldn't be a problem, Opera should handle this fine,
    * but it's a Mozilla-targeted hack, and it should probably only affect
    * mozilla. You can do that by replacing the INVALID CSS selector
    * :root .mozclear for what's give here.
    */
   border-bottom: 1px solid;
   border-color: transparent;
   margin-bottom: -1px;
}
/* this hack added cause forums overrides h1 so modules like memberslist are odd */
#masthead
{
   font-size: 210%;
}   
/*
   Time to try and get all the heading elements to the same size
   regardless of browser. (IE seems to put them a big bigger
   than Mozilla, typically.)
*/
h1
{
   font-size: 210%;
}
h2
{
   font-size: 160%;
}
h3
{
   font-size: 140%;
}
h4
{
   font-size: 126%;
}
h5
{
   font-size: 110%;
}
h6
{
   font-size: 100%;
}
/* mac hide and combat ie's 3 pixel jog \*/
    html #contentColumn{overflow:auto;}
/* end hide*/   
/* mac hide and combat ie's 3 pixel jog \*/
    html #rightColumn{overflow:auto;}
/* end hide*/   
/******************************************************************************/


That's all for now. I have the theme running on my production web page, though I'm the only one I've told about it. It seems okay, though it's a bit funky with Gallery. I need to figure out how to make it a bit wider.
 
fkelly







PostPosted: Thu Jan 19, 2006 3:13 pm Reply with quote

And so the story continues ... Smile

Just in case anyone ever wants to try this out, there is a small bug in the previous footer function in themes.php. I had placed the closing divs inside the footer instead of above it resulting in the footer coming up into the content column in some cases. So substitute this for themefooter:

Code:
function themefooter() {

    global $foot1, $foot2, $foot3, $copyright, $totaltime;
    echo '</div>';
   echo '</div>';
   echo '<div class="clear mozclear"></div>';

   echo '<div id="footer" class="inside">';
    $footer_message = "$foot1<br>$foot2<br>$foot3<br>$copyright<br>$totaltime";
         echo '<p class="content">' . $footer_message . '</p>';
         echo '</div>'; // ends footer
   echo '</div></div></div>';  // ends column containers that are started in header and pagewrapper

}

The two divs that are moved are above the mozclear.

I've been running this for myself on my production site and it works pretty well. There is an issue with Gallery being "too wide" for the content column, resulting in the need to scroll but otherwise it seems to work pretty well both on standard Nuke modules and a couple of my custom modules.

One heck of a lot less tables too.
 
organizedhome
New Member
New Member



Joined: Nov 16, 2005
Posts: 4

PostPosted: Sun Jan 22, 2006 8:17 am Reply with quote

fkelly, I'll be following your progress with interest! I'd love a CSS driven Nuke ...
 
View user's profile Send private message
fkelly







PostPosted: Sun Jan 22, 2006 12:08 pm Reply with quote

Thanks for visiting my lonely thread and I will keep posting as I make progress. As indicated in the initial post I'm really a newbie myself to all this and not an expert at either CSS or PHP. I know that the "regulars" and experts on the site are busy with other things but I am hoping that they may eventually weigh in with some advise or ideas.

Making a CSS driven Nuke would require even more extensive changes to the core than I've made as well as a decision as to whether to maintain compatability with the old (and current) "themes" based approach. The more I look at the "big" picture, the more I think that the current proliferation of themes is nuts. I guess some people want the ability to write their own theme and control the appearance of their own site, particularly I suppose gamers, but as a site administrator myself I don't want to testing and retesting changes against modules to see how they look in a multitude of themes. Nor do I want to upload and keep current with a plethora of themes (and I don't, thank god).

I think that a lot could be done with a relatively simple style administration screen, similar to what's in the forums where aspects such as font size and colors could be maintained by users. It would be easy enough for instance, to "variablize" the colors of my divs and even the font sizes and appearances.

At any rate thanks for visiting and for the encouragement and keep checking cause I'll keep working on it.
 
Raven
Site Admin/Owner



Joined: Aug 27, 2002
Posts: 17088

PostPosted: Tue Feb 07, 2006 11:03 pm Reply with quote

I have been watching this closely. I haven't felt the need to comment on anything, but I could at least have given you encouragement Wink
 
View user's profile Send private message
fkelly







PostPosted: Wed Feb 08, 2006 2:51 pm Reply with quote

Why thanks Raven. I just saw your columnar theme on sourceforge too, though I think I partially got the idea from something you posted a while back. But like you my memory gets foggy. Oh that's jilted syntax: what I mean is that I'm old and I forget where I get ideas from.

Anyway after fixing the page generation bug in my theme and Nukenews I ran some comparisons. It's important to report negatives as well as positives and I thus I will say that I can't make any sense out of the page generation times. They vary all over the lot from .10 seconds to almost a second and they vary from theme to theme and they vary within themes too. Most likely other things than the theme, like what else is going on on the server, have more effect than the efficiency of the theme.

However I did some view sources of the three themes (NukeNews, Deepblue and skidoo_too). For the home page on my site Nukenews generates 60 open tables (that is the string <table) and 60 close tables (the string </table ). Deepblue generates 56 opens and 53 closes (curious!) and skidoo_too generates 5 opens and 5 closes. This will of course vary depending on which page on your site you go into but obviously the use of tables is significantly reduced by use of a "theme without tables".

I've also looked a bit at the way the Forums software manages styles. If we decide to incorporate some version of a "theme without tables" into some future version of Nuke (Raven Nuke or otherwise) it might be useful to use the Forum software model. Basically they have two tables, bbthemes and bbthemes_name that store the settings for their styles (aka themes in the case of Forums) and they have a program called admin_styles.php that lets the administrator manage the settings for the styles. So, if you want to change the background setting for a td you can go right in here and do it instead of having to "hack" the code.

Notice that I said "a bit" because I don't pretend to understand fully how the Forum software works. There's a subsilver.css file that appears to be hardcoded (meaning that the values for various elements are specified in the css file instead of being read in from the database) for instance and I'm guessing that maybe that's a default set of values?

I'll keep looking but if there is someone out there who knows more about this and would be willing to help that sure would be nice. Reinventing the wheel is not my favorite occupation.
 
tactixs
Hangin' Around



Joined: Apr 27, 2005
Posts: 32

PostPosted: Wed Feb 08, 2006 4:13 pm Reply with quote

Finally, someones that looks into hacking the layout of php-nuke, i say good job Fkelly.

I'd love to be on the boat and help you or work on your project along with you but i'm lacking both knowledge and skill about coding, so i'll just be an enthousiastic supporter of your project and follow it closely Smile

Great initiative Wink
 
View user's profile Send private message
spottedhog
Regular
Regular



Joined: Jun 02, 2004
Posts: 88

PostPosted: Mon Apr 03, 2006 4:52 pm Reply with quote

Not sure if this will help with the discussion or not, but I just put a "HowTo" in for making a W3C compliant theme. in the HowTo forum here. It uses 6 tables:

Header, Navigational Bar, OpenTable, OpenTable2, Blocks, and Footer

Within each table, you can layout the theme by varying the number of rows or data cells. Then each data cell can have a unique "class" in the style.css file where you can put in a color or background graphic. Makes theme design pretty much cookie cutter.

I also included the code used for the default theme I have on [ Only registered users can see links on this board! Get registered or login! ]
 
View user's profile Send private message Visit poster's website
spcdata
Regular
Regular



Joined: Jan 24, 2004
Posts: 81
Location: Sweden

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

spottedhog I think you are doing a AWESOME WORK GREAT Exclamation Exclamation
And your "fork" seems to be something very special very good!!

Wave

(I did the same when i created my theme i replaced all $bgcolor and $textcolors with "class" from the modules and what ever and added it to css instead Wink)

_________________
/spcdata 
View user's profile Send private message Send e-mail Visit poster's website
spottedhog







PostPosted: Mon Apr 03, 2006 6:11 pm Reply with quote

Smile yep..... that is what I did..... no $bgcolor in any module or theme......

thanks!!!
 
wHiTeHaT
Life Cycles Becoming CPU Cycles



Joined: Jul 18, 2004
Posts: 579

PostPosted: Tue Jun 03, 2008 2:57 pm Reply with quote

Hello @all....
A few days ago i started to port designs from free css themes to php-nuke.
Couse of php-nuke's bad html formatting i started to fix all html errors in php-nuke , in someway i succeed , i have i think 99% of php-nuke 8.1 XHTML 1.0 Transitional and css 2.1 validated.
However couse of the bad coding and had to use a filter to replace < center > styles and font styles to div's and span's i stopped.

Anyway as i just installed a ravennuke Rolling Eyes i was surprised the ported themes worked directly Cool on it.
I have discovered a new methode to use ALL yes ALL freecss themes availeble ,with my methode wich is the simplest ever seen.Infact i used aloth of solutions provided with php-nuke community ( dont forget the old users when develloping ravennuke).
What was funny to see is that my theme didnt generated any validation error.
i seen with just 3 pages and check to w3c that raven should keep it's code clean ( 2 errors only on a fresh install is verry plausible... verry good work. it took me 48 hours to get php-nuke 8.1 for 99% validated).


What i infact would like to announce is that i go create a theme site FOR not anymore php-nuke but RAVENphpScripts ( just becouse i like the direct working in it of the ported themes ) Laughing
I already released some themes ( cold ported to php-nuke 8.1) on the osc2nuke website.
The last one ( not released, but on osc2nuke are some screenshots) called nonzero is the one i used directly in ravennuke without any additions ( comes with navigation bar control panel, i didnt installed yet on raven release only used db file for it).
Anyway,,, again anyway lol , sorry for my messy writing lol.... if raven keeps develloping like this and fix the little issue's with the validation ( also logged users and admin pages wich i didnt checked yet) i go make some contributions in forms of themes and special site effect's.

Grtzzz wHiTeHaT...
o yeah ... the site go be called and pointed to nukecss.com Wink

i just noticed i bumped a 2 year old post lol.
The reason i posted here is that the theme section is only grant access to granted members. Twisted Evil
 
View user's profile Send private message Send e-mail
Raven







PostPosted: Tue Jun 03, 2008 9:40 pm Reply with quote

Quote:
The reason i posted here is that the theme section is only grant access to granted members.


Please explain. Registered members should be allow to post in all theme forums. What forum aren't you able to post in?
 
wHiTeHaT







PostPosted: Wed Jun 04, 2008 10:19 am Reply with quote

it is my mistake, excuse me.

i ment : PHP-Portal Project (Not General phpnuke!).

-Design discussions

As the forum topic catched my eye ( couse its name would have been suiteble for my announcement).
but here is good enough for me aswell Laughing


Sorry again
Grtzz wHiTeHaT Wink
 
Display posts from previous:       
Post new topic   Reply to topic    Ravens PHP Scripts And Web Hosting Forum Index -> Themes

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 ©