Make Your Profile Page Questions/Answers Stand Out - Old Tip Revisited

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

Views: 421

Reply to This

Replies to This Discussion

Well, looks like everyone is wearing white shirts, gone is the days of color shirts.

Okie dokie. =)

Yeah, I prefer light colors. But, you can change the colors to whatever you want.

Best,

Jen

On other sites maybe but no customized on my page here....:)

I am really sorry. I had no idea that feature was shut off when we moved over to DS. Apparently, it has to be turned back on. You should be able to do most anything now, except for code I use to overwrite profile pages. The latter should be barely noticeable.

Best,

Jen

Oops! Are you all trying to tell me that you can't customize your pages? I'll run and check. If yes, my apologies!

DOH. Thanks!

Might had been a senior moment, we all have them.

Hey, watch it. LOL Yeah, something like that. ;-)

Thanks for letting me know,

Jen

Ning 3

.aboutTab-question {
font-weight:bold!important;
font-style:normal!important;
}

RSS

Members

© 2017   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips