fisubice theme question

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

Is the entire fisubice theme gonna be handled by the style sheet?

nextgen · Client Joined: Sep 28, 2006 Posts: 52

I wouldnt think it will be my friend. Thats just my thoughts as the forums itself would be a nice task to make css. I do know it will be XHTML compliant though which is a terrific step forward.

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

I can redo the forums myself. Im trying to alter themes and stip out all image tags to put all image tags inside the css file. I can also do it to the forums as well. I just want to be able to make a blank template for anyone to use. Will make a lot of peoples work nice and easy. Basicly one template that is complient with ravennuke and have as meny options as possible. Like the famous hide left blocks option. Also install a few more mods. But I was told wait for 2.20 then work with that. Would it be so nice to make a template and only have to edit the style sheet Smile

.

I might change things over to div boxes in certain areas.

nextgen · Client Joined: Sep 28, 2006 Posts: 52

that sounds like a nice project my friend. If you could use a hand just contact via PM I would like to think something like that would be very useful.

montego · Posted: Wed Feb 06, 2008 6:57 pm

vaudevillian, if you want a preview of the fisubice stuff, PM me your email address. If you are getting antsy that is... Wink

nextgen · Client Joined: Sep 28, 2006 Posts: 52

id like to see that myself montego may i ?

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

nextgen wrote:

that sounds like a nice project my friend. If you could use a hand just contact via PM I would like to think something like that would be very useful.

Right now im just redoing the header and trying to make it look right with div tags. I will try and make it so you can switch a login from the left side or the right side or even the bottom bar. Maybe not the bottom bar but see what I think I wanna do first. Im gonna put a flash navigation bar in, with a flash news ticker.

nextgen · Client Joined: Sep 28, 2006 Posts: 52

That sounds goodmy friend, you definately know what you want. If you decide you need a hand or just want another set of eyes just let me know ok.

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

I will.

montego · Posted: Thu Feb 07, 2008 7:07 am

nextgen wrote:

id like to see that myself montego may i ?

Sure, PM me your email address (sorry, I don't keep those around - kind of my own little mini "privacy policy" thing Wink

)

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

The only thing I might need help with is a autosetup database entry. I might need to use a few $values.

fkelly · Posted: Thu Feb 07, 2008 12:09 pm

During 2.10 development (or maybe it was 2.10.01, I don't remember) I started moving some of the images out of the theme.php and into the style sheet for the Slash theme. My intent was to do the same for Slashocean and then move on to other themes but we ran out of time. If you take the 2.10.01 code and compare the style sheets for Slash and SlashOcean you'll see the difference. Then look at how the theme.php uses them.

This is no "silver bullet" but rather a tentative step. But sometimes I know it helps to have real code to look at just to get a handle around what could be done.

Fisubice still uses the separate html file and eval method, which in my opinion really complicates theme maintenance. I believe that I know why themes were originally done that way; people wanted to use something like Dreamweaver to layout the html portions or even "slice" up sections of their themes from Photoshop into html files. That whole approach makes me gag. You wind up with these html fragments that you really can't do anything with in a WYSIWYG editor anyway. But there I go off topic again.

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

Not off topic, not really. My eventual goal is moving everything tablewise over to a div format.

Since it looks like ragular html is being thrown out the door eventual in favor of div boxes. But for now It will just be moving the theme refrances over to the style sheet.

div boxes are a pain in the ass to do what tables do but once the properlayout is there you can just make a note above the boxes positions of what not to be changed.

montego · Posted: Fri Feb 08, 2008 5:55 am

vaudevillian, btw, sorry that I have not sent you the files yet... been dealing with some issues. Hopefully today.

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

Thats totaly alright. I will be posting the header code a little later today. Only thing im wondering if it should be .html or .php

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

Alright here is the basics of the css layout im gonna be using, took a while to get the boxes to colapes the way I wanted them too. Only thing im having trouble with is there is a space in IE on the right hand side. Firefox looks great.

Code:

<head>
<style type="text/css">

#parentheader {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
background: #000000;
height: 270px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 270px;
width: 100%;
overflow: hidden;
}

#bheaderl {
position: absolute;
top: 0px;
left: 0px;
width: 50px;
background: #c8c8c8;
height: 270px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 270px;
}

#bheaderr {
position: absolute;
top: 0px;
right: -1px;
width: 50px;
background: #4E387E;
overflow: hidden;
height: 270px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 270px;

}

#headerblockl {

position: absolute;
top: 0px;
left: 50px;
width: 200px;
background: #2554C7;

height: 210px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 200px;
height: 210px;
}

#headerblockc {

position: relative;
top: 0px;
left: 250px;
margin-right: 250px;
background: #E4287C;
height: 210px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 210px;
}

#headerblockr {

position: absolute;
top: 0px;
right: 49px;
width: 200px;
background: #52F3FF;

height: 210px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 200px;
height: 210px;
}

#theaderl {

position: absolute;
top: 0px;
right: 0px;
width: 200px;
background-color: #347C17;

height: 30px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 200px;
height: 30px;
}

#theaderc {

position: relative;
top: 0px;
left: 0px;
margin-right: 0px;
background-color: #FFFF00;
height: 30px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 30px;
}

#theaderr {

position: absolute;
top: 0px;
right: 0px;
width: 200px;
background-color: #7E2217;

height: 30px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 200px;
height: 30px;
}

#mainblockl {

position: absolute;
top: 30px;
left: 0px;
width: 200px;
background: #7E2217;

height: 180px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 200px;
height: 180px;

}

#mainblockc {

position: relative;
top: 0px;
left: 0px;
margin-right: 249px;
background: #2554C7;
height: 180px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 180px;
}

#mainblockr {

position: absolute;
top: 30px;
right: 0px;
width: 200px;
background: #E4287C;

height: 180px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 200px;
height: 180px;
}

#newstickl {
position: absolute;
top: 210px;
left: 660px;
width: 20px;
background: #FFFF00;
overflow: hidden;
height: 60px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 60px;
width: 20px;
}

#newstickc {
position: absolute;
top: 210px;
width: 483px;
right: 69px;
background: #347C17;
height: 60px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 60px;
width: 483px;
overflow: hidden;
}

#newstickr {
position: absolute;
top: 210px;
right: 49px;
width: 20px;
background: #c8c8c8;
overflow: hidden;
height: 60px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 60px;
width: 20px;
}

#timeclock {
position: absolute;
top: 210px;
left: 480px;
width: 180px;
background: #7E2217;
height: 60px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 60px;
width: 180px;
}

#navibarz {
position: absolute;
top: 210px;
left: 30px;
width: 450px;
background: #E4287C;
height: 60px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 60px;
width: 450px;
}

</style>
</head>

<body>
<div id="parentheader">
<div id="headerblockl">
   <div id="theaderl">
   </div>
   <div id="mainblockl">
   </div>
</div>
<div id="headerblockc">
   <div id="theaderc">
   </div>
   <div id="mainblockc">
   </div>
</div>
<div id="headerblockr">
   <div id="theaderr">
   </div>
   <div id="mainblockr">
   </div>
</div>
<div id="newstickc">
</div>
<div id="newstickl">
</div>
<div id="newstickr">
</div>
<div id="timeclock">
</div>
<div id="navibarz">
</div>
<div id="bheaderr">
</div>
<div id="bheaderl">
</div>
</div>
</body>

Very small code, I will post a psd with it as well so its easy to make it your own. Also I will put the $userinfo string in there. What do you guys think. of course the css will go in the css folder. I will make multipule templates like this for a blank theme then all you do is switch out the header css with the new header css and the header.html and a way you go.

This is just a quick preview, I will add the background url tags and image centering lines soon. fr the flash areas soon.

I left enough area at the bottom to join almost any theme to the bottom of the header.