Styling Groups with New Design Studio with CSS and a Swift Hack

[JFarrow]

I really should keep this a secret, but this just may be interesting enough to piledrive me right into the Superstar category, so I'll share it (hint hint)...I am going to show you how to add a new background to groups when using the new design studio.  I see a couple of NCs are frustrated trying to find this answer and even Eric says its not possible, but here is the proof of concept that yes you can change the background of a group using CSS.   Its a hack, so as with all hacks, use it at your own risk..

(btw..i know superstars is not a contest, but it inspired me to share nonetheless)

For Those NCs Who Previously Changed Groups Backgrounds

First, for those of you out there who had successully managed to change backgrounds of groups using the old editor, you remember that by adding a style sheet linked through the Groups description text module, you could change the background.  The CSS of that stylesheet looked something like this:

and gave you something nifty like this:

 

NOTE:  If you previously added backgrounds to groups then thought they were lost when you converted to new Ning Design Studio, you were mistaken.  Simply go back to a group that you previously styles and click edit on the text module, look at HTML editor view and you'll see your stylesheet is still there.  Open it up in a new tab and simply replace the first "body" selector with the following:

.xg_theme #xg_body

Re-upload that stylesheet to the textbox and replace the exisiting style url with the new one and call it good.

This will not change the external canvas image as before.  The old way just weighed pages down too much, i feel.  Instead,What it will do is replace the internal canvas image so that the background images behind the modules changes like so:

For Those Who Have Never Changed Backgrounds for Groups

The idea here is to inject a CSS style sheet into the group page which will over-ride all styles declared for that page.  How do we do this?  Create a style sheet using Notepad similar to the one I have attached below and replace the loooong image file URL with your own image file that you uploaded through any text box, save the file as GROUPNAME.css 

Now go to the group which you hope to change the background of and switch to HTML editor view, then using the file upload function (paperclip), upload that css file you just made, copy the looooong URL of the file and [HERE's A TRICK= press CANCEL]  NOW...paste that URL into the text box in HTML view.   Finally, you add the following code to the front and back (surrounding) that URL.

<link rel="stylesheet" type="text/css" href="http://api.ning.com/files/YOURLOOOOOOOOOOOOOONGURL/YOURSTYLESHEET.css" />

 

It will look similar to this when you're done adding the linked stylesheet within the text module of a group:

See an example finished group with styled background here on my land surveyors support network- Aerial Photogrammetry Group.

BONUS TIP:  If you want to additionally style the title of the group, simply add another CSS selector to the style sheet for the h1 property link so, changing it according to your design, of course:

h1             {text-align: left;
                margin-bottom:30px
    font-family: Helvetica,arial,serif;
    font-size: 35px; text-transform: none;font-weight:bold;
    color: #FFFFFF;
                 }

 

 

So what do you think? Is this a tip worthy of a superstar?

[GrayWitch]

Trying to use this for my library 

[GrayWitch]

I have tried this from scratch it is not working fopr me , I have the design studio as I got the new ning

[GrayWitch]

I so would love to be able to do this LOL

[GrayWitch]

I have tried this again does nto work for me ughhh help, I also watched the video somone added to lol

I have design studio 

[Fire-Tech]

It's a good tip. You just need to add it to the groups text box now. It doesn't like calling the remote file from the group info anymore for some reason.

[JFarrow]

why do the share and like buttons only show when not signed into creators?

[Paul Corona]

"[HERE's A TRICK= press CANCEL]" say what?

[Fire-Tech]

He's just saying that once you upload the file to Ning, it will show you the URL. If you copy the URL and then click cancel, you can still access the file that was uploaded even without saving it to your network.

[JFarrow]

thanks for the assist FireTech

[Fire-Tech]

No worries brother :)

[Alessandro Sporleder]

Great! Thanks for the tip!

I did a small change in the css file to better fit to the design of my network, may be useful for someone. The first change in bold to put it in the main background and the second one to center horizontally and space for the menu:

.xg_theme {
border: 0px double #001c5a;
background-image: url(http://api.ning.com:80/files/a7mvIuTgUBEEX-Md40aQWhVrA5X2a-XynPhsN3...);
background-color: transparent;
background-repeat: no-repeat;
background-position:50% 80px;
background-attachment: fixed;
}

_

[JFarrow]

nice work!