okay so my initial controller has this in to set the screen up
if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class User extends MX_Controller{
public function __construct()
{
parent::__construct();
$this->load->model('user_model');
}
public function index()
{
if(($this->session->userdata('user_name')!=""))
{
$this->welcome(); // Initial screen for logged in users
}
else{
$data['title']= 'Home'; // basic screen with login and signup facility
$this->load->view('header_only',$data);
$this->load->view("registration_view", $data);
}
}
public function welcome() // init screen
{
$data['title']= 'Welcome';
$this->load->view('win8-header',$data);
$this->load->view('win8',$data);
The header is just this at the moment
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”/>
<title><?php echo (isset($title)) ? $title : “My CI Site” ?> </title>
<meta name=“keywords” content=”” />
<meta name=“description” content=”” />
<link rel=“stylesheet” type=“text/css” href=”<?php echo base_url();?>[my css file]” />
<link rel=“stylesheet” type=“text/css” href=”<?php echo base_url();?>[jquery ui css file]”/>
[removed][removed]
[removed][removed]
</head>
<body>
<div id=“wrapper”>
<div id=“header”>
<div align=“center”>Logged in as <?php echo $this->session->userdata(‘user_name’); ?> <?php echo anchor(‘user/logout’, ‘Logout’); ?></div>
</div><!—#header—>
The css file that it loads apart from the jquery ui one contains this.
.frontPageUL {
list-style: none;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
.frontPageColumn {
padding: 0 0 0 0;
margin: 0 0 0 0;
width: 250px;
height: 120px;
}
.pageCenter {
position: fixed;
top: 50%;
left: 50%;
margin-top: -183px;
margin-left: -375px;
}
.fullBox {
width: 242px;
height: 114px;
margin: 0 8px 6px 0;
}
.halfBox {
width: 117px;
height: 114px;
margin: 0 8px 6px 0;
}
.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
And my first view file contains this. (body background styling is currently commented out)
<style>
.date {
float:left;
display:block;
font-size:18px;
text-align:center;
line-height:75px;
color: black;
width:80px;
height:80px
}
.date.month-01 { background: url(<?echo(base_url());?>[calendar day image]) no-repeat 0 0 }
....entries for other months
body {
color: white;
background: #b4ddb4; /* Old browsers */
/*background: -moz-linear-gradient(top, #b4ddb4 0%, #83c783 17%, #52b152 33%, #008a00 67%, #005700 83%, #002400 100%); /* FF3.6+ */
/*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4ddb4), color-stop(17%,#83c783), color-stop(33%,#52b152), color-stop(67%,#008a00), color-stop(83%,#005700), color-stop(100%,#002400)); /* Chrome,Safari4+ */
/*background: -webkit-linear-gradient(top, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); /* Chrome10+,Safari5.1+ */
/*background: -o-linear-gradient(top, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); /* Opera 11.10+ */
/*background: -ms-linear-gradient(top, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); /* IE10+ */
/*background: linear-gradient(top, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); /* W3C */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400',GradientType=0 ); /* IE6-9 */
}</style>
At the moment I am just using a flat colour, I have tried using a very basic top to bottom gradient also and got the same effect.
Any suggestions are most welcome.
(Sorry I had to butcher some links so that expression engine would accept it and I only had a few minutes to do it)