Ning Groups Style Hack: Different Backgrounds for Different Groups

Post date: Feb 16, 2014 12:53:29 AM

Have Different Backgrounds for Different Groups in Ning Networks

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.

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

body { border: 0px double #fd0e19;

background-image: url(http://api.ning.com:80/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

(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

(4) Copy the following code

(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" />

(3) Now go to your Dropbox> Public> css folder

(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.

Give me a Shout!

How to have different backgrounds for different Groups in Ning 3.0

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 contact page or store.. Good Luck Guys!