Add Image or Text Header (below or above menu tabs)

How to add an Image or custom Text block to your Header:

This insertion point will add your custom text either below or above the menu tabs - - depending on your current page setup. For my networks, it goes below.

Note: I will attach 3 files. One contains both custom text, and an image example. The other 2 will contain separated examples - - one with example text, and the other with example of an image.

1. Open 1 of the attached files in an Editor (like notepad) You can even use a Ning text box to make your edits with copy/paste.
2. If you just want to insert text, choose the file with text example. Change the custom text to what you want to display. If you want to insert an image, select the image example file, and change the IMG SRC source to your image path. And for both, select the file for both.
3. Change the attributes, like colors and alignment. Change the text color and background colors to your chosen colors. Also, change the DIV STYLE CENTER TAGs to LEFT, if you want to left align your text or image. You will see 2 TAG parameters. One for text, and one for overall DIV container.
4. Use BR TAG for line feeds. You will see them in the examples.
5. When your file is ready, copy and paste into your Manage/Analytics Box. Click Save. If you already have code in your Analytics Box, make a backup of the original content, before adding any header code.

WARNING: If you do not know what an HTML TAG is, you may not want to try this. This can get tricky. But, if you really pay close attention to all characters in the files, it's actually quite easy to do. The code to create your header is actually written in JavaScript.
Disclaimer: Add at your own risk. This is a hack, as are, all of these type tips.

Note: If you cannot open, or see the JavaScript code in attached files, go to this Note, to retrieve JavaScript Code.

Tags: header, header ad, header image, javascript, ning tips, tip, tips

Views: 307

Attachments:

Replies to This Discussion

Permalink Reply by Magic Happens on February 21, 2009 at 8:27pm
For some reason, l can not see nothing when l click on the files.
Permalink Reply by JenSocial on February 23, 2009 at 11:12am
The attachments are text files. I have looked at all of them, and the text is there when I open them. Maybe if you all try right-clicking and saving to your computer, and then opening them. Maybe your browser is not showing text files. Let me know. I can try and display them in a TAG that shows text in our Discussion boxes. But, often it throws in bad characters.
Thanks,
Jen
Permalink Reply by JenSocial on February 23, 2009 at 12:54pm
Go here to see and retrieve code: Add Header Code
Thanks,
Jen
Enchanted Country Cottage said:
The attachments are coming up blank.
Permalink Reply by JenSocial on February 23, 2009 at 12:55pm
Go here to see and retrieve code: Add Header Code
Thanks,
Jen

Fantasyland said:
For some reason, l can not see nothing when l click on the files.
Permalink Reply by Magic Happens on February 23, 2009 at 6:43pm
l do not know where to go and see a screen shot of what this would look like. l hate to add something unless l can see it.
Permalink Reply by JenSocial on February 27, 2009 at 11:12am
That's Great! One question, it's in Footer/Bottom? This should add a header.
Thanks,
Jen

Medicine Man~*~ said:
Permalink Reply by JenSocial on February 27, 2009 at 11:18am
Hi Fantasyland,
Sorry, I can't add a screen shot, cause this will vary on different sites. What I do: I have a test Ning Network that is private. I have to do all my testing there. You might consider the same. Sorry, wish I could help more on this.
Thanks,
Jen

Fantasyland said:
Permalink Reply by Urnew Connect on March 14, 2009 at 7:02am
Yay I got it to work however I want to add it above the menu and when I enter the code it falls under my menu how do I change this????
Permalink Reply by John G on August 25, 2011 at 8:41pm

Nice Script. I was messing around with this one from Ning http://help.ning.com/cgi-bin/ning.cfg/php/enduser/std_adp.php?p_faq...

 

I have one problem. Even though this working, how do I get this to only load on the main page & not the other pages.

Permalink Reply by JenSocial on August 26, 2011 at 12:23am

Which code are you using John? It's been a long time since I wrote this tip, and not sure without seeing the exact code.

Best,

Jen

Permalink Reply by John G on August 26, 2011 at 8:06am
Permalink Reply by JenSocial on August 26, 2011 at 1:05pm

John,

Give this a try:

<script language="JavaScript">
var insertionPoint = document.getElementById('xg_head');
x$(document).ready(function()  {
if (x$("div.xg_widget_main_index_index").length > 0) {
    var bannerAdHtml = '<div style=" float: center; color: #FF0000; border: 1px; background-color: #DADADA; text-align: center;"><IMG SRC="yourimage"></div>';
    insertionPoint.innerHTML += bannerAdHtml;
}
});
</script>

 

Best,

Jen

RSS

© 2013   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips