| Convert 5 CSS files into one Hello,
I need help converting this 5 CSS pages into one. this code changes the background depending on which day of the week it is. The code working but I need the html page to read from one .css file...
Html page:
[html]
[head]
[script]
var theme=""
function changeTheme()
{
var dt=new Date()
var day=dt.getDay()
if(day==0)
{
alert("here");
theme="theme1.css"
}
[!-- Sunday --]
if(day==1)
{
theme="theme2.css"
}
[!-- Monday --]
if(day==2)
{
theme="theme3.css"
}
[!-- Tuesday --]
if(day==3)
{
theme="theme2.css"
}
[!-- Wedsday --]
if(day==4)
{
theme="theme5.css"
}
[!-- Thursday --]
if(day==5)
{
theme="theme6.css"
}
[!-- Friday --]
if(day==6)
{
theme="theme7.css"
}
[!-- Saturday --]
if(day==7)
{
theme="theme8.css"
}
CSS Pages
theme1.css
body
{
background-image:
url("C:\Users\Test\Desktop\css\1.jpg");
background-repeat:no-repeat;
}
theme2.css
body
{
background-image:
url("C:\Users\Test\Desktop\css\2.jpg");
background-repeat:no-repeat;
}
theme3.css
body
{
background-image:
url("C:\Users\Test\Desktop\css\3.jpg");
background-repeat:no-repeat;
}
theme4.css
body
{
background-image:
url("C:\Users\Test\Desktop\css\4.jpg");
background-repeat:no-repeat;
}
theme5.css
body
{
background-image:
url("C:\Users\Test\Desktop\css\5.jpg");
background-repeat:no-repeat;
}
theme6.css
body
{
background-image:
url("C:\Users\Test\Desktop\css\6.jpg");
background-repeat:no-repeat;
}
theme7.css
body
{
background-image:
url("C:\Users\Test\Desktop\css\t.jpg");
background-repeat:no-repeat;
} |
|
 stray
join:2000-01-16
Warren, NJ | <?php
define('CSSPATH', 'template/css/'); //define css path
$cssItem = array(
1 => "theme1.css",
2 => "theme2.css",
3 => "theme3.css",
4 => "theme4.css",
5 => "theme5.css",
6 => "theme6.css",
7 => "theme7.css",
);
?>
<html>
<head>
....
....
<?php $themeOfTheDay = $cssItem[date('N')]; ?>
<link rel="stylesheet" href="<?php echo (CSSPATH . "$themeOfTheDay"); ?>" type="text/css">
</head>
<body>
...
...
</body>
</html>
Of course my weeks have 7 days. Are you shutting down your server on Sat. and Sun.?
--
V-Rtifacts - When Virtual Reality Was More Than Virtual |
|
| No I'm not. The server will be up 24/7 365 |
|
| reply to stray
Now I have to see if I can use this on PHP on their site. If not tanks any ways for the help.... |
|
| reply to StealthRider
Well I can't use php only HTML, CSS. Javascript.
Thanks |
|
 cdruGo ColtsPremium,MVM
join:2003-05-14
Fort Wayne, IN
kudos:7 | reply to StealthRider
Combine the css files into a single css file that's always included. For each theme/day, change the selector from just "body" to "body.monday", "body.tuesday", etc. Use javascript to dynamically set the class on <body> based on whatever criteria you want.
If your css files are more complicated then that, you can just expand out your selectors by having them start with body.monday. (e.g. body.monday div, body.monday a.someclass, etc). |
|
| Thanks for the reply. I understand how this works just a little. If it not to much of a problem can you show me how this is done. |
|
cdruGo ColtsPremium,MVM
join:2003-05-14
Fort Wayne, IN
kudos:7 | Example
You'll need to adjust the styles as appropriate. Also, your example has paths relative to your c:. You'll need to change those for web paths. You can also just combine your rules into a single rule:
body{background: url('/your/path/file.jpg') no-repeat;}
|
|
| Well I'm still not getting this. There is 7 different images which will change daily.
Can you like take the html code and the .css code and show me and I can following and do the rest. I have tried to set the class a number of ways. I understand I have to put the correct URL path. In the example it set up for 2 days and if you can show me how to do this, I can following and do the rest.
HTML:
[html]
[head]
[script]
var theme=""
function changeTheme()
{
var dt=new Date()
var day=dt.getDay()
if(day==0)
{
alert("here");
theme="theme1.css"
}
[!-- Sunday --]
if(day==1)
{
theme="theme1.css"
}
[!-- Monday --]
if(day==2)
{
theme="theme3.css"
}
document.getElementById("link1").href=theme
}
[/script]
[link id="link1" href="" rel="stylesheet" type="text/css"]
[/head]
[BODY onload="changeTheme()"]
[/body]
[/html]
CSS:
theme1.css
body
{
background-image:
url("C:\Users\Azero\Desktop\css\1.jpg");
background-repeat:no-repeat;
}
body
{
background-image:
url("C:\Users\Azero\Desktop\css\2.jpg");
background-repeat:no-repeat;
} |
|
Reviews:
 ·justhost
2 edits | Here is my version that will change the theme based on the day just change the CSS code to what you want for each day. I built it in to the HTML code you can export it to a single file and ref it in the HTML.
Remove the br / day name if you like I did that for an example.
Also since you don't have PHP support and you have to do this with Javascript it will change the theme based on the users date. So to test each day you just change your own clock on your computer and refresh or re-open the page.
<!DOCTYPE HTML>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="Anthony Aldridge" />
<title>Theme Changer</title>
<style type="text/css">
#monday {
background-image:url( "./img/1.jpg ");
background-repeat:no-repeat;
}
#tuesday {
background-image:url( "./img/2.jpg ");
background-repeat:no-repeat;
}
#wednesday {
background-image:url( "./img/3.jpg ");
background-repeat:no-repeat;
}
#thursday {
background-image:url( "./img/4.jpg ");
background-repeat:no-repeat;
}
#friday {
background-image:url( "./img/5.jpg ");
background-repeat:no-repeat;
}
#saturday {
background-image:url( "./img/6.jpg ");
background-repeat:no-repeat;
}
#sunday {
background-image:url( "./img/7.jpg ");
background-repeat:no-repeat;
}
</style>
</head>
<script type="text/javascript">
var d = new Date();
var n = d.getDay();
var psj=0;
//Monday
if (n == '1'){
document.write('<body id="monday"><br />Monday')
}
//Tuesday
if (n == '2'){
document.write('<body id="tuesday"><br />Tuesday')
}
//Wednesday
if (n == '3'){
document.write('<body id="wednesday"><br />Wednesday')
}
//Thursday
if (n == '4'){
document.write('<body id="thursday">')
}
//Friday
if (n == '5'){
document.write('<body id="friday"><br />Friday')
}
//Saturday
if (n == '6'){
document.write('<body id="saturday"><br />Saturday')
}
//Sunday
if (n == '0'){
document.write('<body id="sunday"><br />Sunday')
}
</script>
</body>
</html>
|
|
| Thanks for the reply. I must have did something wrong. This what I did.
1. Created a folder called test.
2. Inside that folder i created a folder called img
3. I copied the code you provided and name it test.html
4. I place my 7 backgrounds in the folder img and name them 1.jpg - 7.jpg
when I launched test.html no background appeared.
|
|
|
|
Reviews:
·justhost
| Try to remove the quotes from the background-image tag on Wednesday CSS and see if that helps.
Here is my working example you can view the source on it: »serverstrategies.com/dayrun.html
#wednesday {
background-image:url(img/3.jpg);
background-repeat:no-repeat;
}
|
|
| It worked. I just copied your code. My last question for now is that. I have 7 backgrounds designed and I would like to make sure they appear 100% of the screen or shall I say fit 100% of the screen size no matter what screen it is. |
|
cdruGo ColtsPremium,MVM
join:2003-05-14
Fort Wayne, IN
kudos:7 | reply to Screavics
said by Screavics:Here is my version that will change the theme based on the day just change the CSS code to what you want for each day. I built it in to the HTML code you can export it to a single file and ref it in the HTML. You're is far more complex then it needs to be, plus writing out the document.write with the body tag is a really bad practice. The whole page fails if javascript isn't enabled.
Here's a revised example: »jsfiddle.net/MB7sX/2/
<!DOCTYPE html>
<html>
<head>
<title>test page</title>
<script type="text/javascript">
window.onload = function () {
"use strict";
document.body.className = "day" + (new Date()).getDay();
//if you want to test this with different days of the week, uncomment
//the line below and change the digit 0-6 (Sunday = 0)
//document.body.className = "day0";
};
</script>
<style type="text/css">
body{background-repeat:no-repeat; }
body.day0{background-image: url('http://www.lfvh.com/cn/images/background1.jpg'); }
body.day1{background-image: url('http://www.lfvh.com/cn/images/background2.jpg'); }
body.day2{background-image: url('http://www.lfvh.com/cn/images/background3.jpg'); }
body.day3{background-image: url('http://www.lfvh.com/cn/images/background4.jpg'); }
body.day4{background-image: url('http://www.lfvh.com/cn/images/background5.jpg'); }
body.day5{background-image: url('http://www.lfvh.com/cn/images/background5.jpg'); }
body.day6{background-image: url('http://www.lfvh.com/cn/images/background5.jpg'); }
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec magna sed dolor semper viverra. Nam vestibulum neque et elit posuere sit amet suscipit felis sollicitudin.</p>
</body>
</html>
Uncomment the last javascript line to test various days, changing day0 (Sunday) to day1 (Monday) through day6 (Saturday). Delete those lines if you're done testing. |
|
| cdru is correct I forget that a lot of people disable java script now and some browsers do by default.
I'm used to coding in an environment where group policy enabled java script on intranet sites by default. |
|
| reply to cdru
Thanks to the both of you. Well all I need now is to be able to code this so that my background will be 100% to the screen size no matter what screen size it is. |
|
| reply to cdru
When you get a chance I would like to get some help with the background and setting it to 100%. Seems that if you use fixed height 100% width 100% the background will repeat.
I guess what I'm looking for is to have it fit the screen only one image. I understand if it a small image it will stretch to fill up the screen.
I hope I explained this so that you can understand.
example I found but couldn't get it to work with your code:
'»www.onsitus.it/css-tutorials/sfo···percent/'
Thanks |
|
Reviews:
·justhost
1 edit | Using cdru's method you can still keep your per day styling just going to have to remove the background-image tag from the day selection system because anything younger than CSS3 really cannot easily stretch images as a background-image. You end up having to stretch an image itself. CSS3 isn't fully supported by most browsers now so we just revert to another CSS image trick.
To keep this simple just rename your images to this:
Sunday -> img0.jpg
Monday -> img1.jpg
Tuesday -> img2.jpg
Wednesday -> img3.jpg
Thursday -> img4.jpg
Friday -> img5.jpg
Saturday -> img6.jpg
<!DOCTYPE html>
<html>
<head>
<title>test page</title>
<script type="text/javascript">
window.onload = function () {
"use strict";
document.body.className = "day" + (new Date()).getDay();
//if you want to test this with different days of the week, uncomment
//the line below and change the digit 0-6 (Sunday = 0)
//document.body.className = "day0";
};
</script>
<style type="text/css">
body{
background-repeat:no-repeat;
}
body.day0{
/*Put day specific styling for Sunday */
}
body.day1{
/*Put day specific styling for Monday */
}
body.day2{
/*Put day specific styling for Tuesday */
}
body.day3{
/*Put day specific styling for Wednesday */
}
body.day4{
/*Put day specific styling for Thursday */
}
body.day5{
/*Put day specific styling for Friday */
}
body.day6{
/*Put day specific styling for Saturday */
}
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
#image {
width:100%;
height:100%;
}
#content{
position: relative;
z-index: 1;
}
</style>
</head>
<body>
<div id="background">
<img id="image" />
<script type="text/javascript">
document.getElementById('image').src = "img/img"+(new Date()).getDay()+".jpg";
</script>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec magna sed dolor semper viverra. Nam vestibulum neque et elit posuere sit amet suscipit felis sollicitudin.</p>
</div>
</body>
</html>
FYI: I could minify the CSS code but choose not to so you can understand the code easier. A good code minifier is here »www.minifycss.com/css-compressor/ it helps save bandwidth and is really good for those of us on slower connections like dialup etc. It's all dependent really on who you want to reach out and touch with your website.
Oh and here is my working example of what this is: »serverstrategies.com/dayrun3.html |
|
| WOW thats what I was looking for. Well sorry I should have mention this first.
I might not be able to host my images where the html code is. What if:
how does this change your code...
My site where the html code is here:
dummy.com
My images are here:
reallydumb.com
reallydumb.com/img/1.jpg
reallydumb.com/img/2.jpg
reallydumb.com/img/3.jpg
reallydumb.com/img/4.jpg
reallydumb.com/img/5.jpg
reallydumb.com/img/6.jpg
reallydumb.com/img/7.jpg |
|
| I think I got it. This is what I changed:
document.getElementById('image').src ="http://reallydumb.com/img/"+(new Date()).getDay()+".jpg"; |
|
