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 Network to add comments!

Join Ning Creators Network

Email me when people reply –

Replies

This reply was deleted.

Search the Creators Network

Latest Activity

Ian replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
"Don't let our temporary fix fool you regarding the background (side) image.  NING is still not prop…"
3 hours ago
Jen replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
"I just spent the past hour helping Ian troubleshoot this issue. The Ning platform is definitely bre…"
4 hours ago
Ian replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
""STRANGE FACT: SINCE WE PUT THE 'CHUCK BERRY' ANIMATED GIF ON THE HOME PAGE ALL OTHER ANIMATED GIFS…"
6 hours ago
Ian replied to Bryce Rubio's discussion A Follow-Up Message from our CEO
"In fact, all of our animated gifs are disabled except for a small few, and now we can't upload any…"
6 hours ago
Ian replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
"Gifs have apparently been deactivated across the board, except for a couple.  Strange.  Help."
6 hours ago
Ian replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
"In fact, we can't upload any new animated gifs apparently."
6 hours ago
Ian replied to Bryce Rubio's discussion A Follow-Up Message from our CEO
"Hello Bryce, recently our side image is not uploading properly and our top bar animated gif and hea…"
7 hours ago
Nieve replied to Bryce Rubio's discussion A Follow-Up Message from our CEO
"Like several people who spoke here, I have my Ning Network 2.0 since January 2009. It is a small, n…"
16 hours ago
George H. Compton IV replied to George H. Compton IV's discussion ( TIP N3 ) Allow your members to add CSS codes to the new profile text box.
"It looks like Ning is having problems with their text boxes :-( I can't even save plain text in the…"
16 hours ago
Aurora replied to George H. Compton IV's discussion ( TIP N3 ) Allow your members to add CSS codes to the new profile text box.
"I could not figure out where to put the code so it can work"
yesterday
Aurora replied to AnGella's discussion Ning 3.0 Tip: Add CSS to Member Profiles
"I think this does not work anymore I tried to do it but it did not work, it only worked if the memb…"
yesterday
Bizz ( John ) replied to Bizz ( John )'s discussion Why Are The Events Not Listing The Same Way As UpComing In My Events Or Categories ?
"Unless I am mistaken it looks like this has been fixed today. ( Sat 25/03/17 )"
yesterday
Thisisbully replied to Mike Collins's discussion Ning Development - Roadmap
"a lot of stuff has been added they just didn't post it yet .For instance the comment wall in groups…"
yesterday
Alliance replied to Mike Collins's discussion Ning Development - Roadmap
"i agree a roadmap from April would be appreciated if you could. It gives us time to decide on work…"
Friday
Kos replied to Bizz ( John )'s discussion Why Are The Events Not Listing The Same Way As UpComing In My Events Or Categories ?
"Yes sir"
Friday
More…