JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Flash Header Issues

Hi! I'm new to Jen Social, so forgive me if I'm redundant. I do video and graphics work for a company that uses Ning and I've worked on other Ning sites as well.

The site I'm working on is http://www.collisionhub.com

The current header was put in before my boss upgraded to the design studio and is now, potentially, lost in the css. I need to find the css code for the current header, because it overrides anything I put in the advanced css box. I know nothing of css and I'm afraid I'll screw something up if I just go poking around in the developer's css section of the design studio.

Can someone help me kill the current header so that I can add a new flash header via advanced css box?

Does anyone know the proper way to add a flash header via css?

I've been searching google and ning creators/help for many hours and keep running into 404 blind alleys... I'm beginning to think ning has taken all tips regarding flash headers down. All I can find in ning help regarding this is how to upload an image header via design studio.

I'm willing to pay someone to help me do this, if it can be done right. Does Jen Social have a vip forum too? Could I get better assistance if I joined? Considering the holiday deal on membership, I may join just for the slider info...

Thanks! and Happy Holidays!!!

Jeff

0 members favorited this

▶ Reply to This

Replies to This Discussion

Permalink Reply by JenSocial on December 28, 2012 at 6:58pm

Jeff,

You need to know your way around CSS to design a Ning site. The current header swf is being injected via the Custom Code Box - - My Network/Tool/Custom

It looks like this:

var headerSwfUrl = "http://storage.ning.com/topology/rest/1.0/file/get/108668587?profile=original";
var headerSwfWidth = 955;
var headerSwfHeight = 188;
var newHeaderHtml = '<embed src="'+headerSwfUrl+'" width="'+headerSwfWidth+'" height="'+headerSwfHeight+'" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer a href="http://www.macromedia.com/go/getflashplayer%3E" target="_blank">http://www.macromedia.com/go/getflashplayer>; "> </embed>';
var headerElement = document.getElementById('xg_masthead');

//replace the old header with the new one
headerElement.innerHTML = newHeaderHtml;

//change the id as a simple way to remove all css attached to it
headerElement.id = 'newheader';

</script>

You can inject your swf using the same code.

Yes, the VIP Group has a lot of great tips. I don't think there are any tips about flash.
Best Regards,
Jen

▶ Reply

Permalink Reply by Jeff Dempsey on December 28, 2012 at 11:13pm

Ok... should have known. I don't have full access to the custom code with my membership status on collision hub. For some reason I thought they took all code out of the manage area and put it all in the design studio advanced.

I checked another ning site I helped some people create where I have creator cred and I found the custom code under tools...

Hopefully it's problem solved...

Thanks!

▶ Reply

Permalink Reply by Pat Howlett on January 11, 2013 at 8:43am

Jen, we have a similar problem. The Header/Banner was added before we changed to Developer Mode. We simply want to replace the current banner (TheBluePrintforLife.com) with a new one the same size.

Ning Support's assistance was to point me to a Creates thread that only said to upload the new banner via the File manager and point to the files url.

Can you share with me the CSS code that would need to be added to the Custom Design Studio (Varibles or Style) that we need to use to point to this file?

I did search in the VIP area first and thought this thread was the closest to not open a new one. Thanks!!

▶ Reply

Permalink Reply by JenSocial on January 11, 2013 at 12:07pm

Hi Pat,

I'm not quite sure what you mean. Do you want to replace the current static image with another static image? Where does flash come in? I don't have any "set" code to upload flash, sorry. I would have to dig to find my code, and not sure that's what you need. With more clarification, I can probably help out.

Best,

Jen

▶ Reply

Permalink Reply by JenSocial on January 11, 2013 at 12:34pm

Pat,

If you just want to replace the static header image...

From Ning Design Studio/Developer Mode - How To Replace Original Header (Network Logo) Image (originally uploaded via Design Studio/Customize/Header/Network Logo):

First, upload your new header image via "File Manager", or insert/upload using a new Blog, clicking on Insert Image icon. You don't need to save Blog.
Click on HTML button if using Blog method.
Blog or File Manager Method - Locate the full image URL starting with "http://api.ning.com/files/..." and ending with your file name.
Copy the entire URL.
Paste it below, replacing the current background-image.
From Design Studio/Developer Mode under the LESS Variables, search for: @ning-site-name-background-image:
After you replace the image URL, save.

Whether this is what you need or not, I need to write a tip on this. I can see where this could be very confusing.

Hope that helps,

Jen

▶ Reply

Permalink Reply by Pat Howlett on January 11, 2013 at 12:58pm

Hey Jen, sorry for the confusion - what I need was the "@ning-site-name-background-image:" - I was confused that it was called the "background"

Just to be clear this will change the header/banner that we have at the top (theblueprintforlife.com) - is that correct?

On a side note: Being a member of your VIP Club is the best investment we made all of last year - I can't think of anything we have that provides more REAL value. Thank you!

▶ Reply

Permalink Reply by JenSocial on January 11, 2013 at 1:57pm

Hi Pat,

awww, great to hear about the VIP value!

Yes, that is correct. This will replace the header/banner. When you look, to feel safe about it, copy/paste the current URL to your browser address bar. You should see your current image load.

Best Regards,

Jen