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 soʀa on July 4, 2011 at 2:13pm

oh i'm really sorry, this tip won't apply to ds

because the html structure is different than in ds

but i give one of alternative like using #xg_body, because now #xg is only wrapping #xg_body = it's the same with #xg = #xg_body

IN OLD EDITOR, the #xg_masthead is in .xg_widget_profiles_blog

but in DS , the #xg_masthead is NOT in .xg_widget_profiles_blog

That means it this tip won't work :( - using css i mean D:, maybe you can using script but i doubt it.

Permalink Reply by JenSocial on July 4, 2011 at 5:50pm

Thanks Sora. When I have time, I'll try to catch up on the comments.

Best Regards,

Jen

Permalink Reply by Michel Poisson on July 6, 2011 at 2:23pm

Thanks for giving it a try.

Permalink Reply by Robert Flindall on July 6, 2011 at 9:32pm

Jen or Sora - now that Ning is allowing custom CSS code in Pages, is it possible to change the masthead at least for Pages using some CSS?

Just wondering.... I'm really keeping my fingers crossed that a work around will be found to allow changing the masthead image some day.

Cheers!

Rob

Permalink Reply by soʀa on July 7, 2011 at 1:18am

Actually Yes, in that specific page.

just put this code in the custom

<style>

#xg_masthead {

background : transparent url(your_pict) no-repeat scroll 0 0 !important;

height : yourimageheightpx !important;

}

</style>

Permalink Reply by JenSocial on July 7, 2011 at 1:30am

Was just about to add this tip, and background. Thanks Sora!

I'll create full tips soon.

Permalink Reply by Writer Chick on July 7, 2011 at 10:37am

Jen, I'm trying this in the old templates (no DS) and the header isn't changing. I saw where someone else was having this problem too. I read through the rest of the comments and couldn't find where a solution was posted.

Permalink Reply by soʀa on July 7, 2011 at 11:22am

thx for your feedback :)

Permalink Reply by JenSocial on July 7, 2011 at 4:48pm

At first glance, looks very nice! Love your image above.

Thank you for sharing,

Jen

Permalink Reply by Robert Flindall on July 7, 2011 at 11:38pm

See! Now that's what I'm talking about! Great work there Clive - it looks fantastic. But I do have one question, that I'm almost afraid I already know the answer to..... Are you using Design Studio or the old editor?

Thanks in advance!

Rob