JenSocial: Social Web Directory and Ning Tips

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

Have Different MastHead on every section! * NOT AVAILABLE IN NEW DESIGN STUDIO. *

About This Guide

You can customize your own header in each page such as in blog, groups, forum only with css. This is one of the few css tricks i've applied in ZincView.Com an anime site that i've designed recently. You can go there for the preview

-how to make different header in each section (well different xg_masthead's background)

This code is quite spesific, it can change anything in the #xg area including xg_body background , xg_head etc, even you can change specific layout with this "Different Masthead" blog for example giving the main page 2 column layout and the others 3 column.

First what you must know, this is purely css, no script or iframe. The thing i do is changing specific class in css, you can put this in the main where ever you like

Ning's spesific css pages are depending on their page url

example " .....com/groups" -- the specific class is .xg_widget_groups

another example is Search "....com/main/search" -- the specific class is .xg_widget_main_search

that applies to most of the default url, except in pages [if you made a page, the only spesific class is not /page/your-page-name/ but it's only .xg_widget_page

here's the list of the spesific class

Url (http://yournetwork.com/)	Class
/groups	.xg_widget_groups
/profiles/appearance/edit	.xg_widget_profiles_appearance_edit
/profiles/settings/editProfileInfo	.xg_widget_profiles_settings_editprofileinfo
/video	.xg_widget_video
/events	.xg_widget_events
/photo	.xg_widget_photo
/profiles/blog/list	.xg_widget_profiles_blog_list
/main/invitation	.xg_widget_main_invitation
/page	.xg_widget_page
/profiles/members	.xg_widget_profiles_members
/	.xg_widget_main_index_index

You can change anything in #xg with this, including #xg_masthead background, xg_head, xg_module_head, module_member etc

the only thing you cannot change is the body and xn_bar [Ning Bar] Xd~, you cannot change it by just css.

How to change Different Header?

__(the spesific class that show page)______ #xg_masthead {

background-image:url(your_image_url) !important;}

exampe if i want to make the masthead in video be different put...

.xg_widget_video #xg_masthead {

background-image:url(your_image_url) !important;}

Easy right? that's how you can header in a specific image, you can give it as a featured group if you decided to make it in the group, or featured blog etc.

How about the others?

if you can change the specific header, you can also change the specific layout

example here's what i've done for my main page. (or look at myprofile :3)

.xg_widget_profiles_profile_show.xg_colgroup .first-child {margin:0;width:950px;}

.xg_widget_profiles_profile_show .xg_3col .xg_2col, .xg_widget_profiles_profile_apps .xg_3col .xg_2col {margin-right:2px;overflow-x:hidden;overflow-y:hidden;padding:0;padding-left:10px;padding-right:6px;width:615px !important;}

.xg_widget_profiles_profile .xg_3col .xg_1col {margin-left:10px;overflow-x:hidden;overflow-y:hidden;width:295px;}.xg_last, .last-child {margin:0;}.xg_2col

.xg_widget_profiles_profile_show .feed-timestamp {left:500px;top:4px;}

.xg_widget_profiles_profile_show .xg_column.xg_span-4.xg_last{ display:none;}

It became 2 columned but only in the Main Page! Awesome right?

here's a list of different header in pages.

Changing Header in Member's Profile

.xg_widget_profiles_profile_show #xg_masthead

{background-image: url(your_image_url/bla.jpg) !important; }

Changing Header in Groups

.xg_widget_groups #xg_masthead {background-image:url(your_image_url/bla.jpg) !important; }

Changing Header in Video

.xg_widget_video #xg_masthead{background-image:url(your_image_url/bla.jpg) !important;}

Changing Header in Edit Themes

.xg_widget_profiles_appearance #xg_masthead, .xg_widget_profiles_settings #xg_masthead {background-image:url(your_image_url/bla.jpg) !important;}

Changing Header in Pages

.xg_widget_page #xg_masthead {background-image:url(your_image_url/bla.jpg) !important;}

Changing Header in Forum

.xg_widget_forum #xg_masthead {background-image:url(your_image_url/bla.jpg) !important;}

Changing Header in Photo

.xg_widget_photo #xg_masthead {background-image:url(your_image_url/bla.jpg) !important;}

Changing Header in Invite

.xg_widget_main_invitation #xg_masthead {background-image:url(your_image_url/bla.jpg)!important}

Changing Header in Blogs

.xg_widget_profiles_blog #xg_masthead {background-image:url(your_image_url/bla.jpg) !important;}

Changing Header in Events

.xg_widget_events #xg_masthead {background-image:url(your_image_url/bla.jpg) !important;}

Love SoraChii - Sora Tan @Sora's Creation

1 member favorited this

Replies are closed for this discussion.

Replies to This Discussion

Permalink Reply by JenSocial on November 3, 2010 at 3:06pm

You're too smart for most of us, LOL! This is a dynamite tip, simply awesome. I hadn't even thought to do this - - different header for different sections. I've done this for Clients of course, for Groups and pages. But, I've never thought about it, in the way you have. I love your way of thinking!

It would be awesome if you could put your 2 column code in another tip. I get this request all the time, and too chicken to give it out due to other potential issues, and questions. But, would LOVE it if you added it! Maybe name it something like:

2 Column Ning Layout

If you do add this specific tip, please be sure to explain that you're hiding a column. And if a Ning Creator adds modules to the hidden column via Features Layout, they will not be displayed. That's one of those reasons I don't offer except to paying Clients. But seriously, would be thrilled to see you add this. hint, hint, LOL!

Thanks again Sora! You seriously rock! Bet that I.Q. tips the scales. :-)

Best,

Jen

Permalink Reply by soʀa on November 4, 2010 at 1:34am

Hahaha don't worry i've only thought about it after designing a full site :). I'm really sorry if the main code 2 column thing is for confidential :( ! I'll change it to my profile hahahah :). I'll try not to disturb your work :))

Well actually 2 Column Ning Layout is really a bother but look good. For example it looks like very dull if you can't expand on it :) OR the bother of fixing all sections because of it :(, like the video

I haven't perfected the code yet :) but if i can or have the time to do so :) i've put it out next week

A week a tip i guess XD

Love Sora :)

Permalink Reply by JenSocial on November 4, 2010 at 2:14am

You may have misunderstood what I was saying. I love the 2 column tip. And, I would love for you to add to a tip by itself. Better for you to do it, than me. :-)

Best to you,

Jen

Permalink Reply by soʀa on November 4, 2010 at 2:22am

Ohw ok :) Sorry i misunderstood :) , I'm not native or fluent in english :).

I'll made it as soon i perfected and checked the code again :)

Permalink Reply by JenSocial on November 4, 2010 at 2:54am

Better than awesome!

Thanks,

Jen

Permalink Reply by elsodev on November 3, 2010 at 10:11pm

Great Job Great Job

Permalink Reply by Emprendedor Digital on November 5, 2010 at 8:10pm

How do i keep the header blended to the menu.? It creates a gap within the image and the menu. Pls advice.

Permalink Reply by JenSocial on November 5, 2010 at 9:16pm

Each case is different, and is adjusted via custom CSS. In your case, are you referring to small area above menu, or below menu and body?

Best,

Jen

Permalink Reply by Garfield Creator on November 6, 2010 at 10:42am

Permalink Reply by GapArt on January 3, 2011 at 12:32pm

I've tested this code (please see below), but the header on the photos page remains the same. The URL is correct as I have tested this. Any suggestions? I would like to use this on several pages, but until it's right I don't want to risk it.

.xg_widget_photo #xg_masthead {background-image:url(http://regal-network.com/inchristnet/images/ICN2011_header_photos.jpg) !important;}

Thank you,

Alex

Permalink Reply by Robert Flindall on June 25, 2011 at 7:59pm

Hi Jen,

Like In Christ Net, I can't seem to get this to work either. I've tried putting the code to change the header in my forum page, but it's not showing. I'm wondering if it works with the new Design Studio? Has the CSS provided above been checked since 2010? I'd love to get this working as it will really customize my site.

Here's the code I've entered in my Advanced area

.xg_widget_forum #xg_masthead {background-image:url(http://api.ning.com:80/files/7zAZX6GPaqm8nYQhkNVBd*-XTA0A1-71HRdN6FtrMO-HJWdfYCIks9t*oz5ST- ngYwLXVA4H7sPHu4JywPuoG96E-zdyJvDo/ForumsHeader.jpg) !important;}

Have I added the image URL incorrectly?

Thanks for any help you can lend!

Rob

Permalink Reply by soʀa on June 26, 2011 at 1:20am

I don't believe it work with the new Design studio :) because when i made this , it's the old editor.

and now the css may change :)