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.