title: PHP: Allow User Change Background Colour Not Working?
body: <p>I am trying to create a simple cms, with the ability to allow users to change the body background colour when a img is clicked, however I am unable to get the background colour to change? I am using php and GET variables to pass colour id info and sessions to save user input. I keep getting this error: "Warning: session_start(): Cannot send session cookie - headers already sent by (output started at /Applications/MAMP/htdocs/CMS/index.php:1) in /Applications/MAMP/htdocs/CMS/header.php on line 2" yet nothing is sent before session start? And how can I make my css body background colour change depending on which image is clicked? Can someone please shed some wisdom?</p>
  
  <p>thanks in advance</p>
  
  <p>The code:</p>
  
  <pre><code>&lt;?php
  session_start();
  
  if(isset($_GET['colour'])) {
  $colour = $_GET['colour'];
  $_SESSION['colour'] = $colour;
  }
  
  $colour_session = $_SESSION['colour'];
  echo "bgcolour = $colour_session";
  
  ?&gt;
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
    &lt;title&gt;CMS&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;link type='text/css' rel='stylesheet' href='css/bootstrap.min.css'/&gt;
    &lt;link type='text/css' rel='stylesheet' href='css/main.css'/&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, user-    scalable=no"&gt;
   &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
   &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
   &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
    &lt;div class="container-fluid"&gt;
    &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
     &lt;div class="navbar-header"&gt;
      &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"&gt;
      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;a class="navbar-brand" href="index.php"&gt;&lt;span class="glyphicon glyphicon-home"&gt;&lt;/span&gt; CMS&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
  &lt;div class="collapse navbar-collapse" id="navbar-collapse"&gt;
      &lt;ul class="nav navbar-nav navbar-right"&gt;
      &lt;li class="dropdown"&gt;
        &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Login &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;ul class="dropdown-menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt; User&lt;/a&gt;&lt;/li&gt;
          &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/CMS/admin/list.php"&gt;&lt;i class="fa fa-user-plus"&gt;&lt;/i&gt; Admin &lt;/a&gt;&lt;/li&gt;
  
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
  &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
  &lt;/nav&gt;
  
  
  
  &lt;div class="conatiner-fluid"&gt;
   &lt;div class="col-md-12"&gt;
    &lt;div class="col-md-4 col-md-offset-4 text-center bgColour"&gt;
     &lt;p&gt;Choose Background Colour:&lt;/p&gt;
     &lt;a href="?colour=grey"&gt;&lt;img src="images/grey.jpg"&gt;&lt;/a&gt;
     &lt;a href="?colour=white"&gt;&lt;img src="images/white.jpg"&gt;&lt;/a&gt;
     &lt;a href="?colour=pink"&gt;&lt;img src="images/pink.jpg"&gt;&lt;/a&gt;
     &lt;a href="?colour=blue"&gt;&lt;img src="images/blue.jpg"&gt;&lt;/a&gt;
     &lt;a href="?colour=purple"&gt;&lt;img src="images/purple.jpg"&gt;&lt;/a&gt;
     &lt;a href="?colour=green"&gt;&lt;img src="images/green.jpg"&gt;&lt;/a&gt;
     &lt;a href="?colour=yellow"&gt;&lt;img src="images/yellow.jpg"&gt;&lt;/a&gt;
     &lt;a href="?colour=orange"&gt;&lt;img src="images/orange.jpg"&gt;&lt;/a&gt;
     &lt;a href="?colour=red"&gt;&lt;img src="images/red.jpg"&gt;&lt;/a&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>**body and html tags are closed by 'require 'footer.php'</p>