Fusibuce into CSS Boxes

vaudevillian · Worker Joined: Jan 18, 2008 Posts: 139

NOTE: This post has been updated 2:37pm est April 15

Nice css blocks and story for fisubice. They will look almost the same as the original.

Open themes/fisubice/style/style.css

Find:

Code:

font {font-family: Verdana,Helvetica,sans-serif;}
td {font-family: Verdana,Helvetica,sans-serif; font-size: 10px}
body {font-family: Verdana,Helvetica,sans-serif; font-size: 10px}
p {font-family: Verdana,Helvetica,sans-serif; font-size: 10px}
div {font-family: Verdana,Helvetica,sans-serif; font-size: 10px}
input{margin-bottom:2px;margin-top:2px;text-indent:2px}
input, textarea, select{border-color:#000000;color:#000000;font-size:11px}
input, textarea, select{background: #ffffff;border-width:1px;font:normal 11px Verdana,Arial,Helvetica,sans-serif}
input.catbutton{background:#fafafa;color:#000000;font-size:10px}
input.button{background:#fafafa;color:#000000;font-size:10px}
input.liteoption{background: #fafafa;color:#000000}
input.mainoption{background:#fafafa;color:#000000;font-weight:bold}
input.post, textarea.post, select{background: #ffffff;color:#000000}
.helpline{background:#e1e9f2;border-style:none;color:#000000}
.code{background:#fafafa;border:1px solid #d1d7dc;color:#006600; font:11px Courier,"Courier New",sans-serif;padding:5px}
.quote{background:#fafafa;border:1px solid #d1d7dc;color:#444444; font:11px/125% Verdana,Arial,Helvetica,sans-serif}
.bodyline{background: #f7f8fc;color:#000000;border:1px solid #98aab1}
body{background:#ecf0f6;color:#000000;}
.hidegoogle{color:#ecf0f6;font-size:0pt;}
hr{border: 0px solid #516A88;border-top-width:1px;height:0px}
a:link, a:active, a:visited, a.postlink{color:#32475f;text-decoration:none}
a:hover, a.topictitle:hover{color:#839fbc;text-decoration:underline}
.title {background: none; color: #000000; font-size: 14px; font-weight: bold; font-family: Verdana, Helvetica,sans-serif; text-decoration: none}
.content {background: none; color: #000000; font-size: 10px; font-family: Verdana, Helvetica,sans-serif}
.block-title {background: none; color: #516A88; font-size: 10px; font-family: Verdana, Helvetica,sans-serif}
.storytitle {background: none; color: #516A88; font-size: 12px; font-weight: bold; font-family: Verdana, Helvetica,sans-serif; text-decoration: none}
.storycat {background: none; color: #000000; font-size: 12px; font-weight: bold; font-family: Verdana, Helvetica,sans-serif; text-decoration: underline}
.boxtitle {background: none; color: #000000; font-size: 10px; font-weight: bold; font-family: Verdana, Helvetica,sans-serif; text-decoration: none}
.boxcontent {background: none; color: #000000; font-size: 10px; font-family: Verdana, Helvetica,sans-serif}
.option {background: none; color: #000000; font-size: 10px; font-weight: bold; font-family: Verdana, Helvetica,sans-serif; text-decoration: none}
.tiny {background: none; color: #000000; font-size: 10px; font-weight: normal; font-family: Verdana, Helvetica,sans-serif; text-decoration: none}
.small {background: none; color: #000000; font-size: 9px; font-weight: normal; font-family: Verdana, Helvetica,sans-serif; text-decoration: none}
.sandersh1 {background: none; color: #990000; font-size: 18px; font-weight: bold; font-family: Arial, Verdana, Helvetica,sans-serif; text-decoration: none}
.sandersh2 {background: none; color: #990000; font-size: 16px; font-weight: bold; font-family: Arial, Verdana, Helvetica,sans-serif; text-decoration: none}
.sandersh3 {background: none; color: #990000; font-size: 14px; font-weight: bold; font-family: Arial, Verdana, Helvetica,sans-serif; text-decoration: none}
.sandersp {background: none; color: #000000; font-size: 12px; font-family: Verdana, Helvetica,sans-serif; text-decoration: none}
.sandershr {border: 5px;border-top-width:5px;height:2px}
img {border-style: none }

add after:

Code:

/* Blocks Control Section By: Vaudevillian */

/* Main Block */
.blockmain {width: 170px; margin-top: 6px; background-color: #F4F6FB; border: 1px; border-style: solid; border-color: #486386;}
.blocktitle{width: 100%; height: 21px; margin-left: auto; margin-right:auto; text-align: center; padding-top: 6px; background-image:url('../images/cellpic3.gif'); background-repeat: repeat-x;}
.blockcontent {width: 162px; padding-top: 6px; padding-left: 8px; text-align: left; background-color:#F4F6FB;}
.blockfooter{width: 100%; height: 27px; background-image:url('../images/cellpic1.gif'); background-repeat: repeat-x;}
/* End Main Block */

/* Block Font Override */
.blockcontentfont {background: none; font-size: 10px; font-family: Verdana, Helvetica,sans-serif; font-stretch: wider; color:#486386; font-style: normal; font-weight: 200;}
/* End Block Font Overide */

/* End Blocks Control Section */

/* Story Page Control Section By: Vaudevillian*/

/* Main Story Page */
.storyblock {width: 98%; margin-top: 6px; margin-left: 6px; background-color: #F4F6FB; border: 1px; border-style: solid; border-color: #486386;}
.storytitle {width: 100%; height: 21px; padding-top: 6px; text-align: center; background-image:url('../images/cellpic3.gif'); background-repeat: repeat-x;}
.storymain {width: 100%; background-color: transparent; display:table;}
.storymainrow {display:table-row; text-align:center;}
.storyimage {width: 12%; padding: 2%; margin-left: 10px; margin-top: 2px; margin-bottom: 2px; text-align: center; background-color: transparent; display:table-cell}
.storycontent {width:86%; padding: 2%; margin-right: 10px; margin-top: 2px; margin-bottom: 2px; text-align: left; background-color: transparent; display:table-cell}
.storyfooter {width: 100%; height: 21px; padding-top: 6px; text-align:center; background-image:url('../images/cellpic1.gif'); background-repeat: repeat-x;}
/* End Main Story Page */

/* Story Font Override */
.storytitlefont {background: none; color: #516A88; font-size: 10px; font-family: Verdana, Helvetica,sans-serif}
.storycontentfont {background: none; font-size: 10px; font-family: Verdana, Helvetica,sans-serif; font-stretch: wider; color:#000000; font-style: normal; font-weight: 200;}
/* End Story Font Overide */

/* End Story Page Control */

/* Main Table Control Section By: Vaudevillian */

/* Main Table */

.maintablebox {width: 98%; margin-top: 6px; margin-left: 6px; border: 1px solid #486386; background-color: #ffffff;}
.maintablehead {width:100%; height: 21px; padding-top:6px; background-image: url('../images/cellpic3.gif'); background-repeat: repeat-x;}
.maintablecontent {width:95%; margin-right: 2%; margin-left: 2%; padding-top: 4px; padding-bottom: 4px; background-color: #ffffff;}
.maintablefooter {width:100%; height: 21px; padding-top:6px; background-image: url('../images/cellpic1.gif'); background-repeat: repeat-x;}

/* End Main Table */

/* End Main Table Control Section */

open themes/fisubice/blocks.html

Find:

Code:

<table width="170" border="0" cellspacing="0" cellpadding="7">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td bgcolor="#486386"><table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td height="27" style="background-image: url(themes/fisubice/images/cellpic3.gif)"><table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td><font class="block-title"><strong>$title</strong></font></td>
</tr>
</table></td>
</tr>
<tr>
<td bgcolor="#F4F6FB"><table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td>$content</td>
</tr>
</table></td>
</tr>
<tr>
<td height="27" style="background-image: url(themes/fisubice/images/cellpic1.gif)"> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>

Replace with:

Code:

<div class="blockmain">

<div class="blocktitle">
<font class="block-title">
<strong>
$title
</strong>
</font>
</div>

<div class="blockcontent">
<font class="blockcontentfont">
$content
</font>
</div>

<div class="blockfooter">
</div>

</div>

open themes/fisubice/story_page.html

find:

Code:

<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td bgcolor="#486386"><table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td height="27" style="background-image: url(themes/fisubice/images/cellpic3.gif)"><table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td><font class="storytitle"><b>$title</b></font><font class="block-title"> </font></td>
</tr>
</table></td>
</tr>
<tr>
<td bgcolor="#F4F6FB"><table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td><a href="modules.php?name=News&new_topic=$topic" title="$topictext"><img src="$tipath$topicimage" border="0" alt="$topictext" align="right" hspace="10" vspace="10" /></a>$content</td>
</tr>
</table></td>
</tr>
<tr>
<td height="27" bgcolor="#F4F6FB"><table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td nowrap="nowrap"><div align="center"><font class="content">$posted</font><br /></div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>

Replace with:

Code:

<div class="storyblock">

<div class="storytitle">
   <font class="storytitlefont">
   <strong>
   $title
   </strong>
   </font>
   </div>

   <div class="storymain">


      <div class="storymainrow">

         <div class="storyimage">
   <img src="$tipath$topicimage" border="0" alt="$topictext" align="center" hspace="10" vspace="10" />
   </div>


         <div class="storycontent">
   <font class="storycontentfont">
         $content
   </font>
         </div>

      </div>

   </div>

   <div class="storyfooter">
   <font class="storytitlefont">
   $posted
   </font>
   </div>

</div>

open themes/fisubice/story_page.html

find:

Code:

<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td bgcolor="#486386"><table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td height="27" style="background-image: url(themes/fisubice/images/cellpic3.gif)"><table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td><font class="storytitle"><b>$title</b></font><font class="block-title"> </font></td>
</tr>
</table></td>
</tr>
<tr>
<td bgcolor="#F4F6FB"><table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td><a href="modules.php?name=News&new_topic=$topic" title="$topictext"><img src="$tipath$topicimage" border="0" alt="$topictext" title="$topictext" align="right" hspace="10" vspace="10" /></a><div class="content">$content</div></td>
</tr>
</table></td>
</tr>
<tr>
<td height="27" bgcolor="#F4F6FB"><table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td ><div align="center"><font class="content">$posted</font><br /><font class="content">$morelink</font></div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>

replace with:

Code:

<div class="storyblock">

<div class="storytitle">
   <font class="storytitlefont">
   <strong>
   $title
   </strong>
   </font>
   </div>

   <div class="storymain">


      <div class="storymainrow">

         <div class="storyimage">
   <img src="$tipath$topicimage" border="0" alt="$topictext" align="center" hspace="10" vspace="10" />
   </div>


         <div class="storycontent">
   <font class="storycontentfont">
         $content
   </font>
         </div>

      </div>

   </div>

   <div class="storyfooter">
   <font class="storytitlefont">
   $posted  •  $morelink
   </font>
   </div>

</div>

open themes/fisubice/tables.php

Do this step for OpenTable and OpenTable2

find:

Code:

Replace with:

Code:

Find:

Code:

</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>

Replace with:

Code:

</div>
<div class="maintablefooter">
</div>
</div>

if you want to see it in action

Only registered users can see links on this board!
Get registered or login to the forums!

Gremmie · Posted: Mon Apr 14, 2008 2:24 pm

Id's have to be unique in a document. Can't you use classes instead?

vaudevillian · Worker Joined: Jan 18, 2008 Posts: 139

Are the id's I used not unique?
Plus I'm setting up for a blank theme. This way its very easy to modify almost everything.

Gremmie · Posted: Mon Apr 14, 2008 2:43 pm

If you have 20 blocks on your home page, then you are going to have 20 IDs with the value blockspace, 20 with ID blockmain, etc. I think you can just use classes instead of IDs.

vaudevillian · Worker Joined: Jan 18, 2008 Posts: 139

I guess I should change it to class. Thanks Gremmie. I will edit it to comply. Smile

Edit:

Done changed over to class. Smile

Gremmie · Posted: Mon Apr 14, 2008 3:45 pm

My only other comment is I don't like the way you are nesting divs like that. There is no reason why $title has to be inside 2 divs, I don't think. Nor is the "empty" div blockspace needed. You can just put a margin or padding on blockmain to get the same effect.

I'm glad you are trying to get rid of tables though. Smile

spiders · Posted: Mon Apr 14, 2008 4:24 pm

great work !!!!

I call that innuativ !!!

greetz
Spiders

vaudevillian · Worker Joined: Jan 18, 2008 Posts: 139

Will tweak it a little more tomorrow. But I think I would leave the nesting alone. Seperating the fonts from the box layout makes it for easier reading.

Edit:

Alright just fixed it. No rouge style box. I will fix the font settings. I think it may mess up the way I will be doing the blank theme later on since I will be using fusibuse as the template to make it from. So your getting your wish. Razz

vaudevillian · Worker Joined: Jan 18, 2008 Posts: 139

Now, here comes the css story page. But here is the kick the way I did it, is clean and nice. But since IE does not support display tags properly I can not do a clean coding. I might need to add in a seperate style sheet for IE for the time being. All the other browsers support display:table; display:table-row; display:table-cell very nicely.

I dont want to have to put negitive values in for the boxes to align properly for the other browsers so the only way to do it until IE8 comes out is to have two seperate style sheets. I have the story file ready but need to make up a style sheet for IE. Please bare with me.

Screw it.... I adjusted it so what will happen now is that the topic pic would be over top the main story in IE but works fine in all other browsers with topic pic on the side. Will post soon.

spiders · Posted: Tue Apr 15, 2008 4:57 am

yepp,
thats the problem with IE Evil or Very Mad

vaudevillian · Worker Joined: Jan 18, 2008 Posts: 139

Gremmie wrote:

My only other comment is I don't like the way you are nesting divs like that. There is no reason why $title has to be inside 2 divs, I don't think. Nor is the "empty" div blockspace needed. You can just put a margin or padding on blockmain to get the same effect.

I'm glad you are trying to get rid of tables though. Smile

The only reason why its nested inside a block is for making new templates. This way you can have the head one pic and the body another and the footer another image. Having them all inside a perant box allows for a background image inside the main parent box, this way the content is easy to ajust to fit properly inside the image borders.

Gremmie · Posted: Tue Apr 15, 2008 7:29 am

That's fine but some experts (not me however) would say you are abusing div tags almost as much as tables were abused for layout. Perhaps CSS3 will make it easier to do the things we want. And of course it would help if certain browsers (cough, cough) would follow such standards.

vaudevillian · Worker Joined: Jan 18, 2008 Posts: 139

CSS 2.1 can do it, but like I said there is only one way to acomplish a theme edit with the way IE is right now. As soon as IE 8 comes out then it would be good to format the boxes with display tags.

See how I did the story_pages? The div tages with the display tags are nested and that is proper for CSS. Unless I was miss reading that somewhere.

Gremmie · Posted: Tue Apr 15, 2008 7:43 am

I know CSS 2.1 can do it it, but it requires nesting tags like that. I've been doing lots of reading on CSS lately, and many experts feel that is stylistically abusing the system. However the web community has recognized the usefulness of the result, so CSS3 is supposed to provide better support for this type of thing. E.g. the ability to attach more than one image to a tag. This would eliminate nesting. If you think about the web page as a document, and div's as semantic containers, nesting them like that just to display an image doesn't make any sense.

spiders · Posted: Tue Apr 15, 2008 8:11 am

Hi vaudevillian,

i think your way, to make themes without tables and with CSS is the right way and all Themers should make their themes with CSS and not with tables !!

greetz
Spiders

gotcha · Regular Joined: Mar 14, 2005 Posts: 91

[shameless plug]There are now 7(with more to come) CSS driven, tableless themes @

Only registered users can see links on this board!
Get registered or login to the forums!

, the first to bring tableless themes to phpnuke Wink

[/shameless plug]

Gremmie · Posted: Tue Apr 15, 2008 8:28 am

Please don't get me wrong...I hate table driven themes. I was just trying to point out that the CSS guys haven't fully given us enough tools yet. It is slightly easier to debug themes with nested div tags than nested tables. But we need a little more help from CSS. And it would be nice if browsers consistently supported CSS. But yes, onward and upward and start making themes without tables!

vaudevillian · Worker Joined: Jan 18, 2008 Posts: 139

Woot, working on the tables now. This one is a little tricky the way the forums wanna push everything right in the forums module.

spiders · Posted: Tue Apr 15, 2008 10:12 am

Tabless Themes are an important step in the direction of accessibility!

What does Accessibility?

The accessibility demands that any Internet content accessible. There are a large number of people in varying degrees, are restricted.These include blind or visually impaired people as well as motorized concentration inhibited or weak people.
But seniors and beginners have difficulty with, for example, to small and the operation of the mouse.Who Web content such offers that are available for each, has simultaneously via a website, the principle of search engines better captured.
Because search engines are also "only" on the text. So if, for example, a screen reader understands the content, it also does a search engine.

Barriers are for example strong nested layout tables !!

Most Nuke themes consist of nested layout tables !

greetz
Spiders

vaudevillian · Worker Joined: Jan 18, 2008 Posts: 139

tables.php is comming soon. Expect another edit in around an hour. Trying to work out nsn centerblocks. Man seems im rewriting everything. Smile

*Looks at vWar and forums and crys*

Edit: Tables.php is up. Smile

montego · Posted: Wed Apr 16, 2008 6:58 am

...and, another <shamelessplug>gotcha has graciously devoted his time to producing a tableless AND XHTML compliant theme for the upcoming RavenNuke 2.3.0 release. Thanks gotcha!!! </shamelessplug>

vaudevillian · Worker Joined: Jan 18, 2008 Posts: 139

I am about 60% finished one as well. If everything goes right. I can give fisubice to you without any <tables> all css boxes. Its a little tricky trying to format everting to colapse the same way. the top stuff is not as clean as what im working on right now so if you want to wait for a full fusibuce theme all css box driven you can wait till im done. The forums can be done as well...... But it would take a lot of time to do it. That I would need some one to consult with on. I am not sure where the tables for the forums are pulled from. Module directory or theme directory.
Then I will create one I made for raven nuke if you want it of course. Wink

mars · Posted: Sun Apr 20, 2008 5:02 pm

I just sent Raven a completely table free theme along with the design I did for him.
You can see it over at

Only registered users can see links on this board!
Get registered or login to the forums!

The theme is called PortalNews

Smile

vaudevillian · Worker Joined: Jan 18, 2008 Posts: 139

mars.... That is impresive. I have been trying to figure out how to do the columns like that for a while. I dont know how you are calling center_right.html or if you have a javascript but for now I must give up on trying to figure it out and move on. Im stuck with tables as the three columns. I will try a javascript later on but.. I did not want to use a javascript to accoumplish this. But on a plus side the javascript I was looking at was dynamic and allowed both right and left columns to be colapsed by user preferance. I will try again later. Too meny hours spent on making the columns colapse the way you got them, great work mars. I cant wait to look at that theme to see how you did it. But for now im at a lose.

vaudevillian · Worker Joined: Jan 18, 2008 Posts: 139

Well. I have almost given up. But... There is another option I can take. I can use javascript to allow a user to choose. The can close the left and the right side columns... But that is not fusibice. So I will make a new template for ravennuke, thats if he accepts it. Raven, would you care for another theme for the next distrabution?