JenSocial: Social Web Directory and Ning Tips

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

Ning 3.0 - How to Style a Ning 3.0 Custom Page with Linked Style Sheet / CSS (i.e., Add Background to Custom Page)

First, I have to give credit to my friend edie2k2 for peaking my curiosity on adding a unique background to a new "Custom Page" on Ning 3.0. This tip will help you style a Ning 3.0 Custom Page, since Ning hasn't yet (as of 4/6/2013) provided unique CSS selectors to differentiate between "Custom Pages", and hasn't given us our Custom Style box, like on "Pages" for Ning 2.0. I do believe Ning will offer this in the future.

I wouldn't have thought to try this. Thanks Edie!

Until Ning offers us an area to add Custom CSS for our "Custom Pages" - - How to Style a Ning 3.0 Custom Page with Linked Style Sheet / CSS, like adding a Custom Page Background Image:

You will need to know how to:

Write simple CSS, and create a CSS file.
How to upload your CSS file to a server, or via a Ning blog.
How to copy/paste (grab) the CSS file path.

Short Instructions for Advanced Users:

When your CSS file is ready, replace the CSS path below (yourfile.css) with the file path for your CSS.
<link rel="stylesheet" type="text/css" media="screen,projection" href="yourfile.css">
From your Custom Page via: Social Site Builder/Sites & Pages/Custom Page/HTML Box
Critical: You must add an HTML block to your Custom Page Layout. "Add Content/HTML".
Click on HTML button.
Add the code above.
Save.
I was able to add several modules to my Custom Page, and the one HTML block that contains my linked CSS file, is styling the entire page.

Instructions for Less Advanced Users - (includes How To Create your CSS File):

Create your custom style sheet (CSS).
You do this by adding the same type CSS code you would add to your Custom CSS Box. Instead, add the CSS to a plain text file, via a Text Editor.
Name the file yourfile.css. The dot css extension must be used.
Upload yourfile.css via File Manager or a Blog.
1. When your CSS file is ready, replace the CSS path below (yourfile.css) with the file path for your CSS.
2. <link rel="stylesheet" type="text/css" media="screen,projection" href="yourfile.css">
3. From your Custom Page via: Social Site Builder/Sites & Pages/Custom Page/HTML Box
4. Critical: You must add an HTML block to your Custom Page Layout. "Add Content/HTML".
5. Click on HTML button.
6. Add the code above.
7. Save.
8. I was able to add several modules to my Custom Page, and the one HTML block that contains my linked CSS file, is styling the entire page.

Example - Create a CSS Style Sheet to Add Background Image to Ning 3.0 Custom Page:
The example below will show you how to create CSS to add add a background image to your specific Custom Page.

Create, or have a background image ready.
Upload your background image to an image server, or to Ning via a Blog or File Manager.
Instructions on how to add image via a Ning Blog are bulleted below.
- Add a new Blog.
- Click on "Attach File" to the right of the camera/photo icon.
- Browse your Computer and locate the image file.
- Upload/Add File.
- After the file is uploaded to the blog, click on the HTML tab.
- Locate the image path immediately following: a href=".
- Copy the full link not including the quotes or other HTML, by pressing Ctrl + C (for copy).
Add the code below to a text file using a Text Editor like notepad.
Change the image file path (yourbackgroundimage.jpg) to your image path. You can press Ctrl + V for paste.
Save your CSS file.
Follow the exact same instructions at top of this tip, to upload the CSS file, and add to your Custom Page.
You should see your background image on the specific Custom Page, where you added code to the HTML Box.

Example with no repeat and scroll:
body {
background:URL ("yourbackgroundimage.jpg") no-repeat scroll 0 0 transparent!important;
}

Another example with repeat and fixed:

body {
background:URL ("yourbackgroundimage.jpg") repeat fixed 0 0 transparent!important;
}

This code would be saved to a CSS file.

Enjoy!

Jen

2 members favorited this

▶ Reply to This

Replies to This Discussion

Permalink Reply by E.FM Radio on April 6, 2013 at 5:14pm

Hey Jen! I don't know what I'm doing wrong: I put this in the HTML Content Box:

Can you tell me?

▶ Reply

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

Your syntax is correct. But not working for me either. Let me see if I can figure out what happened.

▶ Reply

Permalink Reply by JenSocial on April 6, 2013 at 7:02pm

Craziest thing, and I can't figure out why. If I use your image path, even directly in firebug, it will not work. Yet, if I use your image path from your other page, it works fine. Sooo, this would tell me that the image path if typed directly in browser address bar wouldn't display. But, it does. Something about that path, Ning doesn't like. So, I uploaded your image to Ning api, and recreated your css file. Same thing! It will not work. So now, I have to think it's the image. Working on that possibility now.

▶ Reply

Permalink Reply by E.FM Radio on April 6, 2013 at 7:30pm

I got tired of fiddling with it and thought of another easier code to use and you can put it right in the html box with the other html...:

<STYLE>body{background: url(yourimage.jpg?width=1024&height=768&xn_auth=no&type=jpeg) fixed}</STYLE>

Works fine but won't center too good. I don't care at this point...LOL! You are a genius regardless! ((hugs)) I never would have thought of this w/out you!

Thank you! Gracias!

DubWorld | Spotlight On Chris Botti | Spotlight On Maxwell | Main Page - E.FM

Edie

▶ Reply

Permalink Reply by JenSocial on April 6, 2013 at 7:59pm

That's interesting. I definitely tried the style tag before writing the tip. It wouldn't work for me. But, good to know it worked for you.

Love Snoopy! =)

▶ Reply

Permalink Reply by E.FM Radio on April 6, 2013 at 8:22pm

LOL! Yeah...it works for me. I have Firefox. I do know that every time that I go into the content box the code has changed itself. I hate that.

▶ Reply

Permalink Reply by E.FM Radio on April 6, 2013 at 8:51pm

I went on and deleted the Tip I had just put up on the Style Code. If you can't see it it's not good. I'm just glad it works for me. Now I am curious...can you see the style code backgrounds that I did or not??

▶ Reply

Permalink Reply by JenSocial on April 6, 2013 at 9:00pm

Don't know, what's the link?

▶ Reply

Permalink Reply by E.FM Radio on April 6, 2013 at 9:56pm

E.FM Sandbox 3.0 | Dub World | Chris Botti | Maxwell

I need to do some tweaking (as usual)...but I need to know you can at least see the backgrounds.

Thanks again for you time and help today Jen.

Pleasant Night~Edie

▶ Reply

Permalink Reply by JenSocial on April 6, 2013 at 10:07pm

Perfectly! They all look great. I really need to get to bottom of, why <style>css</style> tag is working for you, and not for me. I like the idea of linked CSS if a lot of code is used. But, for just a background, would make this tip so much easier. The style tag was the very first thing I tried today, when you got me curious about it all.

Have a good night,

Jen