headings - FORUM - Ning Creators Social Network2024-03-28T08:30:40Zhttps://creators.ning.com/forum/topics/feed/tag/headingsLiven Up Your Sub Tabs With Headings Updated: Full Code Added For All Colours 05-02-17https://creators.ning.com/forum/topics/liven-up-your-sub-tabs-with-headings-subtab-headings-demo-code-fo2017-02-02T00:26:55.000Z2017-02-02T00:26:55.000ZBizz ( John )https://creators.ning.com/members/Bizz<div><p>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.</p>
<p>If you want to see what I am talking about if you go here : <a href="http://bizzssite.ning.com/" target="_blank">http://bizzssite.ning.com/</a> 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.</p>
<p>Ok let's get started</p>
<p>How To Add Them</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>Images are below to show how you add the options to the page but here is the settings you would use</p>
<p><span style="color: #000000;"><strong>Add Heading Type In ( Always add the stHeading first }</strong>Tip: If you just want to add a non clickable heading using your own site colors then just add the stHeading</span></p>
<p>Type this first</p>
<p>stHeading</p>
<p>Then add your options to it so for a black heading we would type</p>
<p>stHeading/black</p>
<p>And save the page and your done. You will now have a heading. You can come back and change it at anytime.</p>
<p>If you want to change the text you simply add another option to the list like this</p>
<p>stHeading/black/textwhite</p>
<p>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</p>
<p>stHeading/black/textbold and if you are changing the text as well it would look like this stHeading/black/textwhite/textbold</p>
<p>Again you can come back and change these options at any time.</p>
<p>Ok so here this is in images</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558659?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558659?profile=original" class="align-full" width="576"></a><a href="http://storage.ning.com/topology/rest/1.0/file/get/558680?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558680?profile=original" class="align-full" width="581"></a><a href="http://storage.ning.com/topology/rest/1.0/file/get/558694?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558694?profile=original" class="align-full" width="579"></a><a href="http://storage.ning.com/topology/rest/1.0/file/get/558724?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558724?profile=original" class="align-full" width="576"></a></p>
<p>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.</p>
<p>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.</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558740?profile=original" target="_self">subtabheadersscript.js</a></p>
<p>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.</p>
<p>3. Next add this into the line of code below where it say's add you link here.</p>
<p><script src=" ADD YOUR LINK HERE FROM THE FILE MANAGER " type="text/javascript"></script></p>
<p>4. Copy this whole link into your site and pages custom code end of page section.</p>
<p>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.</p>
<p>Color Chart Codes</p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/558734?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/558734?profile=original" class="align-full" width="200"></a>Text Codes</p>
<p>Black = /textblack<br> White = /textwhite<br> Gray = /textgray<br> Red = /textred<br> Yellow = /textyellow<br> Blue = /textblue</p>
<p>Bold = /textbold</p>
<p>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</p>
<p>/* Adding the down arrow */<br> .stCategory > a:after{content:'\21B4' ;font-size:30px;font-weight:bold;position:absolute}</p>
<p></p>
<p></p></div>Font Tip: Add Effects To Your Imported Google Fontshttps://creators.ning.com/forum/topics/font-tip-add-effects-to-your-imported-google-fonts2013-11-06T00:18:23.000Z2013-11-06T00:18:23.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>If you have been looking for a simple way to add typographic effects to your headings, titles, etc. here is a tip for you. NOTE: This tip is for NCs who have imported Google Custom Fonts into their networks.</p>
<h3>Add Style and Depth to your Type, Easily</h3>
<p><a href="https://developers.google.com/fonts/docs/getting_started#Effects" target="_blank">Google Fonts</a> has silently released a Beta feature for adding Font Effects to your imported fonts.<br> <a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/556512?profile=original"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/556512?profile=original" alt="Google Font Effects" width="449"></a></p>
<p>Normally, the types of effects that I am about to show you must be achieved using <a href="http://creators.ning.com/forum/topic/search?user=1m2dr5qvmy2ve&q=CSS3" target="_self">CSS3 styling</a>, but Google has made this easier for you.</p>
<p>To use this new beta feature, simply add effect= to your Google Fonts API request and add the corresponding class name to the HTML element(s) that you want to affect. In our example above, we used the shadow-multiple font effect, so the request would look like:</p>
<div style="padding: 5px; border: 1px solid black; background-color: #eaeae4;">
<br>
<a rel="nofollow" href="http://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple">http://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple</a>
</div>
<p><br> To use the effect, add the corresponding class name to your HTML element(s). The corresponding class name is always the effect name prefixed with font-effect-, so the class name for shadow-multiple would be font-effect-shadow-multiple:</p>
<div style="padding: 5px; border: 1px solid black; background-color: #eaeae4;">
<div class="font-effect-shadow-multiple">
This is a font effect!
<div>
</div>
<br> You can request multiple effects by separating the effect names with a pipe character (|).
<div style="padding: 5px; border: 1px solid black; background-color: #eaeae4;">
<br>
<a rel="nofollow" href="http://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple">http://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple</a>|3d-float
</div>
<br> Here is a complete listing of all the font effects offered by Google (
<a rel="nofollow" href="https://developers.google.com/fonts/docs/getting_started#Effects" target="_blank">go here to get effect codes</a>)
<br>
<a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/556568?profile=original"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/556568?profile=original" width="417"></a>
</div>
</div>
<p>If you ever find that you need help with your Network redesign or simply adding some interaction to your network, <a href="http://creators.ning.com/profile/ElSurveyor" target="_self">send me a message on my profile</a> or give me a call. I'm happy to help and look forward to seeing what you have done!</p></div>