JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Make Your Member Profile Questions/Answers Stand Out

Make Your Member Profile Questions/Answers Stand Out

You can make your Member Profile Questions/Answers stand out more, by adding and tweaking the following CSS:

/**Public Profile Question **/
.xg_widget_profiles .module_about_user dl dt {font-size:14px; color:#cc0000!important; font-weight:bold!important;}
/** Public Profile Answer **/
.xg_widget_profiles .module_about_user dl dd {font-size:12px; color:#003366!important; font-weight:normal!important;}

And, if you want to differentiate between Public and Private, the CSS below will adjust your Private Questions/Answers.

/**Private Question **/
.xg_widget_profiles .module_about_user dl.private dt {font-size:10px; color:#333333!important; font-weight:normal!important;}
/** Private Answer **/
.xg_widget_profiles .module_about_user dl.private dd {font-size:10px; color:#cc0000!important; font-weight:normal!important;}

Instructions:

1. Edit Code above with your font preferences.

2. Add to Advanced CSS, via My Network/Settings/Appearance/Advanced CSS.

3. Save.

4. You may also need to add to your Custom Code Box, via My Network/Tools/Custom Code. This may be needed to override Profile Pages that are existing, or Member customized pages - - where their CSS is overriding your settings. See code below.

Custom Code Box Version:

BE SURE to add the STYLE TAG around the Custom Code Box version, like this:

<style>
/** Profile Question **/
 .xg_widget_profiles .module_about_user dl dt {font-size:14px; color:#cc0000!important; font-weight:bold!important;}
 /** Profile Answer **/
 .xg_widget_profiles .module_about_user dl dd {font-size:12px; color:#003366!important; font-weight:normal!important;}</style>

Adjust Background for Profile Question/Answer Box
.xg_widget_profiles .module_about_user div.xg_module_body {padding:10px;background-color:#e6e6e6; border:1px dashed #333333;}

Enjoy!
Jen

0 members favorited this

Replies to This Discussion

Permalink Reply by OMGEDSON on October 29, 2010 at 9:20pm

Absolutely LOVE this, and what if, perhaps I wanted a custom background color for that module? =)

Permalink Reply by JenSocial on October 29, 2010 at 9:57pm

Glad you liked it! Wrote it special for you. It was in my premium tips, and why I didn't add it to the Creators site. I pulled it off the premium list because you needed it.

You should be able to add a background URL image, by adding to the following Class. I haven't tested this yet. I couldn't get it to work in FireBug, but it should work. Keep in mind, you'll need an image that will work in any column, if you allow members to move modules on their profile pages:

Adjust Background Image for Profile Question/Answer Box
.xg_widget_profiles .module_about_user div.xg_module_body {background:URL (yourimage path) top center no-repeat; padding:10px;background-color:#e6e6e6; border:1px dashed #333333;}

Permalink Reply by LOVING A CONVICT on November 3, 2010 at 9:19am

Yeah me to :-)

Permalink Reply by JenSocial on November 3, 2010 at 11:34am

You all can probably test this in your test environment. Here's an example screen shot using the following code:

/** Public Profile Question **/

.xg_widget_profiles .module_about_user dl dt {font-size:14px; color:#003366!important; font-weight:bold!important;}
/** Public Profile Answer **/
.xg_widget_profiles .module_about_user dl dd {font-size:12px; color:#cc0000!important; font-weight:normal!important;}
.xg_widget_profiles .module_about_user div.xg_module_body {padding:10px;background-color:#F2FFE1; border:1px dashed #83D13D;}