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

NC for Hire

What I am going to show you is how to have a manageble system for adding different background images to different groups using a little bit of CSS code and a dropbox account.  This is a revisit to an old dropbox tip I post a long time ago.

For this tutorial, I advise downloading Dropbox if you do not already have it. Download Here

Once installed you can find the Dropbox folder at C:\Documents and Settings\[username]\My Documents\My Dropbox\. Navigate to the folder and you will see a folder inside named 'Public'.  Anything you put in this folder will have a publicly accessible URL.  Which means you can host CSS files inside.  I'd recommend adding a folder to this Public folder called 'css' which is where you are going to store these files.

How to have different backgrounds for different Groups in Ning 3.0

(1) Open a new text document and paste the following CSS into the document:

body { border: 0px double #fd0e19;
background-image: url(https://api.ning.com/files/I7biqbcZ7GsuH2ILIxPCWQB7YZwpU41E*SQBoq1Ib34OQw68sMRCV8aw*O5cKFi8BN8kNxQbyabwFfwvT3YHir6jTGTCDsDl/jbfarrowningtips.png);
background-color: transparent;
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
}

(2) Change out the parts in RED with your own image and Save document as a file named  group1.css and save it to the 'css' folder inside your public dropbox folder.  This style will overwrite the sitewide style just for the pages you insert it into in step 4.

            (a) You can create another CSS file for a different group by changing out the image again                and save the file as group2.css, group3.css and so on.  I have different groups for                       different locations, so I name mine Alaska.css, Alabama.css and so on.  Attached is an                example style sheet to start with.

            (b) also, if you'd like to not have to upload the images through the Ning text box, you                   can create another folder inside the Public folder and name it something like 'img' -                     store your images in that folder.  In this case you would have a URL like the following                  instead of the long api.ning.com address:

https://dl.dropboxusercontent.com/u/XXXXXX/img/group1.jpg

(3) Now go to your Dropbox> Public> css folder and right click on your group1.css file and click "Copy Public Link"   which will give you a link like the following:

https://dl.dropboxusercontent.com/u/XXXXXX/css/group1.css

Notice the XXXXXX which represents your unique Dropbox ID   yours will be unique to your dropbox.

(4) Copy the following code into an HTML box inside the pages of a group you'd like to have a different background in, but first you'll need to paste the URL which points to your css file you just made.

<link href="https://dl.dropboxusercontent.com/u/XXXXXX/css/group1.css" type="text/css" rel="stylesheet" />

Now the best part about managing your group styles like this is you can simply change out the background or add further styles to that sheet without having to touch the HTML of the page any further.  One you change and save the css file, it will automatically change on your network.  This works for both Ning 2.0 and 3.0.  In my 2.0 network, i had over 300 groups, each styled with their own css style sheet, so go wild!

Have you found any innovative methods for custom styles on your network?  Tell us below!

As always, if you are in need of help with setting up or customizing your Ning network, give me a shout on my profile.  Good Luck Guys!

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

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

  • Sahweet.  Thanks JF.  We can also upload backgrounds to File Manager as well, right?

    • NC for Hire

      for sure...  I just imagine down the road when a NC has different members start to manage group pages, there will need to be a method to easily switch these image out.  Having the css files inside your own dropbox will allow you to control the images and styles that are used on the groups. Hope it helps Kos!

  • That's pretty much how I do it but it will load faster if you use the below header HTML box..

    3222546?profile=RESIZE_480x480

  • This reply was deleted.
    • NC for Hire

      interesting.  so  by specifying groups-name  like how? like this?:

      body.page-groups-mapping-group {background-image: url ( ning file manager url );}

      body.page-groups-some-other-group {background-image: url ( ning file manager url );}

  • I remember now that Jen had a discussion a/b doing this on JenSocial but I (of course) kept getting confused so I gave up.  Simple for you guys = confusing for li'l ole me. *lol*  Great ideas, all you gentlemen.  Thank you again. 

  • hello JF & John :)

    The reason I would rather use it on an individual page is that way every single page on my network doesn't have to load those CSS codes that have nothing to do with that page.

    • This reply was deleted.
      • Yes I understand that and that is a very good way to go but doing it the other way helps keep your custom code box clean and It also helps keep your codes in order and easy to find instead of all stack in the code box.

    • NC for Hire

      that was my reasoning as well..

  • NC for Hire

    Very nice tip Jfarrow. So basically we can customize individual group using external css file.

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

Fernando Bisbal posted a discussion
There are people whose profile does not show the group block and we do not know which groups they…
Thursday
Fernando Bisbal posted a discussion
There are people whose profile does not show the group block and we do not know which groups they…
Thursday
Michael Rua Franco replied to Michael Rua Franco's discussion
Problems with Polyfill.io in my site
"Thank you so much for your reply Vlada "
Wednesday
Future Skills Academy updated their profile
Oct 1
Eva Libre liked Karen Hardy's blog post Terrified about 3.0 upgrade
Sep 29
JUSTIN GREGG updated their profile
Sep 27
Vlada replied to Eva Libre's discussion
Ning 3.0 is antisocial!
"Found this post with more complaints about the Ning3.0 malfuntioning for members in the comments…"
Sep 21
Vlada replied to Michael Rua Franco's discussion
Problems with Polyfill.io in my site
"I just read your post here,now I'm no IT expert but I just went to your site and my antivirus didnt…"
Sep 20
Vlada replied to Eva Libre's discussion
Ning 3.0 is antisocial!
"Oh Eva thanks for this post,... Yeah Ning 03 sucks big time alright!!, you get no notifications on…"
Sep 19
⚡JFarrow⌁ replied to Zoe Dune's discussion
NING's Landing Page Issues, Third Party Options, Suggestions?
"I just sent you my contact info in a message.  Call me and ill talk with you about some options.."
Sep 11
⚡JFarrow⌁ replied to Eva Libre's discussion
Ning 3.0 is antisocial!
" One way to get your activites in groups to show up in your feed is to combine the feeds from…"
Sep 11
Eva Libre replied to Mar's discussion
Comments appearing in activity feed
"Yes, this is one of several problems with the Activity Feed in Ning 3.0!"
Sep 1
More…

Meanwhile, you can check our social media channels