Style Profile Page Questions/Answers:

I've written this tip before, and thought I'd revamp it a little. On most Ning sites, when you visit a Profile Page, and view Profile Questions/Answers, it's usually difficult to figure out questions versus answers. With most of the default Ning Themes, the Profile Questions don't stand out very well. I'm going to share some simple CSS that will make your Profile Questions stand out better. Be sure to add this CSS to Custom Code Box, versus Advanced CSS. We want to try and override custom Profile Pages, when possible. Adding the CSS to the Custom Code Box, wrapped in a style tag, should do it.

I'm going to provide 2 examples, 2 sets of code. The first one will add a subtle semi-transparent gray background behind the profile questions, change the text color/size, font weight, add padding, add a subtle border, etc... The second example will add the same background behind the entire block: question and answer. Notice: I make the font size smaller for private questions. It helps take up less space when a Member is viewing their page.

Background Color Hint: If you don't know how to add your preferred background color using RGB values, you can use a solid color for your background. Change these 2 lines:

background: rgb(200, 200, 200;)!important;background-color:rgba(200, 200, 200, 0.15);

TO:

background-color:#FFFFFF; - - CHANGE  TO YOUR COLOR.

Instructions - Example #1 (Background color behind Profile Questions):

• Edit CSS, changing colors to match your Network.
• Add CSS to Custom Code Box via: My Network/Tools/Custom Code
• Save.

CSS: (contained in Style Tag)

<style>
/** Profile Question **/

.xg_widget_profiles .module_about_user dl dt { padding:7px;border:1px solid #E6E6E6 !important; background: rgb(200, 200, 200;)!important; background-color:rgba(200, 200, 200, 0.15); font-size:14px; color:#0088cc!important; font-weight:bold!important;}

/** Profile Answer **/

.xg_widget_profiles .module_about_user dl dd {font-size:12px; color:#333333!important; font-weight:normal!important;padding:0px 7px;}

/** 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;}

</style>

Instructions - Example #2 (Background color behind Profile Question/Answer):

• Edit CSS, changing colors to match your Network.
• Add CSS to Custom Code Box via: My Network/Tools/Custom Code
• Save.

CSS: (contained in Style Tag)

<style>
/** Profile Question/Answer Block Background Color **/

.xg_widget_profiles .module_about_user dl  { padding:7px;border:1px solid #E6E6E6 !important; background: rgb(200, 200, 200;)!important; background-color:rgba(200, 200, 200, 0.15);}

/** Profile Question **/

.xg_widget_profiles .module_about_user dl dt { padding:7px; font-size:14px; color:#0088cc!important; font-weight:bold!important;}

/** Profile Answer **/

.xg_widget_profiles .module_about_user dl dd {font-size:12px; color:#333333!important; font-weight:normal!important;padding:0px 7px;}

/** 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;}

</style>

Enjoy!
Jen