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

Forum

I posted a few days ago about being able to add headings to your subtabs to help liven them up or to be able to seperate items in the list or simply to add a short message somewhere like 'Site Rules' or something like that.

If you want to see what I am talking about if you go here : http://bizzssite.ning.com/ and take a look at the menu and hover over the SubTab Demo Blog link you will see a small subtab menu drop down and here you will see 3 headings. If you hover over the SubTab Colours one you will see all the pre-made headings ready to use.

Ok let's get started

How To Add Them

To add a heading or headings we are going to use the Link option in our site&page. So you go to your site and pages list then choose +Add Page. In the options choose Link.

Now you will have a page show up with a couple of options to fill in. We add the Title we want for our heading in the Title box and then in the url box we are going to add our heading options. There is no need to type http or anything like that. It will add that when we save but the code will disable the link so it can't be clicked to go anywhere.

When you save the page it will be at the bottom of your site and pages list so unless the page above it is the page you want this to be a subtab for you need to move it to where you want it, just click and drag it the position you want it just like any other page. The click on it so it shows in the irght side and check the box to make it a subtab. If you already have a list of subtabs and adding it to that list it automatically becomes a subtab.

Images are below to show how you add the options to the page but here is the settings you would use

Add Heading Type In ( Always add the stHeading first }Tip:  If you just want to add a non clickable heading using your own site colors then just add the stHeading

Type this first

stHeading

Then add your options to it so for a black heading we would type

stHeading/black

And save the page and your done. You will now have a heading. You can come back and change it at anytime.

If you want to change the text you simply add another option to the list like this

stHeading/black/textwhite

The bold setting can be used at anytime without having to use the textcolor option. For example to make the black heading text bold we simply type this

stHeading/black/textbold  and if you are changing the text as well it would look like this  stHeading/black/textwhite/textbold

Again you can come back and change these options at any time.

Ok so here this is in images

A file has been added with all the code, as it's quite a bit we are going to add this to our file manager then link to it in the custom code.

1. Right click on the link and choose save as. Save it to a place easy to find for adding to your file manage, make sure you do not change the file type as it should be a javascript file type.

subtabheadersscript.js

2. Now go to your site and pages and add this file to there in the file manager. Once added click on the copy link and copy this to notepad or similar text editor.

3. Next add this into the line of code below where it say's add you link here.

<script src=" ADD YOUR LINK HERE FROM THE FILE MANAGER " type="text/javascript"></script>

4. Copy this whole link into your site and pages custom code end of page section.

That's it, you will now be all ready to go and add your headings. Below you will see an image with all the colours and thier relevent codes for adding them. Under this is the text codes if you want to change the text as well according to the instructions above.

Color Chart Codes

Text Codes

Black = /textblack
White = /textwhite
Gray = /textgray
Red = /textred
Yellow = /textyellow
Blue = /textblue

Bold = /textbold

If you want the down arrow for the category heading added when ever you add this as a heading then add this to your CSS

/* Adding the down arrow */
.stCategory > a:after{content:'\21B4' ;font-size:30px;font-weight:bold;position:absolute}

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

Join Ning Creators Network

Email me when people reply –

Replies

  • NC for Hire

    beautiful tip Bizz.. thank you!

    • Thanks, going to re-code it over the weekend before I add the full version of all colours to try and lesten the code and make it lighter. I have also added a little css to my menu so it adds a small gap between sections which have headers in them so they are more like a little block of tabs.

      Now I know that the link does not really have to be an actual link in the input box I have tried a few other ideas out with it which I hope to add soon.

      John :-)

  • Updated this so now you have all the code for the full colour range.

This reply was deleted.

Search the Creators Network

Latest Activity

Kyryl_Ning_Support replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Hi John,
You shouldn't have, but I should admit that it will be easier for the management to look t…"
28 minutes ago
Beatriz Martín replied to Dan Porter's discussion Multiple Group Hubs
"thx, kos! :)"
32 minutes ago
Tony Rosa is now a member of Ning Creators Network
54 minutes ago
Kos replied to Dan Porter's discussion Multiple Group Hubs
"Beatriz if you need something special designed beyond the ordinary, I would recommend you post your…"
9 hours ago
Garfield Archivist replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Thank you. I appreciate the response and understand you needed to discuss with developers.
I find i…"
9 hours ago
Beatriz Martín replied to Dan Porter's discussion Multiple Group Hubs
"Hello.
I would like to know how this feature is done or which creator could help me.
Thx!!"
15 hours ago
Bizz ( John ) replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Thanks Pat :-)
Yes it is a nice addition but I do wish a little more QA was done before releasing f…"
15 hours ago
Bizz ( John ) replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"I have re-uploaded this video so you can see it showing the green screen in the list page and also…"
15 hours ago
Bizz ( John ) replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Thanks for the reply Kyryl. I have addressed all the issues in a single post for you to look at her…"
15 hours ago
Danny Lynn replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
""
17 hours ago
Danny Lynn replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
"Thank you ning team,  I Am not a owner at Media Center just member 4 years, i do link that page to…"
17 hours ago
Pat Howlett replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Great addition Ning Team and I appreciate Bizz John taking the time to jump in and assist in findin…"
17 hours ago
Kyryl_Ning_Support replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
"Hi Daniel,
We do apologise for the inconveniences at this moment developers are working under the i…"
20 hours ago
Kyryl_Ning_Support replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Hi John,
Regarding the video resolution, after the video has been uploaded, all of them are convert…"
21 hours ago
Kyryl_Ning_Support replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"XDD"
22 hours ago
Kyryl_Ning_Support replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Hi there,
Sorry for delayed reply, it was necessary to take a hold of developers to find out the an…"
22 hours ago
Kyryl_Ning_Support replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Hi John,
About the video that had only green screen background instead of the video itself. we have…"
22 hours ago
Irvin Carrero, Alison Pert and Shanelle Reed-Keahi joined Ning Creators Network
23 hours ago
Ian replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
"And now our 'space invaders' top nav bar gif crapped out!  Here's the original:"
yesterday
More…