Ning 3.0 Tip: Add CSS to Member Profiles

Featured Designs Forums Tutorials Ning Tutorials Ning 3.0 Tip: Add CSS to Member Profiles

Tagged: 

This topic contains 2 replies, has 2 voices, and was last updated by Profile photo of AnGella AnGella 3 years, 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #27628
    Profile photo of AnGella
    AnGella
    Keymaster

    Yes, you read that right. I have developed some jQuery that you can add to your 3.0 network to allow your members to add CSS to style their profile page!

    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.

    Before:

    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.

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

    var SAbackground = x$(‘.profileCoverArea-questionAndAnswer:contains(“body”)’).text(); //get the text from the .profileCoverArea-question field

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

    x$(‘.profileCoverArea-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

    Please comment, share and enjoy!!

    • This topic was modified 3 years, 10 months ago by Profile photo of AnGella AnGella.
    • This topic was modified 3 years, 10 months ago by Profile photo of AnGella AnGella.
    #28063

    Awesome Angela and thank you! Hugs♥

    #28111
    Profile photo of AnGella
    AnGella
    Keymaster

    You’re welcome!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.