How to Add Enjoy Today to Ning Network

Add This to Custom Code Page

Add the following to the bottom portion of your custom code page in the Dashboard:

<script type="text/javascript">

function DateTime() {

function getDaySuffix(a) {

var b = "" + a,

c = b.length,

d = parseInt(b.substring(c-2, c-1)),

e = parseInt(b.substring(c-1));

if (c == 2 && d == 1) return "th";

switch(e) {

case 1:

return "st";

break;

case 2:

return "nd";

break;

case 3:

return "rd";

break;

default:

return "th";

break;

};

};

this.getDoY = function(a) {

var b = new Date(a.getFullYear(),0,1);

return Math.ceil((a - b) / 86400000);

}

this.date = arguments.length == 0 ? new Date() : new Date(arguments);

this.weekdays = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');

this.months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

this.daySuf = new Array( "st", "nd", "rd", "th" );

this.day = {

index: {

week: "0" + this.date.getDay(),

month: (this.date.getDate() < 10) ? "0" + this.date.getDate() : this.date.getDate()

},

name: this.weekdays[this.date.getDay()],

of: {

week: ((this.date.getDay() < 10) ? "0" + this.date.getDay() : this.date.getDay()) + getDaySuffix(this.date.getDay()),

month: ((this.date.getDate() < 10) ? "0" + this.date.getDate() : this.date.getDate()) + getDaySuffix(this.date.getDate())

}

}

this.month = {

index: (this.date.getMonth() + 1) < 10 ? "0" + (this.date.getMonth() + 1) : this.date.getMonth() + 1,

name: this.months[this.date.getMonth()]

};

this.year = this.date.getFullYear();

this.sym = {

d: {

d: this.date.getDate(),

dd: (this.date.getDate() < 10) ? "0" + this.date.getDate() : this.date.getDate(),

ddd: this.weekdays[this.date.getDay()].substring(0, 3),

dddd: this.weekdays[this.date.getDay()],

ddddd: ((this.date.getDate() < 10) ? "0" + this.date.getDate() : this.date.getDate()) + getDaySuffix(this.date.getDate()),

m: this.date.getMonth() + 1,

mm: (this.date.getMonth() + 1) < 10 ? "0" + (this.date.getMonth() + 1) : this.date.getMonth() + 1,

mmm: this.months[this.date.getMonth()].substring(0, 3),

mmmm: this.months[this.date.getMonth()],

yy: (""+this.date.getFullYear()).substr(2, 2),

yyyy: this.date.getFullYear()

}

};

this.formats = {

pretty: {

a: this.sym.d.dddd,

b: this.sym.d.ddddd,

c: this.sym.d.mmmm,

d: this.sym.d.yyyy

}

};

};

var dt = new DateTime();

x$('.day').text(dt.formats.pretty.a);

x$('.date').text(dt.formats.pretty.b);

x$('.month').text(dt.formats.pretty.c);

x$('.year').text(dt.formats.pretty.d);

</script>

Followed By:

<script>

x$('.thisusername').html(ning.CurrentProfile.fullName);

</script>

<script>

var sizeofthumb = 150;

x$('.userthumb').html('<img src="'+ ning.CurrentProfile.photoUrl +'&width='+ sizeofthumb +'">');

</script>

This second portion of the code will pull the User Name and Thumbnail avatar of the person logged in to the Ning Network

You can also Add this as Sidebar Widget

Add This to a HTML Text Box

Finally, you will add the following to a HTML Text box inside your Sites and Pages:

<header class="intro">Welcome Back,<div class="thisusername"></div>,enjoy your day.

<div class="userthumb"></div>

</header>

<div class="today">

<div class="today-piece top day"></div>

<div class="today-piece middle month"></div>

<div class="today-piece middle date"></div>

<div class="today-piece bottom year"></div>

</div>

Add This to Advanced CSS Section of Dashboard

/* Intro

-------------------------------------------------- */

.intro {

margin-bottom: 0.85em;

border-radius: 0.25rem;

padding: 1.25rem;

font-size: 1.2em;

font-weight: 200;

text-align: left;

background: rgba(255, 255, 255, 0.75);

}

/* Today

-------------------------------------------------- */

.today-piece {

border-radius: 0.25rem;

padding: 1.6rem;

font-size: 1.25em;

text-align: center;

background: white;

}

/* Piece positions

-------------------------------------------------- */

.top {

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

}

.middle {

border-radius: 0;

}

.bottom {

border-top-right-radius: 0;

border-top-left-radius: 0;

}

/* Piece categories

-------------------------------------------------- */

.day,

.year {

font-size: 0.95em;

font-weight: 500;

letter-spacing: 0.35em;

text-transform: uppercase;

color: white;

background: #e94939;

}

.month {

padding-top: 1.55rem;

padding-bottom: 0;

font-size: 1.2em;

font-weight: 200;

}

.date {

padding-top: 0;

padding-bottom: 1.55rem;

font-size: 1.7em;

font-weight: 100;

}