how to use different css file in one page.

[snitu]

hello

I have a problem that how to use different css files in one single page.
In that page how to pass link using dropdown menu and select link for css file and it will change the color of whole page.


Plz..........................
Reply me as soon as possible.

Thanks

[acoder]

Set the stylesheet for the page with an id:
[HTML]<link rel="stylesheet" href="col.css" type="text/css" id="ss" />[/HTML] then when a new file is chosen, set the href to the new file:

document.getElementById('ss').href = 'newfile.css';

[snitu]

Set the stylesheet for the page with an id:
[HTML]<link rel="stylesheet" href="col.css" type="text/css" id="ss" />[/HTML] then when a new file is chosen, set the href to the new file:

document.getElementById('ss').href = 'newfile.css';

Thank
But my reqiirement is just like yahoo.com site for choose Page Option and click on color it changes the color of whole page. same thing i am doing in my website.
Plz..........................

Reply as soon as possible.


Thanks

[acoder]

In your css files, set the colours of all the objects on the page to whatever you require.

[snitu]

In your css files, set the colours of all the objects on the page to whatever you require.

Hi

I am not getting u answer.

[snitu]

Hi

I am not getting u answer.

And one more this is i want to provide Authority to user to change the style of the mainpage of our website. using (color picker) or css file.

[acoder]

Hi

I am not getting u answer.

Use the background-color property as well as the color property for text. That will enable you to control the color in the page.

[acoder]

And one more this is i want to provide Authority to user to change the style of the mainpage of our website. using (color picker) or css file.

If you're using a CSS file, you can change the href attribute as I showed earlier. With regards to choosing, add an onchange to the dropdown which calls a function:
[HTML]<select ... onchange="changecss(this);">[/HTML] Make sure that the values of the options are equal to the location of the css files. Then in your function, just set the link href attribute to the value of the dropdown:

document.getElementById('ss').href=selObj.value;

[snitu]

If you're using a CSS file, you can change the href attribute as I showed earlier. With regards to choosing, add an onchange to the dropdown which calls a function:
[HTML]<select ... onchange="changecss(this);">[/HTML] Make sure that the values of the options are equal to the location of the css files. Then in your function, just set the link href attribute to the value of the dropdown:

document.getElementById('ss').href=selObj.value;

Sir
I am not getting it can u plz......... give me any complete example
Plz.............................................

[devsusen]

Hi,

I think the page u like to design that can be achieved using server side scripting, CSS and programatically appling different style in the page.

susen

[snitu]

Hi,

I think the page u like to design that can be achieved using server side scripting, CSS and programatically appling different style in the page.

susen

I am designing my website by using dojo + javascript and now my requirement is to give user to change the colors of my main page of my site.
just like yahoo.com site in that the user can change the color of main page(home page) . you can go to see the site of Yahoo.com there is one option PageOption select and chose the color it will change the color the home page of Yahoo.com.


Plz.......................
See this example and reply me


Thanks

[acoder]

See this example - a basic example showing you how to link to an external style sheet.

See the style sheet (styles.css) here. Notice the use of color and background-color.

In your case, define a few stylesheets like this using your own colours. Then use the href attribute to change the stylesheet dynamically.

Re. the select. Try, e.g. [HTML]<select ... onchange="changecss(this)">
<option value="red.css">Red<option value="blue.css">...
</select>[/HTML]
Then your function:

function changecss(selObj) {
 document.getElementById('ss').href=selObj.value;
}

Note that you have to set the external link tag's id to 'ss'.

[snitu]

Hi

Thanks.
Now my problem is Solve.

[acoder]

No problem, you're welcome.

[jagz]

heyy guys i have the same problem :( i have website where i need to put drop downbox where user can select different style can u please help me with this.. thanxx