XOOPS 
Forum
Forum Index General Forums Community Support Modules Support Themes Support Development International Support Module Hack Reviews Theme Designer Talk
  1. Board index / 
  2. XOOPS Themes and Templates Support forums / 
  3. Theme design questions 
  4.  / Theme Design Q & A - Ask your questions here
Register
1
Draven
Theme Design Q & A - Ask your questions here

  • 2005/1/24 4:04

  • Draven

  • Module Developer

  • Posts: 337

  • Since: 2003/5/28


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.
2
carnuke
Re: Theme Design Q & A - Ask your questions here

  • 2005/1/24 7:53

  • carnuke

  • Home away from home

  • Posts: 1955

  • Since: 2003/11/5


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
3
Draven
Re: Theme Design Q & A - Ask your questions here

  • 2005/1/24 17:25

  • Draven

  • Module Developer

  • Posts: 337

  • Since: 2003/5/28


Lol, well I guess everyone knows how to build themes
4
hyperpod
Re: Theme Design Q & A - Ask your questions here

  • 2005/1/24 17:53

  • hyperpod

  • Quite a regular

  • Posts: 359

  • Since: 2004/10/4


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
5
Draven
Re: Theme Design Q & A - Ask your questions here

  • 2005/1/24 18:47

  • Draven

  • Module Developer

  • Posts: 337

  • Since: 2003/5/28


Working on putting together an example for you... will post it shortly.
6
Draven
Re: Theme Design Q & A - Ask your questions here

  • 2005/1/24 20:27

  • Draven

  • Module Developer

  • Posts: 337

  • Since: 2003/5/28


Ok, here you go.

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

see it in action at http://gaining-mass.com/projects/3collayout/3%20Column%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.
7
hyperpod
Re: Theme Design Q & A - Ask your questions here

  • 2005/1/24 21:02

  • hyperpod

  • Quite a regular

  • Posts: 359

  • Since: 2004/10/4


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,
8
Draven
Re: Theme Design Q & A - Ask your questions here

  • 2005/1/24 22:01

  • Draven

  • Module Developer

  • Posts: 337

  • Since: 2003/5/28


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}>
9
studioC
Re: Theme Design Q & A - Ask your questions here

  • 2005/1/24 22:01

  • studioC

  • Friend of XOOPS

  • Posts: 922

  • Since: 2003/12/7


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:

..

..



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
10
carnuke
Re: Theme Design Q & A - Ask your questions here

  • 2005/1/26 9:14

  • carnuke

  • Home away from home

  • Posts: 1955

  • Since: 2003/11/5


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
(1) 2 3 »

Login

Register now!  |  Lost Password?

Search

Advanced Search

Recent Posts

Who's Online

406 user(s) are online (273 user(s) are browsing Support Forums)

Members: 0

Guests: 406

more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Nov 30
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits