[help] change layout without php?

[Shedevil]

I have a friend who can't use php on her site--because her PAID host doesn't allow php (for some stoneage reason!). However she'd like to change layouts with a simple click. E.g. click on a picture or drop down box that changes the layout.

Is there a non-php script that does this?

 

[Jun Luzon]

CSS is powerful enough to change almost everything in your layout.

 

[Shedevil]

Yeah I know (I ain't that stupid), but what I mean is if you have a select box or an image to CHANGE the layout e.g. someone doesnt like the design so one click, the visitor can change it to one in the selection/shown as an image.

kinda like what php headers do with site skin designs, but just have the style.css controling the change.

I have php on MY site doing it using <?php include('skinnerhead.php'); ?> which reads coding to change the layout with a click, but my friends site can't use that because it's php.

Isnt there a java script that could do that?

 

[Jun Luzon]

You ain't stupid but it seems you don't know much about CSS which can do that simple task much better than a complicated java script.

Just create two styles inside your style.css and that's it.

 

[Shedevil]

Hang on...back track.... 2 styles in css?

So basically it'd be? :

<style>

/*Style 1*/
body {
all body styling here
}

and do everything else here

/*Style 2*/
same as the top different colours and images here

</style>

Right? So if something is clicked on e.g. roses (reading style 1), the template for roses will change the site and if someone chooses something like pink (style 2), a pink theme will appear?

I only know of doing ONE style per style sheet so body, p, blockquote etc. doesn't confuse the file when trying to read. I've NEVER seen it or DOCUMENTED any other way.

I use divs in my layout to read my images set by css.

E.g.

.header {
background-image: url(myimage.gif);
background-repeat: repeat-x;
width: 740px;
height: 140px;
position: absolute;
}

and using <div class="header"><span></span></div> to call the image header.
I design the layouts for my friend (she loves my layouts and is currently getting rid of iframes from her site for divs), but I don't know how to design css not to confuse the basic elements: body, p, blockquote etc.

I know classes and ids can be set for things like header, title whatever I desire to call images, titles, content etc. of the site.

 

[Jun Luzon]

You're actually getting it, but I think the easiest way to do it if you are going to use a selector is to load a similar content with a different class or id.

Let's say, you have a particular content that you want to change the background.

**********2 HTML FILES*****************
Say you have rose_index.html whose content is:

<div id="rose">fixed content</div>

And another tulip_index.html for those who prefer tulip than rose:

<div id="tulip">fixed content</div>

**********1 CSS*****************

div#tulip{
tulip bacground here
}

div#rose{
rose background here
}

********selectors*********
rose = loads rose_index.html
tulip = loads tulip_index.html

Basically the only difference between the two html files is the id of a particular content.

 

[Shedevil]

Ah ok. So style colors set by the body tag in CSS really can't change UNLESS it's styled in the fix content?

Hmn seems pretty simple yet so complicated when not using php. Thanks, we'll give it a try.

 

[Jun Luzon]

Ah ok. So style colors set by the body tag in CSS really can't change UNLESS it's styled in the fix content?

Not quite true. Here's an example from csszengarden of a design that changes the entire layout when viewed at a different browser.

http://www.csszengarden.com/?cssfile=062/062.css

Try viewing it in a firefox browser and then through an IE and you will see the difference.

The trick is where and how to place the selector that will toggle the change of layout. If you only have two layouts to choose from I believe you can get around with it using the anchors' styles.

 

[DarkGrave]

http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

-- End --

Also, Tell her to switch hosting providers.

 

[Mystikk]

It's been awhile since I've heard of a host that doesn't offer some sort of server side scripting support.

 

[Eclouds]

Or you could use one of the following 2 options:
1. find a host that does (98% of all hosts today do)
2. use javascript