Current status of the Ning Platform is always available on the Ning Status Blog.

Forum

Ok really odd title I know but couldn't think of a better way to put it *lol*

Anyway this was inspired by a post Jesse added to the CEO post about having a sub heading under the main site heading. So had a little play around with it to come up with a few solutions which turned out to be quite interesting and useful.

Demos on these pages

Homepage shows all three versions in the header

http://bizzssite.ning.com/

Members Page

Shows one module version and the css one as the css one shows on every page

http://bizzssite.ning.com/members

So let's get started with first just adding a sub heading under our main site name. As we are doing this via css this will show up on every page. So here is the CSS and this would go in your design studio custom css section.

Before we go any further one thing to bear in mind if you are using the themes layout with the sidebar at the side of the screen be aware that adding content into the header adds length to it and so your menu get's pushed down. If you have a fixed menu with quite a few page links then on some tablet screens they might not all be shown on the screen. This is a bit of a flaw with the side menu layouts set in fixed positions and maybe something the new Ning team can look into.

/* Header Sub Title Using Css*/
.header-siteName:after{content:"This is Bizz's Demo Site, Member Site Coming Soon ( css version shows on every page)";display:block;font-size:14px; padding:5px 0px 20px}

TIP: You can add a css one and also module ones. So the css one shows all the time but module ones are page by page. So you could have one main subHeading then various other ones with some other message depending on the page you are on.

The content is what we want our message to be and the font-size is how large we want our text to be. The padding you may have to adjust depending on your site. So to add your own message just replace the text in bold. This text becomes part of the main site name and so takes on the click event of the site name so if you want to add some links to the text to go somewhere else then the options below main suite you better.

Next we can create some modules to add our message so we do not have to keep going back to the code to adjust it, also in the modules we can add more things like images etc. One important thing to remember by adding modules they will only show on the page they have been added to which In my mind worked out better.

For example suppose on the homepage you want a particular message to promote something or just to make it easier to add a sub heaading just for that page. Now we can go to another page, add a module with something else in it or if you want the same message as the homepage one just copy that message into the module on the new page ( see my home page and members page ). So as you can see you can do so many different variations it would take an age to write them all here

Below are two versions of modules, the first is to add a subHeading to a page and the second one is one we can add a heading but also be able to have clickable items in like links etc ( see my homepage as an example with a link to Creators )

First we need to add a little custom code and this only needs to be done once, so copy both set's of code so you have the code for both types of module. This code goes in your site&pages custom code end of page section.

<script>
// Sub Heading By Module
x$(document).ready(function(){
x$('.module-name:contains("SubHeading")').closest('.section-html').addClass('Site-SubHeadingAdmin');
x$('.Site-SubHeadingAdmin .entry-content').clone().appendTo('a.header-siteName').addClass('Site-SubHeading');
x$('.Site-SubHeadingAdmin').hide();
});
</script>

<script>
// Sub Heading By Module under site name not part of the click event
x$(document).ready(function(){
x$('.module-name:contains("SiteHeading")').closest('.section-html').addClass('Site-HeadingAdmin');
x$('.Site-HeadingAdmin .entry-content').clone().appendTo('.header-siteNameLogo').addClass('Site-Heading');
x$('.Site-HeadingAdmin').hide();
});
</script>

Next we need a little css for these modules

/*Sub Heading Using Module*/
.Site-SubHeading {margin-bottom:0px; font-size:16px;padding:10px 0px }

/* Under Site Name Version, contents are available to add links etc*/
.Site-Heading {margin-bottom:0px;margin-top:10px;font-size:16px;padding:0px 0px 10px 30px; color:white}
.Site-Heading a{ color: gold }
@media only screen and (max-width:771px){
.Site-Heading {padding:10px}
}

You may need to adjust the css depending on how big you want the text ( font-size ) or the text color ( color:white ). Also if you are going to add links then the Site-Heading a{ color: gold } sets the colour of the links.

Ok so that's all the code for both types of module and that's it for the code, once added no need to add it again.

How to add the modules.

This is really easy to do and is much the same as when you add any other module, the only important bit to remember is to give the module the correct title for the module type you want to use. You can add the modules wherever you want on the page as it's does not make any difference. The modules are hidden on the page. You just go back to site&pages, click on the module to edit the contents if needed or if you want to remove it etc.

Ok so how do we add them to a page, well the way to do it is the same for both modules as it's only the title of the module that needs to be different depending on the one you want to add. You can of course add both or all the types described in this post. You can see on my demo site I have done just that to show you each type.

TITLE TO USE

SubHeading

Sub heading is for adding content under your site name and becomes part of it so you cannot add links to this, just text or images

SiteHeading

Site heading is to add content under the site name section, this one allows you to add links etc.

  1. Go to site&pages then click on the page you want to add a module to.
  2. Click on the Add Content button, leave it on the html option
  3. IMPORTANT BIT: Add a title for the module you want to use, the titles are above, they must be added exactly as shown
  4. Type in your content you want
  5. Click the Add button

That's it the module has been added and if you go to that page you will see the content in the header.

Here is an example of how ad module looks to add to a page, take note of the title section.

Well that's it, sounds complicated but do it once and you will see you can add them in seconds.

Have fun

John :-)

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Email me when people reply –

Replies

This reply was deleted.

Search the Creators Network

Latest Activity

Brendon R Culliton replied to Yana Ning Support's discussion Product Plan Update
"So I have an idea as to why I suddenly have a bunch of problems on my website. I believe that with…"
1 hour ago
Cindy Dean Mccoy replied to Yana Ning Support's discussion Product Plan Update
"We had a scheduled chat session tonight.  But it is not working for us.  Hope they can get this fix…"
1 hour ago
Brandyn Shepherd replied to Kyryl_Ning_Support's discussion Chat Feature Update on Ning 3.0 is ready!
"Chat still is not working. Just says its connecting. Left it open for hours and never connected."
1 hour ago
Brandyn Shepherd replied to Yana Ning Support's discussion Product Plan Update
"Chat still not working. Can't imagine what else might not be working after reading some of the comm…"
1 hour ago
Manuel Adame Jimenez replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"Que es Kyryl Este Escudo Rojo Que la venta al principio ☆ ♡ ♤"
2 hours ago
R. Holley replied to Kyryl_Ning_Support's discussion Our Efforts - Your Feedback
"I've been trying forever to get my site to work on a mobile device just like it does on a desktop.…"
5 hours ago
Janice D Carter replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"Brendan,
Have you sent in a ticket?  Your issue seems to be different than ours"
7 hours ago
Brendon R Culliton replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"Can someone confirm if there is something seriously wrong going on in the back end? For some reason…"
7 hours ago
Brendon R Culliton replied to Yana Ning Support's discussion Product Plan Update
"Can someone confirm if there is something seriously wrong going on in the back end? For some reason…"
7 hours ago
R. Holley replied to Bousal's discussion MOBILE
"This didn't work for me. I'm trying to let anyone use a mobile phone to see our site just as they c…"
8 hours ago
Naveen Jain replied to Naveen Jain's discussion Anyone able to use https for their network?
"Keeping this thread alive as https is very important for us. Is there a timeline or should I start…"
8 hours ago
Kos replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"Just insane"
9 hours ago
Janice D Carter replied to Kyryl_Ning_Support's discussion Our Efforts - Your Feedback
"My feedback is pretty basic.  You expect e to pay for my service and that is very fair.  In return…"
9 hours ago
Janice D Carter replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"My ticket went in 17 hours ago "
9 hours ago
Manuel Adame Jimenez replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"If the crazy horse talks ... connecting ...
☆♡♤"
9 hours ago
Janice D Carter replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"YES!  First thing I do is send emails and a FB chat to NING.  If they don't know there is a problem…"
9 hours ago
Kos replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"I think many just complain here and don't send emails........which is a huge mistake.  The more ema…"
9 hours ago
Janice D Carter replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"LOL, well I am awfully glad you reported it Kos, can we all just combine our tickets and all get ba…"
9 hours ago
Kos replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"Low and behold, look what I just got:
I'm really sorry to hear about your issues with the chat feat…"
9 hours ago
Manuel Adame Jimenez replied to Kyryl_Ning_Support's discussion Chat Feature Update on Ning 3.0 is ready!
"I'll wait ... ☆♡♤"
9 hours ago
More…