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.
<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
Replies
I haven't had time to look into that. With an 18 month old baby I just don't have time to mess with the never ending changes on Ning.
As long as you don't set the question to mandatory it will be all right.
I know the feeling Angela you have a great day.
I'm using themes2 and those tips still work perfectly . Yours and sweetpotatoes as long as the questions aren't set to required and you have the about tab on your profile. Thank you again for your CSS tip :-)
I forgot to add part four. So I'm going to delete the original and add the last piece of code to. Sorry LOL :-)
I think this does not work anymore I tried to do it but it did not work, it only worked if the member is an administrator.
None of these are working for me. Is there a new version for the most current updates?