JenSocial: Social Web Directory and Ning Tips

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

Using Images as Module Headers - from Ning Help (http://help.ning.com/)

This Tip came word-for-word from the following link, on Ning Help. You should check the site out. They offer all kinds of great tips and helpful information. I'm only adding here for your convenience. Ning Help Link - Using Images as Module Headers

Using Images as Module Headers

You don't always have to use regular text as a header for your modules. Using CSS you can use a graphic as your module header as well. Here's how.

First, you'll want to upload the graphic to Ning server. Because we're uploading the graphic in a non-standard way, we'll be using a work-around: We'll upload the image from a blog post. Once that image is uploaded, it will always be on the server, even if you delete the blog post. We'll use that file to

1. Create a new blog post and use the "upload file" button to upload your graphic file. You can use all the standard graphic image types: JPG, GIF and PNG files all work well.

2. You should see a link to the file inserted into your blog entry that starts with this: http://api.ning.com/files/ Copy that link and delete the blog post.

3. Now that we have the image, we can actually add the CSS that will replace the header with the graphic. But first, we'll need class name of the module of the graphic you want to replace:

Module Name	Class Name
Blog	.module_blog
Members	.module_members
Photos	.module_photo
Groups	.module_groups
RSS	.module_feed
Forum	.module_forum
About this network (right column)	.module_about
Recent Activity	.xg_module_activity
HTML Textbox	.html_module

4. Got that? Good. Now insert the following CSS in the Appearance > Advanced > Custom CSS box on the Manage section of a network. You'll have to do some light edits: Replace [image url] with the URL of the image you uploaded in step 2. I also use .module_forum as an example, but replace that with with the CSS class in your following example.

.module_forum .xg_module_head {
background-image:url([image url]);
background-repeat:no-repeat;
height:21px;
}
.module_forum .xg_module_head h2 {
text-indent:-9999px;
}

For the folks that want to see an example of a network at work using graphics headers, check out http://cssdemo01.ning.com/ - you can also use the Firefox extension Firebug to take a look at the CSS properties of the module headers. Hope this helps!

1 member favorited this

Replies to This Discussion

Permalink Reply by JenSocial on June 24, 2009 at 12:10pm

Oh no! Spambot on a Ning controlled network? ;-)

On these instructions, they are actually very good. I didn't even see a need to change anything. Let me know if you need me. Just drink more coffee. ;-)

The Kingdomz X said:

Thankx! Maybe because it's early and caffeine's not in the system yet, I'll come back and re-read later. In the meanwhile, it looks like somebody's got a spambot on their network: http://cssdemo01.ning.com/profile/JeanneHolloway

Permalink Reply by JenSocial on October 16, 2009 at 7:36pm

Sounds like something I would do, LOL! Glad you got it! Is it working for you?

The POZIAM Community said:

I am an idiot... I see i need to upload on a blog... duh...

Permalink Reply by Jonathan Wheeler on June 17, 2011 at 4:14pm

is there a code for the music and videos?

Permalink Reply by JenSocial on June 17, 2011 at 5:46pm

For video use same code and .module_video

For music, I can't remember if it's possible. It's a flash module, but if it has a normal header, try .module_music or just .music

You may enjoy this premium tip:

http://jensocial.com/group/premiumningtipsbyjen/forum/topics/add-sp...

Best,

Jen

Permalink Reply by Jonathan Wheeler on June 17, 2011 at 10:09pm

quick question I redid my layout converting the wide column to the left like yours, then added in the recent activity to top and stretched it to 740px adding the scroll bar. I then added in your special header icons to home page modules and am now trying to re add the image text that I created for the module headers but it seems to not be working for me this time around and I con't figure out what I am doing wrong. When I go to add the image for recent activity it displays both my image and the text is still present over my image? I uploaded via blog and changed the class name to the appropriate one but no luck.

Permalink Reply by JenSocial on June 17, 2011 at 10:17pm

Wow, I couldn't be anymore lost, sorry. You're going to have to make this easier for this old blonde. ;-)

Permalink Reply by Robert Flindall on June 20, 2011 at 2:55pm

Hi Jen - do you know if there's any way to get the image to extend past the top of the module header? As an example, have a look at www.jeepforum.com . It's not a Ning site, but gives you the idea.

Thanks in advance!

Rob

Permalink Reply by JenSocial on June 21, 2011 at 10:31am

Hi Robert, Unfortunately I can't think of a quick fix with CSS, due to the way the classes are assigned. If I come up with a way, I'll let you know.

Best,

Jen

Permalink Reply by Robert Flindall on June 25, 2011 at 4:29pm

Thanks anyways Jen! I've just made my icons fit within the module header bar - I think they look great without sticking out over the top. The only one that's giving me fits is the events module header. Adding an picture to the events module bar causes it to display in the Month bar as well. Grrr... :)

Rob

My Jaguar Life

Permalink Reply by JenSocial on June 25, 2011 at 5:00pm

See if removing it with CSS will work. Check all browsers:

.module_events div.calendar .calendar_head {background-image:none!important;}

Best,

Jen

Permalink Reply by Robert Flindall on June 25, 2011 at 8:51pm

Holy snap! You're the best! That code worked beautifully. No more image over my month...

Thanks!

Rob

RSS