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 JenSocial on April 20, 2013 at 10:25pm

Kos, Fire-Tech, Edie,

Am I reading this correctly? Are we having more luck with the simple <style> tag like Edie used? BTW, still won't work for me. Isn't that just crazy?

Best,

Jen

▶ Reply

Permalink Reply by Fire-Tech on April 20, 2013 at 10:34pm

I couldn't get they style to work either. Changed it up a little and works fine in the response I wrote. Things sure have been buggy lately.....

▶ Reply

Permalink Reply by Fire-Tech on April 20, 2013 at 10:40pm

No problem. It's very odd that Jens code didn't work. I have used it before, but then it stopped working. Either way, some of the code we have all thrown out here is the basics, so you can always use it in the future for other things as well. Cold beer sounds good....right there with ya :)

▶ Reply

Permalink Reply by JenSocial on April 20, 2013 at 10:47pm

Yeah, not sure how to edit the tip. LOL Maybe one of us will come up with a common denominator. I'll try to play around with this more, soon.

Wish I had a good glass of wine - - all out! =)

▶ Reply

Permalink Reply by Fire-Tech on April 20, 2013 at 10:55pm

Yeah, looks like they can add it directly with the style tags like we would the metatags in 2.0 instead of a remote sheet. Wouldn't work that way for me, but I haven't see a lot of consistency though. I prefer remote sheets, and got it to work with some minor tweaks.

I don't know what the deal is with the editor either...keeps stripping code & links from my responses and adding underscores (even if I get it right on my network, copy and paste the html into this forum..very strange)....

Have a great weekend my dear!

▶ Reply

Permalink Reply by JenSocial on April 20, 2013 at 10:13pm

Sorry Kos, was out helping with Mom.

Thanks Fire-Tech and Edie!

▶ Reply

Permalink Reply by E.FM Radio on April 21, 2013 at 12:26am

Compilation7

I just wrote a long note and it disappeared except for the link...!! Whoa.

Too discomboobulated to re-do. Love and hugs to all...e

▶ Reply

Permalink Reply by JenSocial on April 24, 2013 at 11:27am

@edie, I hate when this editor does that! The "recover" link was wonderful for a while, and then seemed to not work so good, or even "show".BTW, link isn't working. =)

▶ Reply

Permalink Reply by E.FM Radio on April 24, 2013 at 12:23pm

Jen, that page that I linked to simply disappeared in 3.0. I have absolutely NO motivation for 3.0 now. At least I had my work that I put in there...maybe about 18 pages (mainly music and spotlights of artists) I came in Site & Pages and to my horror there were 4 and 5 duplicates of each page. I deleted the duplicates. Yesterday I went in and ALL of the pages that were duplicated were gone--ie., the original pages. I have not touched it since. Too unstable. Suffice it to say that I am now depressed over 3.0.

▶ Reply

Permalink Reply by JenSocial on April 24, 2013 at 12:27pm

Wow, don't like what I'm hearing here. I pray I don't experience this with a Client's site! So sorry you did.

▶ Reply

Permalink Reply by E.FM Radio on April 24, 2013 at 12:33pm

Thank you Jen. That means alot to me during this. It completely ripped the rug out from under me and makes me afraid to sacrifice anymore time or energy. Just kind of examining it after this happened, I scrolled to the bottom and there is no way to link to the NC's so-called profile page--just to NinGlam... So in essence, we are non-entities in 3.0.

I am still hoping to find out how to export my music in a practical way. That's all I care about at this point.

▶ Reply

Permalink Reply by Kos on April 21, 2013 at 12:56am

No worries Jen. I really was beginning to believe my mental function was going wonky again. Eddie's <style> worked just fine for me in FF 20.0 and appears well in IE and Chrome. Guess I won't have to make a Dr. appt. after all. Boy, am I relieved. Good to hear you're out helping Mom. I miss mine desperately since she's been gone. Enjoy your weekend :)