Dynamic CSS

**vbmadmin** · 06-19-2008, 02:05 PM

Hi,
I am trying to implement this menu http://www.dynamicdrive.com/style/cs...rizontal_menu/ .
Everything works ok if I use a different page for each button and move the current class to each link depending on the page I want to load.
The problem is when I try to use this menu on a dynamic site the pages get created from a template so everything will be the same except the content.
I have a few ideas.
1. I was thinking to make a class for each link class="home" for home link class="FAQ" for faq link and then to load a different css file depending on the link. I still try to work this one out.
2. To use java to switch between css files depending whcih link I click .. but I don't know how yet.
The question is:
What would be best option out , as I want to change the page color scheme depending on the link (eg. all buttons and borders for Home to be red, blue for FAQ etc.)

Thank you!

**Spinethetic** · 06-19-2008, 02:40 PM

First, declare a variable in the very first line of your pages:
<?php $thisPage='home'; ?> change home to name of the page

PHP Code:


<?php
    echo "<ul class=\"glossymenu\">";
if ($thisPage=='home') {
    echo '<li class="current"><a href="home.htm"><b>Home</b></a></li>';}
else {
    echo '<li><a href="home.htm"><b>Home</b></a></li>';}

if ($thisPage=='page1') {
    echo '<li class="current"><a href="page1.htm"><b>Page 1</b></a></li>';}
else {
    echo '<li><a href="page1"><b>Page 1</b></a></li>';}    
if ($thisPage=='page2') {
    echo '<li class="current"><a href="page2.htm"><b>Page 2</b></a></li>';}
else {
    echo '<li><a href="page2"><b>Page 2</b></a></li>';}    
if ($thisPage=='page3') {
    echo '<li class="current"><a href="page3.htm"><b>Page 3</b></a></li>';}
else {
    echo '<li><a href="page3.htm"><b>Page 3</b></a></li>';}    
echo "</ul>"
?>

I've only been working in PHP for a couple months now, so my explanation is most likely cryptic; But basically each IF statement above looks for the value of variable $thisPage, and if it matches 'home', than carry out <li class="current"><a href="home.htm"><b>Home</b></a></li>, the ELSE statement basically means otherwise, if it is not, etc etc, and so if $thisPage's value is not 'home', thatn carry out <li><a href="home.htm"><b>Home</b></a></li>, so on and so forth. Others can explain better than me, but I know it works for me, helps keep my css directory bare, and is easy to edit if I choose to add more buttons.

copy

PHP Code:


<?php include("menu.php"); ?>

and paste it wherever you want your menubar to appear as well.

Best Regards
~Spine

**vbmadmin** · 06-19-2008, 03:08 PM

Thanks,
I will give it a try

Should I do the same thing with the css files to change the general color scheme ?

**Spinethetic** · 06-19-2008, 03:29 PM

Originally Posted by vbmadmin

Thanks,
I will give it a try

Should I do the same thing with the css files to change the general color scheme ?

Are you using all 5 colour schemes designed for that menu? if so than you would want to declare a second variable as well; <?php $thisPage='home'; $colorscheme='green' ?> change green to blue, red, etc etc... whatever color scheme you want for that particular page.
and put something along the lines of this in the <HEAD> of your page:

PHP Code:


<?php
if ($colorscheme=='green') {
    echo '<link href="css/greenmenu.css" rel="stylesheet" type="text/css" />';} else {}

if ($colorscheme=='blue') {
    echo '<link href="css/bluemenu.css" rel="stylesheet" type="text/css" />';} else {}
if ($colorscheme=='orange') {
    echo '<link href="css/orangemenu.css" rel="stylesheet" type="text/css" />';} else {}
?>

And just make different css files each in line with the image changes for each one.

Best Regards
~Spine

**vbmadmin** · 06-22-2008, 12:52 PM

Thanks !
I tried your suggestion and it worked well

thanks very much.
Probably I forget to mention on the original post how my pages are actually working.
I have a template file main.html ( it does run php if i put it in the file) with a main.css
Then I have a index.php file which creates the pages I want from the template file by filling some of the variables in it .( {content}, (advertising} etc.)

The question is how can I achieve the same thing but only reloading the same file like main.php which has a 2 global variables one for the page name and one for the css file which start as a default and change depending which link I click .
Something like this main.php?action=page1 then the action global variable changes to page1.
I hope I am not to confusing .

Thank you.

**Spinethetic** · 06-24-2008, 11:50 PM

Originally Posted by vbmadmin

Thanks !
I tried your suggestion and it worked well

thanks very much.
Probably I forget to mention on the original post how my pages are actually working.
I have a template file main.html ( it does run php if i put it in the file) with a main.css
Then I have a index.php file which creates the pages I want from the template file by filling some of the variables in it .( {content}, (advertising} etc.)

The question is how can I achieve the same thing but only reloading the same file like main.php which has a 2 global variables one for the page name and one for the css file which start as a default and change depending which link I click .
Something like this main.php?action=page1 then the action global variable changes to page1.
I hope I am not to confusing .

Thank you.

Try putting something like this in the <HEAD> of main.php:

PHP Code:


<?php
$colorscheme = $_GET['colorscheme'];
if ($colorscheme=='green') {
    echo '<link href="css/greenmenu.css" rel="stylesheet" type="text/css" />';} else {}

if ($colorscheme=='blue') {
    echo '<link href="css/bluemenu.css" rel="stylesheet" type="text/css" />';} else {}
if ($colorscheme=='orange') {
    echo '<link href="css/orangemenu.css" rel="stylesheet" type="text/css" />';} else {}
?>

Using this method, your links would look something like http://yourdomain.com/main.php?action=page1&color=green

Also using this method, in the link, you could just change 'green' to 'blue' and the same page would appear, but with the blue menu appearing instead of green. If that would be an 'effect' that interests you.

Best Regards
~Spine

Thread: Dynamic CSS

Thread Tools

Search Thread

Dynamic CSS

Bookmarks

Bookmarks

Posting Permissions