Current status of the Ning Platform is always available on the Ning Status Blog.

FORUM

NC for Hire

I've been working on a project for a client which you'll all be most interested to see when I'm finished- basically a magazine-style build out on a Ning.   One of my tasks this week was to create various magazine style templates that are compatible with pages on Ning.  Today I am going to give you all one of these templates for two reasons.

 

1) I want to show those of you who are unaware how powerful CSS can be and how it can be used on your Ning network.

2) I hope to raise the bar on the types of pages which can be produced using the ning platform and give you all a chance to build on a few examples and hopefully teach me something I haven't thought of yet.

 

Below it a template for you to download and edit in your own text editor.  If you do not have a text editor or are new to CSS/HTML, i suggest (KOMPOZER).   The following template contains these features:

***Pure CSS layout with columns (2 images for place holders which you'll need to swtich out or substitute as you wish)

***Layout will work for BOTH Full Page Width Pages and  Pages which retain the sidebar because the template is FLUID.   If you would like to make this template a set width, you simply need to go into the first lines of code and look for "100%" and change that to say "600px" for example.

The entire layout is heavily commented so you know what you are working with...simply view source and you'll see what I mean.

 

 

 

ATEAM-MAGAZINE.html

Play around with this and see what types of possibilities you can come up with.  I suggest downloading it, open it with your text editor, customize it and copy the entire contents of the template from this section of the template

<!-- **************************************************************
     DIV FOR TOP

 

to this section:

alt="placeholder image is 150 x 350"></p>

 

into your page, into the HTML view.  When copy/pasting into your page, leave out everything above the <body> tag and everything below </body> tag.  You might also be adventurous and deck this baby out into a magazine style splash page.  As you can see, i got a little stupid with the A-Team Theme, but it just goes to show, the possibilities are endless.  Enjoy!

 

If you are looking for some ninjas to customize your Ning for you...look no further than JUSTNINJAS 

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Email me when people reply –

Replies

  • NC for Hire
    What?  Did I make this Tutorial Too confusing?
    • I wish I could understand it.

      I am at kindergarten level with css

  • Hi JFarrow,

    This is another great piece of work by you. However, through no fault of yours, the text editor makes all of this torture. You can copy in html to the html editor and make changes, check in the visual editor as to how it looks and then when you update the page, things get all messed up. Back you must go to find the odd breaks and spaces added and you slowly lose your mind and give up 'til another day. I know, I know-I should make all the changes in my external editor (Kompozer) but then what is the use of Ning's editor? ...and it still will make changes when you update page. Madness.

    One thing else - Your html links  to the code (mid-page and attachment) do not download it. They just open the the larger screen shot you posted of the finished page. You can use view page source to get code, but it probably confuses people when the link doesn't download. 

    James

    • NC for Hire
      hmmm...thanks for the feedback...i'll make a few changes.... one tip i will pass on though is this: Jen has an excellent Online Editor on her network here: http://jensocial.com/page/wysiwyg-html-editor

      this editor has been designed to reformat HTML to work on Ning sites..so if you pass it through her editor before taking it to your network, should eliminate some of your headache..
      thanks for the heads up...i was starting to think i was just crazy for adding it...
This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Dax Carlisle and Julius Manninen joined Ning Creators Social Network
2 hours ago
Scott Bishop posted a discussion
Does anyone know how to change the font for the navbar to a font that is not listed for Ning 2.0? I…
8 hours ago
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Ning3: How to Create a Combined Feed of All Forums Inside Groups
"212 views of this and no one can provide feedback?  Is this just way over everyone's head or is it…"
yesterday
Scott Bishop replied to George H. Compton IV's discussion
(TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"Hi Kyryl, 
How would I be able to use this code to make the navigation be screen wide? I have this…"
Wednesday
⚡JFarrow⌁ replied to J.Ayvar's discussion
Any Code to make a footer Menu like creators Ning 3
"Here is whatI am using.... but i have a collection of footersyou might like to look through and for…"
Wednesday
Anastasia_Ning_Support replied to J.Ayvar's discussion
Any Code to make a footer Menu like creators Ning 3
"Hi there!
One of our representatives have sent you an email, please check it. 
Best regards,
The NI…"
Tuesday
J.Ayvar posted a discussion
Tuesday
Scott Bishop replied to George H. Compton IV's discussion
(TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"George, I messaged you through my site www.surfer-shot.com for help. I was able to fix most of it b…"
Tuesday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
TIP: How to Automagically Change Text Locations into Maps
"so glad  i had this backed up..."
Monday
Aaron Sorensen, Michael Forest , george wilson and 1 more joined Ning Creators Social Network
Monday
Jacques Dufresne updated their profile
Nov 8
Luigi Starace is now a member of Ning Creators Social Network
Nov 8
More…

Meanwhile, you can check our social media channels