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

Dan Lee replied to Dan Lee's discussion I Will Design Your Ning Network To Make it Look More Professional
"No it not."
11 hours ago
Dan Lee replied to Bizz ( John )'s discussion Adjusting Your Videos List Page Metadata Section Colours
"THIS CODE DIDN'T CHANGE THE COLOR FOR MY SITE"
11 hours ago
Dan Lee replied to Bizz ( John )'s discussion Adjusting Your Videos List Page Metadata Section Colours
"OK, I FOUND IT :)"
12 hours ago
Alliance replied to Dan Lee's discussion I Will Design Your Ning Network To Make it Look More Professional
"http://deeday504.com/ is a NING site?"
12 hours ago
Bizz ( John ) replied to Bizz ( John )'s discussion Video Issues Again For Embed Videos Showing Blank Box
"Here you go Dan this should fix you up
http://creators.ning.com/forum/topics/adjusting-your-videos-&he...;"
18 hours ago
Dan Lee replied to Dan Lee's discussion I Will Design Your Ning Network To Make it Look More Professional
21 hours ago
Hantz Jeanlouis is now a member of Ning Creators Network
yesterday
Traddie replied to Dan Lee's discussion I Will Design Your Ning Network To Make it Look More Professional
"Do you have examples of other sites you have designed?"
yesterday
Bizz ( John ) replied to Bizz ( John )'s discussion Video Issues Again For Embed Videos Showing Blank Box
"I have a fix for this. Will post it as a tip when home later this evening.
John :-)"
yesterday
Ning via Facebook

#unitewithNING Ning`s conquering Internet: follow our new Google+ page here!…

Dan Lee replied to Bizz ( John )'s discussion Video Issues Again For Embed Videos Showing Blank Box
"ANY FIX FOR THE COLOR OF THE TEXT, FOR THE NEW VIDEO FEATURE? WHEN I ADDED IT TO MY HOME PAGE I GOT…"
yesterday
Garfield Archivist replied to Bizz ( John )'s discussion Ning: Is it possible to enable the comments form on posted videos like we can for photos in activity feed.
"Me Three"
yesterday
⚡JFarrow⌁ replied to Bizz ( John )'s discussion Ning: Is it possible to enable the comments form on posted videos like we can for photos in activity feed.
"i second that"
yesterday
Ning via Facebook

#inspirewithNING #dj Feel inspired with cheerful spring and joyful minutes, filled with sounds…

Kos replied to Anastasiia_NING support's discussion Ning 2Q 2017 plan!
"What, in 2.0 themes, do you want Tony?  Most can be replicated with simple CSS.  Can you be more sp…"
yesterday
Kos replied to Bizz ( John )'s discussion Ning: Is it possible to enable the comments form on posted videos like we can for photos in activity feed.
""
yesterday
Bizz ( John ) replied to Bizz ( John )'s discussion Videos Playing In Activity Feed, check it out on my site, Now shows photos to ( Updated: 27-04-17 )
"Added some more updates on this so it works with photos now also."
yesterday
Tim Frank replied to Anastasiia_NING support's discussion Ning 2Q 2017 plan!
"Thank you for the answer. My only regret is that it took just short of a month to get an empathetic…"
yesterday
Kyryl_Ning_Support replied to Bizz ( John )'s discussion Ning- Your design studio widget images are not loading
"Thanks, John,
I have posted the info about the fix of the embedded videos under more appropriate po…"
yesterday
Bizz ( John ) replied to Bizz ( John )'s discussion Video Issues Again For Embed Videos Showing Blank Box
"Yes I noticed that but I don't think that's a big issue as at least the embeds are working now and…"
yesterday
More…