Using cookies and php to change style sheets(CSS)

Question

I have some code that works and changes the style sheet using a form. That work as long as you keep the browser window open. You can got to a different site come back and the style will be the one you selected, thats fine but if u close the browser and come back it will be set to the default. Is this due to the fact that I am starting a new session each time or is due to the fact I have not set how long the cookie is valid? Thats question one.

Question 2 is that I have the drop down menu that currenty works and chooses the correct style sheet but I also have some radio buttons for text size. I want these to be incorperated but they will work using a different style sheets that simply have just the text sizes in so the default text size is standard and the user can change them along with the style sheet but they work indepdantly. Could anyone suggest some coding thanks.

Below is what I am currently working with. Cheers

Php setting the style:

  if (isset($_COOKIE["selectedStyle"])) // has the cookie already been set
  {
    $style=$_COOKIE["selectedStyle"];
  }else{
$style = spring;
}

  if (isset($_POST["changeStyle"]))  // changing the style
  {
    $style=$_POST["changeStyle"];
  }

  setcookie("selectedStyle",$style); // update or create the cookie
 ?>

Form with drop down that works and radio buttons for the text changer:

<div id="headerInfo">
<p><strong>User Controls</strong></p>
  <form method="post" action="<?= $_SERVER["PHP_SELF"];?>">
Select Page Style:<br/>
<select name="changeStyle">
<option value="spring">Spring (Green)</option>
<option value="summer">Summer (Yellow)</option>
<option value="winter">Winter (Blue)</option>
<option value="autumn">Autumn (Orange)</option>
</select>
<input type="submit" name="submitstyle" value="Set Style">
  </form>
    <form method="post" action="<?= $_SERVER["PHP_SELF"];?>">
Select Font Size:<br/>
<span class="smallText">A</span><input type="radio" name="changeFontSize" value="small"/>
<span class="standardText">A</span><input type="radio" name="changeFontSize" value="standard"/>
<span class="largeText">A</span><input type="radio" name="changeFontSize" value="large"/>
<span class="xLargeText">A</span><input type="radio" name="changeFontSize" value="extraLarge"/>
</select>
<input type="submit" name="submitfont" value="Set Size">
</div>

Answer 1

setcookie has an expire parameter, which you can use to set desired expiration date. docs have an example on how to do this.

just create another cookie with font size information and invoke relevant stylesheet. radio button need to be inside the form tag to be send as a part of http request.

Answer 2

When it comes to the font resizing I would personally say, you are better off changing the size on the client side, with jQuery for example . I think generally if someone requires a larger font size on every page (for accessibility) they would have the font size increased in the browser.

Although you could also do an AJAX call to set a cookie / save a record in the DB if you wanted to change stylesheet elements / set a higher font size permanently.

Answer 3

You'd be better off using $_SESSION to persist the style across pages. That way it works even if the user has cookies turned off, because it'll rewrite URLs with the session ID for you.