How to Add Enjoy Today to Ning Network

Post date: Mar 3, 2014 7:06:28 PM

Personalize Everyday On Your Network

I was thinking of a way to display today's date along with a personal welcome for members of any Ning community, with plans to eventually show weather in a member's location as well. With a little javascript to pull the date and a tad of JSON to recognize a logged-in member, you can pull something like this off.

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;

}

This just goes to show..

This just goes to show that with a little creativity and an idea about what counts in a community, you can accomplish simple, yet great things. Let me know if you need any assistance with your Ning network! Stay Creative!