/    Sign up×
Community /Pin to ProfileBookmark

how to click on a link and change the stylesheet?

Copy linkTweet thisAlerts:
Apr 07.2008

Hi.

I am building a site and i want the site to switch between summmer and winter seasons, ie. a different style sheet, pics etc.

So my first question is how do i go about this?

I read somewhere that i need to set a cookie on the users browser etc.
However, im not a php programmer so was wandering if someone could elabourate on this idea.

Thanks.

to post a comment
PHP

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@kurbyApr 07.2008 — [code=html]<link rel="stylesheet" title="default" href="style1.css" type="text/css">
<link rel="alternate stylesheet" title="secondary" href="style2.css" type="text/css">[/code]

This will do this in HTML. In firefox you would then be able to got to view>page style.

In javascript I assume you could do the following:
[CODE]
var linkNode = document.getElementsByTagName("link");
linkNode[0].href = "newStyle.css";
[/CODE]
Copy linkTweet thisAlerts:
@ssbeatsauthorApr 07.2008 — hi thanks!

yeh that would change the stylesheet. However, i guess i would still need to use a cookie so that when the user clicked on another page it would still be in the summer season. (i think i forgot to mention that part).

So could i somehow, perhaps ebedded in the url, set a cookie so that when the page loaded it could check to see if the cookie is set to summer of winter?

Cheers!
Copy linkTweet thisAlerts:
@kurbyApr 07.2008 — This will set a cookie to expire in one hour:
[code=php]
setcookie("styleURL", "style2.css", time() + 3600);
[/code]

This will read a cookie after you set it:
[code=php]
extract($_COOKIE);
print("<link rel='stylesheet' title='default' href=$styleURL type='text/css'>");
[/code]

You may need to set the cookie in javascript instead:
[CODE]
document.cookie =
'styleURL=style2.css; expires=someDate';
[/CODE]
Copy linkTweet thisAlerts:
@ssbeatsauthorApr 07.2008 — sorry there was one other thing i forgot to mention.

The site is a joomla site therefore it is php driven. i would somehow need to set the cookie during or after the user has clicked on the link.

That way i could then test the value of this cookie using an if statement or something.

Is there a way of doing this?

thanks kurby!
Copy linkTweet thisAlerts:
@kurbyApr 08.2008 — Whether its joomla or not, sometimes you still have to use javascript.

If your HTML for the link is as follows.
[code=html]<a onclick="changeStyle(style2.css)">Change to style2</a>[/code]

Your javascript function will be:
[CODE]
function changeStyle(styleURL)
{
document.cookie = 'styleURL=' + styleURL + '; expires=someDate';
var linkNode = document.getElementsByTagName("link");
linkNode[0].href = styleURL;
}
[/CODE]

Be aware that cookies are not readable until the page is refreshed. So you either need to check to see if styleURL cookie exists in PHP or in javascript. I think it would be easier in PHP.

This code will go in the header.
[code=php]
extract($_COOKIE);

if (!(isset($styleURL)))
$styleURL = "style1.css";

print("<link rel='stylesheet' title='default' href=$styleURL type='text/css'>");
[/code]
Copy linkTweet thisAlerts:
@ssbeatsauthorApr 08.2008 — cool!

its 3am where i am so I think ill have a go in the morning.

thanks for your help kurby!
×

Success!

Help @ssbeats spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...