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

Ning 3.0 Tip: Add CSS to Member Profiles

Brought to you by popular demand on my site, jQuery to add CSS to your member profiles! 

 

Also inspired by SweetPotato's discussion and the use of "contains" for jQuery, I was able to adapt some of my own jQuery from my wordpress powered site to work for Ning 3.0 to allow members to add CSS to their profiles. 

 

PROFILE BEFORE:

PROFILE AFTER:

1)  To add this feature to your Ning 3.0 site you will need to add a profile question that contains the word "Style".  You will want to set the answer to use the Long Answer option.  I have also set mine to not show up in advanced searches.

For example:  Profile Style

Include CSS by adding it to the answer portion of the question.  Your CSS MUST include at least the "body" portion of the code.

For example: body {background-color: #191919;}

2)  Go to the Custom Code section of your Ning 3.0 site and add the following script to the End of Page Code box.

Add CSS to Member Profiles for V1 Themes

<script type="text/javascript">
x$(document).ready(function() {
x$('.profileCoverArea-question:contains("Style")').remove(); //remove the question from view

var background = x$('.profileCoverArea-questionAndAnswer:contains("body")').text(); //get the text from the .profileCoverArea-question field

x$('body').append('<style>'+background+'</style>'); //append it to the body

x$('.profileCoverArea-questionAndAnswer:contains("body")').hide(); //hide the table row with the css
});
</script>

Add CSS to Member Profiles for V2 Themes

Thanks to George H Compton IV this code has been adapted to work in V2 themes.

For V2 you will need to add the about box onto the profile page.
You'll need to go to
>Site & Pages
>My page
and add the (About) module.
Script will go to the same Custom Code section of your Ning 3.0 site, the End of Page Code box.

<!--  AnGellas Add CSS to Member Profiles themes v2 -->
<script type="text/javascript">
x$(document).ready(function() {
var background = x$('.aboutTab-questionAndAnswer P.aboutTab-answer:contains("body")').text(); //get the text from the
x$('body').append('<style>'+background+'</style>'); //append it to the body
x$('DIV.aboutTab-questionAndAnswer:contains("body")').hide(); //hide the table row with the css
});
</script>

Members will now be able to add CSS to their profile page!

Here is my Own page as a working example:

http://skemanon.ning.com/members/AnGella

The CSS I used remains responsive.  Here is a snippet to get you started:

body /*Background*/{
background-color: #191919;
background-image: url("http://") !important;
background-attachment: fixed;
background-position: bottom center;
background-repeat: repeat;
}
.content/*Text*/{
color: #fff !important;
}
a /*Links*/{
color: #999 !important;
}
a:hover /*Links on Hover*/{
color: #6b6b6b !important;
}

 

This can be customized as much as the user wishes, but for the sake of simplicity I have only added the CSS basics.

GUIDE FOR RETAINING RESPONSIVE CSS:

So long as you do not add the width property to any selectors, all CSS should remain responsive as it is piggy backed onto the site's main CSS.  For more information on basic CSS please see my discussion here:  Cascading Style Sheets AKA: CSS

Happy Coding!
AnGella

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

  • Great work AnGella!

  • NC for Hire

    nice work!

  • Thanks!

  • NC for Hire
    good job ;-)
    • Thanks SweetPotato!  I sure appreciate the intro to the "Contains" function in jQuery!

  • Hello AnGella, :(  I hate being the bearer of bad news but you can only see your own Style if your signed in, no one else can see the changes Signed in or not.. But with a little more work you'll have the best tip in on creators once it's working properly :)

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

kostasgr liked Alex - Rosas † Negras's discussion I managed to add group video calling, if anyone is interested I will post the codes
Tuesday
Jords updated their profile
Tuesday
Steve C replied to ⚡JFarrow⌁'s discussion
What is going on with Ning? What Do We have to Look Forward To?
"Ning is based in California but operations are in Kyiv, Ukraine. Due to the war, operations may…"
Jul 6
Alex - Rosas † Negras replied to Alex - Rosas † Negras's discussion
I managed to add group video calling, if anyone is interested I will post the codes
"⚡JFarrow⌁  
I'm working on the stories and I don't have time to work on the video call you just…"
Jun 28
Alex - Rosas † Negras replied to Alex - Rosas † Negras's discussion
I managed to add group video calling, if anyone is interested I will post the codes
"if you want I'll give you the codes privately and we'll see if the two of us can make it perfect"
Jun 27
Eva and ⚡JFarrow⌁ are now friends
NC for Hire
Jun 25
⚡JFarrow⌁ replied to Eva's discussion
For three days now, my networks, Ning 2.0 and Ning 3.0, are incorrectly visible
"Ug... thats not right..  ill send you my phone number in messages and we'll talk it over."
Jun 24
Eva replied to Eva's discussion
Help Help Help
" I just started a test network on Ning. I'm having the same problems there too! No photos, in…"
Jun 21
Eva posted a discussion
Jun 21
Eva posted a discussion
For three days now, my two networks, Ning 2.0 and Ning 3.0, have been displayed incorrectly, they…
Jun 21
⚡JFarrow⌁ replied to Alex - Rosas † Negras's discussion
I managed to add group video calling, if anyone is interested I will post the codes
"looks interesting"
Jun 20
⚡JFarrow⌁ updated their profile photo
Jun 16
More…

Meanwhile, you can check our social media channels