• Howdy! Welcome to our community of more than 130.000 members devoted to web hosting. This is a great place to get special offers from web hosts and post your own requests or ads. To start posting sign up here. Cheers! /Peo, FreeWebSpace.net
managed wordpress hosting

[help] change layout without php?


New Member
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?
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?
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.
Hang on...back track.... 2 styles in css?

So basically it'd be? :


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

and do everything else here

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


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.


.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.
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*****************

tulip bacground here

rose background here

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.
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.
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.


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.
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