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 Robert Flindall on June 26, 2011 at 9:04am

Hi Sora - thanks for the reply! :)

I've posted over on Creators as well to see if someone knows what the new CSS might be to accomplish this.

Rob

Permalink Reply by Michel Poisson on June 30, 2011 at 12:48pm

It doesn't work in DS.

I have posted a thread on NC to find if there was an equivalent for DS.

No reply =(

This is a brilliant idea as many new members are not quite sure if they are posting a blog or a discussion. Different header images would do the job.

Permalink Reply by Robert Flindall on June 30, 2011 at 11:20pm

I agree. I'm really hoping that someone out there will be able to help us out with the different mastheads. Having different mastheads on my site will be absolutely fantastic.

What I'm also wondering is if there is a bit of CSS that will allow different mastheads for different groups! That would really allow for custom pages for each group. It could also be a source of income in charging a small nominal fee to have a custom "look" for groups.

I'm really keeping my fingers crossed on this one!

Rob

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

Hi Sora.

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

I'm going to try and look at this soon.

Best,

Jen

Permalink Reply by Robert Flindall on July 4, 2011 at 3:53am

Oh boy! You've got me really excited! :D

Rob

Permalink Reply by soʀa on July 4, 2011 at 4:16am

HI.

When i see the html structure of the new ds

it won't work, this only works if xg_masthead is inside the .xg_widget tag (like in the old editor)

However you can do something similar.

As you see the #xg in the new DS only wrapping #xg_body instead of wrapping #xg_masthead, #xg_head #xg_navigation like in the old editor

So you can do something like changing #xg_masthead but now changing #xg_body

How?

First

in the new DS #xg is only wrapping #xg_body so if you are using repeated image background for the body i suggest doing that in the #xg section

Second

Doing something like something bellow in the #xg_body (make sure your image width is the same as your current #xg_body width)

something like this

.xg_widget_[depending on the page] #xg_body {

padding-top: [yourimageheight+10px for some margin];

background-color: transparent !important;

background-image:url(your_image_url);

background-position:top center;

background-repeat:no-repeat;

}

That's the concept of changing masthead or now body in the new DS

This way you can attain the same effect as changing masthead :). If you are having trouble attaining this effect please just post something in this thread.

Sorry, I was somehow busy in my summer days because of design work, and just look this thread seriously today. Enjoy!

Sorachii

Permalink Reply by Michel Poisson on July 4, 2011 at 12:30pm

The code to add images under the masthead, in the body, works fine. I'll certainly find a use for it.

I can't figure the right syntax to change the masthead itself ...

Permalink Reply by soʀa on July 4, 2011 at 12:42pm

#xg_masthead {

background-image:url(image_url) !important;

background-position: 0 0;

height:300px;

}

something like this.