xoops forums

Draven

Module Developer
Posted on: 2005/1/24 4:04
Draven
Draven (Show more)
Module Developer
Posts: 337
Since: 2003/5/28
#1

Theme Design Q & A - Ask your questions here

Ok, I decided to start a theme design Q & A. Ask any question you want, I'll try my best to answer them. This includes any design questions for Xoops, including module templates.

I've spent a great deal of time developing themes for clients, so now yours chance to learn my secrets.

Ask away, I'll try my best to respond to each one.

carnuke

Home away from home
Posted on: 2005/1/24 7:53
carnuke
carnuke (Show more)
Home away from home
Posts: 1955
Since: 2003/11/5
#2

Re: Theme Design Q & A - Ask your questions here

Draven, this is great opportunity for users to benefit from your expertise and experience Can I also request that if any 'common' or 'interesting' things come up they are also posted into the XOOPS FAQ?

Thanks for your help, Richard

Draven

Module Developer
Posted on: 2005/1/24 17:25
Draven
Draven (Show more)
Module Developer
Posts: 337
Since: 2003/5/28
#3

Re: Theme Design Q & A - Ask your questions here

Lol, well I guess everyone knows how to build themes

hyperpod

Quite a regular
Posted on: 2005/1/24 17:53
hyperpod
hyperpod (Show more)
Quite a regular
Posts: 359
Since: 2004/10/4
#4

Re: Theme Design Q & A - Ask your questions here

In a CSS no tables theme, do you know a trick which will allow a 3 column layout to expand the middle content area spanned into a 2 colum layout?

Like when using Smarty, you can say <{if $xoops_rblocks}> and render the right side blocks or not at all if there are no right side blocks.

Then, instead of having blank right side, the middle content area expands to the right side.

currently im setting margin-left:160px; for the content area div.

Know of any trick that lets a 3 column layout morph into a 2 column?

Thanks,

_Dan

Draven

Module Developer
Posted on: 2005/1/24 18:47
Draven
Draven (Show more)
Module Developer
Posts: 337
Since: 2003/5/28
#5

Re: Theme Design Q & A - Ask your questions here

Working on putting together an example for you... will post it shortly.

Draven

Module Developer
Posted on: 2005/1/24 20:27
Draven
Draven (Show more)
Module Developer
Posts: 337
Since: 2003/5/28
#6

Re: Theme Design Q & A - Ask your questions here

Ok, here you go.

Get the files at http://gaining-mass.com/projects/3collayout/

see it in action at http://gaining-mass.com/projects/3col ... olumn%20CSS%20Layout.html

Something to note, there's a few extra classes in the two css files to handle the hiding of div tags using javascript and shouldn't be required when you are simply loading the page with it hidden. These are just to solve a couple quirks between IE and mozilla when using javascript to change DISPLAY:; settings.

You will need to change the padding setting for IE users on the class .two though or the content will not go full width.

CSS is nice, but with the zillion differences between browsers, it's sometimes a better idea to use one table for the formatting.

Anyway, it can be done as I displayed here.

This also includes a css hack for showing everything at 100% hieght, since I know that's a big question often aswell.

hyperpod

Quite a regular
Posted on: 2005/1/24 21:02
hyperpod
hyperpod (Show more)
Quite a regular
Posts: 359
Since: 2004/10/4
#7

Re: Theme Design Q & A - Ask your questions here

Very cool... nice example.

So how would you render it in XOOPS depending on if the right blocks exist?

Thx for the detailed CSS info... I didnt think about using javascript to hide/show layers.

Cheers,

Draven

Module Developer
Posted on: 2005/1/24 22:01
Draven
Draven (Show more)
Module Developer
Posts: 337
Since: 2003/5/28
#8

Re: Theme Design Q & A - Ask your questions here

Quote:

hyperpod wrote:
So how would you render it in XOOPS depending on if the right blocks exist?


the same way you always do, wrap the right include with the <{if $xoops_rblocks}> ... <{/if}>

But add the following to your center div insteads of the class=''...

<{if $xoops_rblocks}> class='tablecell two'<{else}> class='tablecell padtwo'<{/if}>

studioC

Friend of XOOPS
Posted on: 2005/1/24 22:01
studioC
studioC (Show more)
Friend of XOOPS
Posts: 922
Since: 2003/12/7
#9

Re: Theme Design Q & A - Ask your questions here

hello hyperpod,

so you have <{$xoops_showrblock}> ="1" if a rightblock is set to activ, yes? and "0" if there's no block set to active on the right side.

so you can play with this ....

use classes in theme like:

<div class="centerblock<{$xoops_showrblock}>"> ..</div>
<div class="right<{$xoops_showrblock}>"> ..</div>


so you have 4 different settings available for your stylesheets depending on that block events, isn't it?

so play within you style.css

.centerblock0 {width: 600px;}
.centerlock1 {width: 400px;}

.right0 {display: none;}
.right1 {width: 290px;}


or use one of my elder dl files to see it in my examples. play with left block in combination of these two using <{$xoops_lblocks}> and you will have more possible solutions to play and a bit more fun ...


cheers
michael

carnuke

Home away from home
Posted on: 2005/1/26 9:14
carnuke
carnuke (Show more)
Home away from home
Posts: 1955
Since: 2003/11/5
#10

Re: Theme Design Q & A - Ask your questions here

I have been using the 'show/hide blocks trick on my personal website with the following code

var getById = (typeof document.getElementById != "undefined");
function 
toggleDisplay(obj,display1,display2)
    {
    if(!
getById) return;
    
obj getRef(obj);
    
// If it's set to "none", changes to "block"
    
if(obj.style.display == display2)
        
obj.style.display display1;
    else
    
// If it's set to "block", it stays in "block"
        
obj.style.display display2;
    
repaintFix();
    }
function 
getRef(obj)
    {
    if(
getById)        
        return(
typeof obj == "string") ? document.getElementById(obj) : obj;
    }
function 
repaintFix(obj)
    {
    if(
"undefined" == typeof document.body      || "undefined" == typeof document.body.style) return;
    if(
obj == null)
        
obj == document.body;
    else 
        
obj getRef(obj);
    
document.body.style.visibility "hidden";
    
document.body.style.visibility "visible";
    }
//-->


and the link image to show/hide...
<span style="float: left; width: 23px;"><img name="toggle" src="<{$xoops_imageurl}>images/toggle1.gif" width="23" height="23" border="0" alt="Hide/show left column" class="pointer" onclick="toggleDisplay('leftcolumn','block','none')"></span>
                                <
span style="float: right; width: 23px;"><img name="toggle" src="<{$xoops_imageurl}>images/toggle2.gif" width="23" height="23" border="0" alt="Hide/show right column" class="pointer" onclick="toggleDisplay('rightcolumn','block','none')"></span>


This works ok, but when ever I refresh or change the page, the blocks return to the show condition.

How can I make the 'hide'setting remain on all pages until manually reset?

Thanks

Richard