JenSocial: Social Web Directory and Ning Tips

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

Ning 3.0 - Creating Your Logo and a Full Width Background Header - the "responsive" way:

Ning 3.0 - Creating Your Logo and a Full Width Background Header - the "responsive" way:

Adding a Logo and Header Background can be a tricky proposition when working with responsive design. I now of course know why the Ning theme CSS forces the width of the Logo. This prevents your logo from only showing a percentage of the width when your site is displayed on a mobile device. I don't agree with the forced height, but another topic of conversation.

Prepare Your Logo Image:

Your best bet if you want to add a full width banner image - - upload as your background image under Header (not body Background). We'll do this last.
First step, prepare or create your Logo. And preferably just the Logo Text.
Make sure it is no more than 299 pixels in width. The theme I'm currently working with, I needed to go 135px in height, or add custom CSS. Just so happens, the 135px works for me well on this design.
You want to add your logo with Design Studio/Header/Upload Logo Image
Once you've uploaded the logo, hop over to your mobile device, and see how it looks. Does it "land" in the right place? If not, work with it, until it does.

Now, Create Your Full Width Header/Banner.

Go ahead and use the full width of the responsive grid: 960px (Note: I may change this to 940px later. For now, 960 px works well for me.)
Make sure you have left plenty of room at left of banner image, to "lay" your logo on top of it - - an empty space.
Upload your banner image via Design Studio/Header/Upload Background Image
I had to add the background position so the left side of my banner image shows on the mobile view.
Add this code to your Custom CSS:

header {
background-position: left top;
}

You'll probably have some tweaking to do. But, this is the best way to add a logo and a full width banner image. Why?

It gives your users a hyperlink when clicking on your logo - - to access your home page.
It keeps your logo intact and in full view from a mobile device.
Instead of limiting yourself to using only 299px to accommodate mobile device, you can take advantage of the background to bring your logo to life.
Once you play around with these steps, you'll "get" why this is a good way to go. =)
You could just upload the entire banner as one piece (Header/Background Image), making sure your logo is in the right place at left of banner. But, with responsive resizing it can get messy. By laying your logo on top of the banner, you'll offer a better User Experience and a neater site design.

Alternative Method:

If you want, you can simply make your background 960px minus 299px (width of logo area). This would be 661px in width. I would go with approximately 625px tops, for white space between your logo and your header background image.
Upload your Background Image as explained above.
Use this code for position:

header {
background-position: right top;
}

I haven't tried this method yet. But, in theory, it should work.

Hope this helps someone.

Best,

Jen

1 member favorited this

▶ Reply to This

Replies to This Discussion

Permalink Reply by Writer Chick on April 4, 2013 at 2:47pm

Jen,

I know you are extremely busy learning this new platform (along with everything else), but I was wondering if you could post this tip on Creators.

The header is usually one of the first things people start with when they go to work on their new sites. A lot of creators are expressing frustration with how to do one (rightly so!) and your tip is one of the best one's I've seen. (Plus, trying to find anything on the forum right now is just useless. The complainers are spamming the threads continuously and burying good tips so they can't be found.)

This tip isn't a premium tip, is it?

If it isn't could you possibly post it in the Niing 3.0 Tips and Tricks category on the forum?

If you don't have time to fool with it, I could copy and paste it for you (giving the credit to you, of course) with your permission.

But perhaps you don't want to post a tip and then have to support it. I understand that too.

Just a suggestion.

Huggs,

Diane

▶ Reply

Permalink Reply by JenSocial on April 4, 2013 at 7:06pm

Hi Diane,

Forgive my brutal honesty on this one. I might in a week or so. Quite frankly, I'm tired of giving all of my tips/traffic to Creators. And, I'm almost embarrassed to add tips to all the garbage now added to Creators - - so much crap. In the beginning is was a great exchange, good honest people, good tips from others, etc...At this point, not sure the pros outweigh the cons. They can always come here for the tip. But, since you've asked, I probably will. =) Let's give a little while longer.

Best to you as always,

Jen

▶ Reply

Permalink Reply by Writer Chick on April 4, 2013 at 7:32pm

I totally understand where you're coming from, Jen. Not a problem at all. And if you don't want to post it, then that's perfectly fine. You certainly don't have to just because I asked. LOL That won't bother me at all. I always come here for all the good tips anyway. Everyone else should, too.

You're right. Things have really changed alot since I first came to the forum three years ago. So many people helped me when I knew absolutely NOTHING. I'm surprised, but thankful, they had the patience to fool with me.

Eh, don't worry about it. You have a lot on your plate, hon.

Thanks for the response!

▶ Reply

Permalink Reply by JenSocial on April 4, 2013 at 10:43pm

Thanks, Diane. =) Always love to hear your thoughts. Please keep them coming.

▶ Reply

Permalink Reply by Fire-Tech on April 4, 2013 at 10:32pm

I'm thinking VIP tips. Easier to identify code pirates....Gaaaarrrr!

Couldn't help myself :)

▶ Reply

Permalink Reply by JenSocial on April 4, 2013 at 10:42pm

Fire-Tech, LOL, arrrrrr Matey!

I'm just completely burned out and disgusted with Creators at the current moment, and I'll stop there. ;-)

I'm working on the new VIP Club, learning 3.0, and Client Projects.

▶ Reply

Permalink Reply by Fire-Tech on April 4, 2013 at 11:09pm

I agree about Creators and look forward to new group (some of us are still good). Right there with you on being super busy...but always trying to find the silver lining. Don't work too hard my dear :)

▶ Reply

Permalink Reply by JenSocial on April 4, 2013 at 11:36pm

Oh, for once I actually wasn't complaining, LOL. I was just letting you know what I was up to. Have a great Friday and weekend!

▶ Reply

Permalink Reply by Fire-Tech on April 5, 2013 at 7:26pm

▶ Reply

Permalink Reply by Writer Chick on April 5, 2013 at 7:05am

Yep, Fire-Tech, if I had HALF the knowledge Jen did, I would put it ALL in the premium tip group. I wouldn't give any of it away for free. LOL

▶ Reply

Permalink Reply by Fire-Tech on April 5, 2013 at 7:21pm

That's why I haven't posted any 3.0 tips yet either. Save it for VIP. BTW, I'm glad you still keep your old profile pic on here. Always makes me smile for some reason :)

Have a great weekend ladies!