Make Your Forum Module Stand Out - simple tip for newbies

[Jen]

This is super easy CSS to help make your Home Page Forum module stand out. The point is: Make one special module stand out from the rest.

 

Instructions:

• Edit CSS below, changing background color to your preferred color. The example color looks great on a white home page, and has that WordPress look.
• Add CSS to your Advanced CSS via My Network/Settings/Appearance/Advanced.
• Done.

CSS Code:

/* Make Your Forum Module Stand Out with Polished Look - Home Page */
.xg_widget_main .module_forum {
background: none repeat scroll 0 0 #F0F7FF!important; padding:15px; border:1px solid #e6e6e6;
}

Another nice alternative on colors:

.xg_widget_main .module_forum {
background: none repeat scroll 0 0 #D5E8F5!important; padding:15px; border:1px solid #dadada;
}

 

Enjoy,

Jen

[Speed Racer]

sweet little tip, Jen, I ,ay play with this a bit, thx for sharing!

[Jen]

Really it's nothing to call home about. =) But I decided it would be nice to share a tip with Ning Network Creators new to the platform.

Hope you can use it,

Jen

[Illya]

Jen, you always know the right things to help me take my network even further. Thanks so much.

[Jen]

Cool Illya, happy to hear it.

Best,

Jen

[Naomi]

Is there a sample we can see or do we need to apply it to see what it looks like?

[Jen]

Hi Naomi,

It's nothing elaborate at all, just adding a background color, subtle border, and padding to your forum module. It is the area behind the white in example below. Here's a screen shot:

Best Regards,

Jen

[Calico]

Dear Jen

It does not work when we put Blogs and Foruns side by side right ?

Thanks

Calico

[Jen]

Hi Calico,

It should work fine. For Blogs, use:

.module_blog

Best,

Jen

[Robert Williams]

Jen, 

I absolutely love this tip. I have tried to change the CSS up a bit to add this around a text module on my home page. The tip works for text modules, but unfortunately I can't limit it to just one text module. It adds the look to all of them. I have one text module in the main column and one in the right column. I want the one in the right column to have this look. Any thoughts? 

Many thanks, 

Robert

[Jen]

Hi Robert,

Since the text modules all have the same class names, it's almost impossible to apply to one. However, since you have one text module in right column, you may be able to do it this way:

Old Ning Editor/Themes:

.xg_widget_main .xj_classic_sidebar .module_text {
background: none repeat scroll 0 0 #D5E8F5!important; padding:15px; border:1px solid #dadada;
}

New Design Studio:

.xg_widget_main .xj_sidebar_content .module_text {
background: none repeat scroll 0 0 #D5E8F5!important; padding:15px; border:1px solid #dadada;
}

 

For all pages, remove .xg_widget_main

Best,

Jen