View Full Version : Is There A Way to Quickly Change the Web Layout?

Jan 21st, 2007, 10:00 PM
I was just wondering if there was a way to easily change the layout on all of your web pages quickly. I've used SSI for the navigation bars, logo and footer, but I can't figure how to easily change the whole layout (background, table colors, font, etc). Is there a way to do this? I tried using a SSI with only the color code (sounds stupid but it would easily change the color) but that didn't work.

Jan 21st, 2007, 10:03 PM
You should use a stylesheet. A stylesheet contains CSS. If you don't know what CSS means then I suggest you start doing some CSS tutorials. www.w3schools.com and www.htmldog.com are good places to start.

Jan 21st, 2007, 10:05 PM
What you are looking for is all done with CSS (in combination with semantic - tableless and meaningful - HTML).

I'd suggest you study the site at http://csszengarden.com very thoroughly. This is one plain HTML file with only text on it and it's changed numerous times with different stylsheets. That doesn't work with table based layouts (at least not to its full extent).

Jan 21st, 2007, 10:09 PM
I've done a bit of CSS myself, but how can you edit all of your pages easily without going into each page to change the layout? Like how SSI works, you just change the included file.

Jan 21st, 2007, 10:10 PM
By using CSS. Check out this site
All of the html is exactly the same for each layout. The only thing changing is the stylesheet.

Jan 21st, 2007, 10:26 PM
Hum... sounds complicated people... I prefer simply using the PHP include function and then all you have to do is edit the included file.... eg...

<!-- Include Page Header Here -->

Main Page Content

<!-- Include Page Footer Here -->

And when I say header and footer I am referring to everything before and after your main page content.

Jan 21st, 2007, 10:28 PM
But the OP isn't talking about changing content on the fly. They are talking about changing background colors, fonts, and page layout on the fly. They are already using SSI (server side includes) so I see nothing complicated about this.

Jan 21st, 2007, 10:49 PM
I've done a bit of CSS myself, but how can you edit all of your pages easily without going into each page to change the layout? Like how SSI works, you just change the included file.

<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen,projection" />

...like that.


Jan 22nd, 2007, 12:53 AM
A link to a stylesheet (as Gary quoted and Aero and me were indirectly referring to by posting the link to csszengarden.com) is much like an SSI comment or PHP include statement. There is one external CSS file and by changing the background color rule in this file you are changing the background color on every page that has this link to the stylesheet.
As said: study the functionality of the CSS Zen Garden and you'll get an idea.

Jan 22nd, 2007, 12:59 AM
Oh, you mean like click a link and the style changes? If so then I must have misread the original posts... sorry about that! And yes, Aero would be correct to use SSI, and possibly even a simple JavaScript if then statement to switch the stylesheets might work.

Jan 22nd, 2007, 02:42 AM
If it's only about changing the content by the click of a link a stylesheet switcher (http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm) JavaScript is enough. SSI (or any kind of server side include in whatever language, for that matter) is related to the actual content in the HTML file whereas changing font, color, etc. is done by changing either the rules in the stylesheet or switching the applied stylesheet in general (without any server side script or changes to the HTML being necessary).

Jan 22nd, 2007, 05:06 AM
Most modern web browsers have a CSS switcher built in. All you need to do is specify the alternate stylesheets in links in the head of the page and they automatically get added to the appropriate option in the View menu. The only browser I know of that doesn't support it in the browser itself is IE and you can always use a Javascript CSS switcher that makes use of the alternate stylesheet declarations so as to give IE users with active scripting enabled and anyone using a modern browser even without Javascript a way to switch between styles. Those with a modern browser and Javascript then get two ways to do the switching.