Nivuahc Image Replacement Demonstration (N.I.R.D. 1) is ready

Nivuahc · **Posted:** Fri Sep 23, 2005 5:29 am

Starring.... ME! :laugh:

Based on the "Rocky Mountain Sunrise" template by Randy Carver, and with the help of Jon Palmer, I've finally gotten the template idea I had into action.

This is what it does...

Depending on the day of the week, the background image will change to reflect a new Nivuahc! Think of the joy and harmony you will feel with a new Nivuahc to greet you and your sites visitors! Everyone wants their own Nivuahc!

Okay, seriously, I was strapped for ideas/time/artistic ability $:-\$

Anyways... the overall background color also changes based on the day of the week.

I'm hoping that this will give people ideas for similar semi-dynamic templates as well and I'd love to take the credit for it, but the real work really belongs to Randy and Jon.

(and I felt so bad wiping out all that work Randy did on those rounded corners :'(

)

Okay, okay... the template can be downloaded from my website and I've also posted an article where you can see some screen caps of what each day looks like (Sunday is my favorite

)

I'm also attaching the template thumbnail here.

bostanio · **Posted:** Fri Sep 23, 2005 7:24 am

Nice site, looks great. Maybe it would be nice to be able to fake the date so that we can see all the graphics, or maybe you just want us to wait and come back each day

Nivuahc · **Posted:** Fri Sep 23, 2005 11:39 am

Well, I did put thumbnails and screen caps of each day in the article :-[

Thanks again, Jon

EDIT: Maybe I should have mentioned that you'll see those thumbnails when you click the "Read more..." link :-[

EDIT2: Jon, I keep throwing that 'h' into your name... habit I guess $:-\$

rcarver · **Joined:** Thu Aug 18, 2005 10:24 pm **Posts:** 203

Hehehehe.... Thanks for the kudo's, but I suspect you're going a little light on yourself. Looks great!

As far as the rounded corners, I'm not sure how I feel about them myself, it was more of an expirement than anything else, and I REALLY like how your template looks with the square borders.

How did you end up dynamicizing it? (is that a word?)

Did you go for a different stylesheet for each day or did you switch parts of the styling at load time?

BTW - Both of you might be interested in this:
http://www.shauninman.com/plete/2005/08/css-constants

Its kind of a css pre-processer that allows you to put variable/contstants (depending on your point of view

) into CSS files. Haven't played around with it yet, but it looks fun....

Anyhoo, great job, I really like the color schemes you came up with, and don't minimize your artistic ability, I think what you've done is great. way cool

Nivuahc · **Posted:** Fri Sep 23, 2005 3:31 pm

Based on Jon's excellent code:

in the index.php

Code:

in the template_css.css

Code:

body.body_Monday {
    background: url(../images/monday.png) top left no-repeat;
    background-color : red;
}

body.body_Tuesday {
    background: url(../images/tuesday.png) top left no-repeat;
    background-color : blue;
}

etc...

as an example (thanks again Jon!)

Of course I also changed the background color of .xboxcontent and removed the background styles from the main body tag.

I had intended on leaving the rounded corners intact, but it just didn't look right without the transparent/background image the way you have it. And the rounded corners look great as far as I'm concerned, I just imagine you must have put a lot of work into that! I really did have a hard time deciding to get rid of them.

The thing is, I just used that bit of PHP to make changes based on the day of the week. And I only made changes to the image and the background color of the body. Think about this, the same type of functionality could be put into your template to change your site to a holiday theme based on the month, or a different scheme based on the time of day (although I think that would be a bit more difficult). And it isn't just the background image and color that can be changed, any element that you like could be changed. Change the font style, change the font color, change a header based on some other variable.

I've seen someone ask about changing images for different sections of the site... I don't know how to do it, but I know it must be possible. This is an example of one simple thing, but the possibilities are much greater if you think about it.

For instance, in the next version, I'll be changing different style elements of individual table cells... or, at least that's what I'm working on

And, seriously Randy/Jon, thanks to both of you. You've no idea how much I've learned from all of this.

bostanio · **Posted:** Fri Sep 23, 2005 4:05 pm

Hey hadn't realized that the thumbnails were also links to bigger versions of the pictures.

I was thinking that you could put in a bit of extra code that might help you debug things and if you let us know we would be able to see all your graphics in their full glory (or put links on you site to the other graphics)

You'd do something like this:

instead of

Code:

you have

Code:

<?php
$ourdate = getdate();         
$day = $ourdate['weekday'];
if ( $_REQUEST['day']  ) {  
      $day = $_REQUEST['day']; 
}
?>
<body class="body_<?php  echo $day; ?>">

Then if you where to point your browser at:

http://mysite.com/index.php?day=Monday

you would be able to spoof Monday's graphics.

P.S. The above code doesn't bother to check that you have entered something sensible as the day in the URL but for debug/preview that probably doesn't matter.

P.P.S. I haven't tested the above code but i 98% sure it's right.

Nivuahc · **Posted:** Fri Sep 23, 2005 4:14 pm

THAT's the kind of stuff I'm talkin' about!!!!

Thanks again Jon!

beta 2 will be available shortly

Nivuahc · **Posted:** Fri Sep 23, 2005 4:41 pm

Jon, it works perfectly, as you can see by checking the site now.

I'll be updating the template to reflect that change, and it just sparked off a bunch of new ideas for me.

Thanks a million!

chette · **Posted:** Sat Sep 24, 2005 4:12 am

Nice site, Nivuahc! Very cute

Nivuahc · **Posted:** Sat Sep 24, 2005 12:21 pm

Why thank you chette.

I take that as a huge compliment from you. And I should also send you a big Thank You for your help and encouragement when I first decided to get into template hacking.

so Thank You

chette · **Posted:** Sat Sep 24, 2005 2:28 pm

Nivuahc wrote:

I take that as a huge compliment from you. And I should also send you a big Thank You for your help and encouragement when I first decided to get into template hacking.

I'm very touched, flattered, surprised, and glad of this honor

gsbe · **Posted:** Sat Sep 24, 2005 4:40 pm

You might also be interested in the Case Study of JeffCoffin.com which explains in detail how the site randomly chooses to deliver a unique template (not just the background image) on each reload.

Nivuahc · **Posted:** Sat Sep 24, 2005 5:04 pm

gsbe wrote:

You might also be interested in the Case Study of JeffCoffin.com which explains in detail how the site randomly chooses to deliver a unique template (not just the background image) on each reload.

That is awesome! I'm definately bookmarking that for future reference

bostanio wrote:

P.S. The above code doesn't bother to check that you have entered something sensible as the day in the URL but for debug/preview that probably doesn't matter.

Regarding that, Jon, I tried it out just now and it does something I hadn't considered as being a benefit until now. It removes the changing style elements completely, leaving everything but the changed elements visible. That should be a help when laying out a template using this technique, I would think.

For example, using

http://www.nivuahc.com/index.php?day=Monday

shows how the site would look on Monday. Using the following

http://www.nivuahc.com/index.php?day=none
http://www.nivuahc.com/index.php?day=nil
http://www.nivuahc.com/index.php?day=jibberjabber
http://www.nivuahc.com/index.php?day=whoopsie

or any other non-valid name shows the site without the background image or colors.

I like that.

A lot.

Thanks again!

Nivuahc · **Posted:** Sun Sep 25, 2005 3:19 pm

Remember how I said I was learning a lot already with this experiment?

Well gsbe got me thinking and I believe I might be on the right track... I'm about to test it out myself, so I'll let you know how it goes.

Since this particular template is all (well, mostly) CSS, if I wanted to have a random template, not just the background image and color, I believe this should work:

in my index.php

Code:

<?php $tn = rand(1,4);
if ( $_REQUEST['tn']  ) {  
      $tn = $_REQUEST['tn']; 
}
?>


<style type="text/css">
  @import url(<?php echo $mosConfig_live_site;?>/templates/<?php echo $cur_template; ?>/css/template<?php echo $tn; ?>_css.css);
</style>

Then, in my templates css folder I would have

template1_css.css
template2_css.css
template3_css.css
template4_css.css

and one of those should be chosen by random on each site load. And, if I wanted to test one in particular, I should be able to do so by pointing my browser to either of these:

http://www.mysite.com/index.php?tn=1
http://www.mysite.com/index.php?tn=2
http://www.mysite.com/index.php?tn=3
http://www.mysite.com/index.php?tn=4

Does that look about right?

I'm gonna start hacking away at some things and see what happens... and I haven't even had my first cup of coffee yet! :laugh:

Nivuahc · **Posted:** Sun Sep 25, 2005 3:49 pm

IT WORKS!!

schweeeeeet

Nivuahc · **Posted:** Sun Sep 25, 2005 4:22 pm

Let me rephrase....

IT WORKS (sorta)

While it does, in fact, work... something else it does is change the template, by random, whenever you click a link on the page. Each time you visit another area of the site, the template may or may not change. That's no good :-[

Back to the drawing board...

EDIT: Now that I think about it, maybe it wouldn't be such a bad idea if the templates were identical except for the background image and the look-n-feel of the text, etc... which would blend better with the image... meh $:-\$

Nivuahc · **Posted:** Mon Sep 26, 2005 5:16 am

I've updated the template on my site to reflect these recent changes:

Added a "Day Switcher" pulldown menu to the template
Added the current date display
Fixed the colors for linked article titles
Moved the footer into the content area
A few odds-n-ends here-n-there

I've also put together a begninning tutorial on "dynamicising" your templates and I've made it available as a PDF.

bostanio · **Posted:** Tue Sep 27, 2005 12:30 pm

Nivuahc, hey like the changes to the site the drop down day changer is cool

shame it reverts back to the current day each time you change the day. Have you though of using some Javascript and a cookie to make the choice persistent for each session?

Nivuahc · **Posted:** Tue Sep 27, 2005 4:23 pm

bostanio wrote:

Nivuahc, hey like the changes to the site the drop down day changer is cool

shame it reverts back to the current day each time you change the day. Have you though of using some Javascript and a cookie to make the choice persistent for each session?

Actually, I've been trying to figure that very thing out. I'm new to all of this and I know less about javascript than I know about PHP

Is that what it would take? Javascript?

And if it keeps the choice persistent, couldn't the same technique be used for the 'random template' bit I posted above?

i.e. A user visits the site, it picks a random number, sets the appropriate template, until they leave the site that random number stays persistent.

bostanio · **Posted:** Tue Sep 27, 2005 4:51 pm

Yup I think it takes javascript to set cookies because the code has to be executed once it has been loaded by the user (as opposed to pHP which is pre processed by the server). You can get an idea of how it works by looking at the md_stylechanger.js that is used to change the font sizes on these Joomla pages.

http://forum.joomla.org/Themes/joomla/md_stylechanger.js

The cookie part in particular is:

Code:

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
};

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
};

window.onload = setUserOptions;

function setUserOptions(){
   if(!prefsLoaded){

      cookie = readCookie("fontSize");
      currentFontSize = cookie ? cookie : defaultFontSize;
      setFontSize(currentFontSize);
      
      prefsLoaded = true;
   }

}

window.onunload = saveSettings;

function saveSettings()
{
  createCookie("fontSize", currentFontSize, 365);
}

not so hard. You'd just have to write a setBackgroundImage function to replace the setFontSize function.

bostanio · **Posted:** Tue Sep 27, 2005 6:10 pm

Hey I was also thinking that you could add another tweak to the background selector so that the current selected background day is displayed in the drop down menu by default. I was interested to see how it could be done so just wrote the code.

Assuming you detect the date as before

Code:

<?php
$ourdate = getdate();         
$day = $ourdate['weekday'];
if ( $_REQUEST['day']  ) {  
      $day = $_REQUEST['day']; 
}
?>

You'd use something like this to create the drop down menu

Code:

<div align="center">Change the look of this site<br />
      <form name="jump">

<?php

$options = "";
$url = "/index.php?day=";
$dayarray = array(
      "Monday" => $url . "Monday",
      "Tuesday" => $url . "Tuesday",
      "Wednesday" => $url . "Wednesday",
      "Thursday" => $url . "Thursday",
      "Friday" => $url . "Friday",
      "Saturday" => $url . "Saturday",
      "Sunday" => $url . "Sunday",
      "None" => $url . "none",
      "Today" => ""
      );

foreach (array_keys($dayarray) as $daykey) {
   $options .= "<option value=\"" . $mosConfig_live_site . $dayarray[$daykey] . "\"";
   if ($daykey == $day) { 
      $options .= " selected=\"selected\"";
   }

   $options .=  ">" . $daykey . "</option>\n";
}

echo $options;
?>
   </select>
      <input class="button" type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" 

value="Apply">
      </form></div>

Just an idea.

Nivuahc · **Posted:** Tue Sep 27, 2005 11:26 pm

Thanks Jon!

That's mucho better than the code I have now.

I'm gonna play with the cookie bit and see what I can make it do.

I'll let you know how it all turns out!

Have I mentioned already how much I appreciate all of your help?

Nivuahc · **Posted:** Wed Sep 28, 2005 12:16 am

Okay Jon, I tried it out and this is what happens... this is the code I previously had in place:

Code:

     <div align="center">Change the look of this site<br />
      <form name="jump">
      <select name="menu">
      <option value="<?php echo $mosConfig_live_site;?>/index.php?day=Monday">Monday</option>
      <option value="<?php echo $mosConfig_live_site;?>/index.php?day=Tuesday">Tuesday</option>
      <option value="<?php echo $mosConfig_live_site;?>/index.php?day=Wednesday">Wednesday</option>
      <option value="<?php echo $mosConfig_live_site;?>/index.php?day=Thursday">Thursday</option>
      <option value="<?php echo $mosConfig_live_site;?>/index.php?day=Friday">Friday</option>
      <option value="<?php echo $mosConfig_live_site;?>/index.php?day=Saturday">Saturday</option>
      <option value="<?php echo $mosConfig_live_site;?>/index.php?day=Sunday">Sunday</option>
      <option value="<?php echo $mosConfig_live_site;?>/index.php?day=none">None</option>
      <option value="<?php echo $mosConfig_live_site;?>/index.php">Today</option>
      </select>
      <input class="button" type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="Apply">
      </form></div>

I've attached a thumbnail of what that looks like below

Using the code above, I get completely different results, and I've attached a thumbnail of that as well.

I'd really like to understand all of this better, and I think I do.. the bit about

Code:

$options .= " selected=\"selected\"";

is confusing me a bit.

bostanio · **Posted:** Wed Sep 28, 2005 1:42 am

sorry there is a copy and paste error in there. There is a HTML "

Joomla! Discussion Forums

Forum rules

Nivuahc Image Replacement Demonstration (N.I.R.D. 1) is ready

Quick reply

Who is online