Bootstrap [responsive, mobile-ready]

[Kyttias]

Both of these tasks can be done with a bit of Javascript. ^w^~

html - This goes just after the list of links ends, but before the end of the navbar.

   <span class="navbar-right timeboth"></span>

javascript/jquery - This can be included near the bottom, just before the end of the body INSIDE <script> </script> tags.

 var now = new Date();
var hrs = now.getHours();
var img = "";
var a_p = "";

if (hrs < 12) { a_p = "AM"; }
else { a_p = "PM"; }
if (hrs === 0) { hrs = 12; }
if (hrs > 12) { hrs = hrs - 12; }

var min = now.getMinutes();
if (min < 10) { var min = "0"+min; }
var time = hrs + ":" + min + " " + a_p +" ";

if (hrs >  0) img = "http://static.jsbin.com/images/jsbin_16.png"; // After midnight
if (hrs >  6) img = "http://static.jsbin.com/images/jsbin_16.png"; // After 6am
if (hrs > 12) img = "http://static.jsbin.com/images/jsbin_16.png"; // After noon
if (hrs > 17) img = "http://static.jsbin.com/images/jsbin_16.png"; // After 5pm
if (hrs > 22) img = "http://static.jsbin.com/images/jsbin_16.png"; // After 10pm

// If you want to use the time + a small image, use a class of "timeboth":
$(".timeboth").html(time+"<img src="+img+">").css({"color": "#fff", "padding": "15px 0 15px 0"});

// Any element with a class of "time" will be filled with the time:
$(".time").html(time);

// Any element with a class of "timeimg" will get its image:
$(".timeimg").html("<img src="+img+">");

I think you can get the jist of what's going on if you stare at it enough. ovo/ Right now it's got the same image displaying for everything, of course, but you can see where to change it from the examples above (as you can probably guess, the basis is military time, yet I've hacked the date to read as AM/PM).

A css fix has been added to the class of "timeboth" with a bit of jQuery to align it with the links of the Bootstrap header, but this fix has not been applied to "time" and "timeimg" in case you want to use those elsewhere. Feel free to copy that fix to the other two, imitate the format, or make css amends in an actual stylesheet. (I wasn't sure whether you wanted to use these separately or not. For all I know, you may want to change your entire header to a sunrise/sun/sunset/moon based on the time of day!)

Check out this jsbin I've made for a working example.

Keep in mind that this code is a mix of both Javascript and jQuery (for convenience). The Bootstrap theme comes bundled with jQuery already, anyone who doesn't have it will have to include a link to prior to inserting a script that requires it.

To anyone staring at this and going "wow that's neat" - yes, getMonth(); and getDate(); exist as well (and for full homework, see how the entire Date(); object in Javascript is constructed).

On a final note, the data received is only as current as the page load. So it will display information based on the time the page was loaded, and pulls it's time directly from the user's computer, and not the server. It will be up to the script creators to make something accurate to server time that a user cannot change simply by messing their computer clock. It's good for visual effects, but I wouldn't rely on it to do much more than that. And unlike server side code, anyone can view the source of the page and view its Javascript - so if you're hiding promo codes in images, someone could easily find them all.

It's also theoretically possible to pull data on the moon phase...... but I don't really feel like going into that. >_o

[IntoRain]

If you want the php version to keep doing it like what you have in Creche: http://stackoverflow.com/questions/6...me-from-server

After getting the server time, do a smarty assign like $mysidia->template->assign("time",$variableYouCreated), this makes it possible to use the variable {$time} in the template.tpl (just like {$sidebar} or {$menu}!) inside the tags Kyttias has mentioned.
Or like this http://www.smarty.net/docs/en/langua...tpl#idp6286592

[Kyttias]

It's definitely smarter to do it with PHP if for any reason it has to do with promo codes, for obvious security reasons! The best designed sites flawlessly integrate beauty with purpose. It's nice to know Smarty has a built in function for server time! Definitely would have saved me half the effort last night.

- On what file does the smarty assign need to be made?
- To get an image to appear a specific time of day, but not display the time, I would still need at least this in Javascript:

var now = new Date();
var hrs = now.getHours();
var img = "";

if (hrs >  0) img = "http://static.jsbin.com/images/jsbin_16.png"; // After midnight
if (hrs >  6) img = "http://static.jsbin.com/images/jsbin_16.png"; // After 6am
if (hrs > 12) img = "http://static.jsbin.com/images/jsbin_16.png"; // After noon
if (hrs > 17) img = "http://static.jsbin.com/images/jsbin_16.png"; // After 5pm
if (hrs > 22) img = "http://static.jsbin.com/images/jsbin_16.png"; // After 10pm

// Any element with a class of "timeimg" will get its image:
$(".timeimg").html("<img src="+img+">");

- I'd love a quick lesson on how to format PHP for this instead. ovo~ It should be nearly the same? (There's a bit of shortcutting above as far as format goes, but I don't know how chill PHP is with forgoing conventional brackets.) So, safely, this would be the basic start, right? What would the next steps be, to make showing an image be as convenient showing the time like the Smarty assign?

$t = date("H");

if ($t>"0") { echo "<img src='http://static.jsbin.com/images/jsbin_16.png'>"; } // After midnight
if ($t>"6") { echo "<img src='http://static.jsbin.com/images/jsbin_16.png'>"; } // After 6am
if ($t>"12") { echo "<img src='http://static.jsbin.com/images/jsbin_16.png'>"; } // After noon
if ($t>"17") { echo "<img src='http://static.jsbin.com/images/jsbin_16.png'>"; } // After 5pm
if ($t>"22") { echo "<img src='http://static.jsbin.com/images/jsbin_16.png'>"; } // After 10pm

I'd like the end result to be as easy as going {$timeimg}? (I'm learning, I like this!) I think it needs to go in function (object?) that the smarty variable will be assigned to read the outcome of??

[Infernette]

It works extremely perfect *_* Thank you so much, I even got it to display the server time by modifiying the script just a little.

This theme is awesome, btw, thanks for all the hard work :D

[IntoRain]

- It can be used on any file through $mysidia->template->assign(), as long as you declare mysidia ($mysidia = Registry::get("mysidia")). I've been using most assigns in class_template though, in assignTemplateVars() function, or in class_frame, but that's personal choice I guess. I chose those two since they are always loaded for every page

- You can also do an assign for the image link and then in the template use it wherever you want, like:

//in class_template

PHP Code:

//you can use any other date function you wish xD
$now = new DateTime();
$hrs = $now->format('G');
$img = "";

if ($hrs >  0) $img = "http://static.jsbin.com/images/jsbin_16.png"; // After midnight
if ($hrs >  6) $img = "http://static.jsbin.com/images/jsbin_16.png"; // After 6am
if ($hrs > 12) $img = "http://static.jsbin.com/images/jsbin_16.png"; // After noon
if ($hrs > 17) $img = "http://static.jsbin.com/images/jsbin_16.png"; // After 5pm
if ($hrs > 22) $img = "http://static.jsbin.com/images/jsbin_16.png"; // After 10pm

$this->assign("timeimg",$img); 


//in template.tpl or header.tpl, wherever you want it
<img src={$timeimg}>

You can assign both the time and the image at once like this if you wish. Of course, it will only refresh with a page refresh xD

- PHP is pretty much normal with brackets, if the IF condition only has one line, you need no backets, like in Javascript ^^

[Kyttias]

Thankyou, that makes so much more sense. I hadn't had breakfast yet, my brain was in a fog. ^^

I added the code above into inside of the function assignTemplateVars(), which exists inside class_template.php, and it worked perfectly. My life suddenly got worlds easier.

[Missy Master]

Utterly brilliant. WOW. Thank you so much, I just installed this and it's incredible!!

[Missy Master]

Utterly brilliant. WOW. Thank you so much, I just installed this and it's incredible!!

[coolgem923]

As many many people before me have said.. THIS THEME IS AMAZING! I love Bootstrap and having it made into a theme for Mysidia Adoptables is just awesome!

[coolgem923]

This is amazing!

I found a bug though, on mobile devices submenus aren't present.