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 9:43pm

I had a ball today and learned something. You know your stuff and I appreciate you. We all do!

Thank you Jen! ♥

▶ Reply

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

Great, nice to hear! =)

▶ Reply

Permalink Reply by Kos on April 20, 2013 at 8:33am

Jen I have tried all week, reading it over and over again and I still cannot get this one right. I know you've tried to make it as step-by-step as possible. Are we literally uploading twice to File manager? First with the original jpg image and then, once that URL is in notepad, changing the .jpg to .css (saving to Notepad) and upload that a 2nd time in File Manager? Then using that URL to place within the code and HTML content box?

You totally lost me also at the end as well on the "body" part.

Seriously fighting back the tears at this juncture b/c I had a minor stroke some years back and I almost wonder if my inability to comprehend and execute tasks is re-emerging. Oh how I hope not. It's so incredibly annoying, I cannot tell you.

I wish Ning would just make it easier to select a diff. background for pages; period. This is nutty (or it could just be my brain function).

▶ Reply

Permalink Reply by Kos on April 20, 2013 at 4:24pm

I even tried the code you gave Edie on page 2 here and pasted it into a HTML content box. It worked for a few hours and then stopped working. (using Firefox 20.0)

▶ Reply

Permalink Reply by E.FM Radio on April 20, 2013 at 6:11pm

Kos...I tried with Jen's and couldn't get it...then I re-tried the style background html and it works on all of my custom pages. I wonder if it would work for you? I use Firefox 20.0 also.

<STYLE>body{background: url(http://storage.ning.com/topology/rest/1.0/file/get/14604169?profile...) fixed}</STYLE>

Let me know...

Edie

▶ Reply

Permalink Reply by Fire-Tech on April 20, 2013 at 6:25pm

Good idea:)

I noticed the same thing. It's still pretty buggy. I have some other work-arounds too, but don't think I'll put too much effort into it until we get more selectors.

▶ Reply

Permalink Reply by Kos on April 20, 2013 at 7:06pm

That did it. <style> worked on FF, IE and Chrome. *whew! Huge sigh of relief. I feel as if the weight of the world has been lifted off of my shoulders. Thank you so very, very much.

▶ Reply

Permalink Reply by E.FM Radio on April 20, 2013 at 7:13pm

That's great! Thanks for letting us know...

Edie

▶ Reply

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

Gosh Guys,

Sounds like I did a horrible job on this one! Trying to catch up on the discussion. All I remember is, the <style> tag wouldn't work for me, but did for Edie. Sorry for any trouble this has caused.

Best,

Jen

▶ Reply

Permalink Reply by Fire-Tech on April 20, 2013 at 5:15pm

Forgot to mention that "body" is kind of like "your website". So we are basically changing the background to your website...

▶ Reply

Permalink Reply by Fire-Tech on April 20, 2013 at 5:36pm

The stupid text editor keeps stripping my code & links when I post this. Here's my tip for you that's not broken...

(original reply)

Hey Kos,

You kind of have to think of it in 3 steps.
When you add code to your Custom Code or Advanced CSS, it's usually for your entire network or multiple parts of the network...right? There are ways to customize individual pages (and other things) by hiding code in the page (that nobody can see) that references a style sheet that you have also upload to the file manager. When you do this, it will override the CSS for the page you have the hidden reference code in.

1- Load images into your file manager, so they are on Nings servers that can be called upon. Keep them in their normal format (Jpeg, Png...etc). If you are using large images, you should optimize them in Photoshop or an online image optimizer to reduce the file size first.

2- Create a CSS sheet / file that will hold the CSS changes you want. You can think of it like a saved document that acts like your Advanced CSS box. When the style sheet is referenced with the "hidden link code", it will use the code in your document for anything you changed instead of what's on the page. Write the code in the remote style sheet just as you would if you were to add it to your advanced CSS section.

They key is to make sure you save the doc as a .CSS file. If you don't have Dreamweaver, you can still make a style sheet (CSS) with a regular text file using Notepad on your computer or download a text editor. Don't use Microsoft Word or similar programs that may add additional formatting. If I'm not using Dreamweaver, I use Komodo Edit as another program to copy and paste between the two when I'm messing around. They have a free version that's handy.

Once you put the CSS changes you want into the text document, save it and then change the file extension.

Example:
KOSremotefile.txt
Rename it to
KOSremotefile.css

Now you have a document that holds the Ning pages CSS changes you want, and it's in a CSS format so it can be used. Upload that CSS file to your file manager so that it can be referenced.

3- Now you just need to add the hidden "reference" code to the page you want. It can be in a box with other content since it's hidden. Just make sure you are in HTML view when you add the hidden code.

Here's an example I threw together for you to hopefully make sense....

1- I want to change the background of a specific page.....and say... remove the header as well.
Upload the background picture I want to my file manager so I can copy the url and put in the remote style sheet (text file).
We'll say this one that I'm currently messing with:
http://api.ning.com/files/MyF4ZQ2dSLiGU3JsumFyiRtrHigQ4On1EA6e2-EHI...*tAmiD3mJLzPnkyxhh8M54OapGOCexj7/3.0Header4192013NewOne2.png

Now create a CSS file using one of the methods I mentioned above and add the CSS code for the body background:

body {background-size:100% 100%; background:url(yourbackgroundimage.jpg)fixed center top!important;}
Insert the url for the background image you uploaded, into the code (replace the "yourbackgroundimage.jpg").

body {background-size:100% 100%; background:url(http://api.ning.com/files/MyF4ZQ2dSLiGU3JsumFyiRtrHigQ4On1EA6e2-EHI...*tAmiD3mJLzPnkyxhh8M54OapGOCexj7/3.0Header4192013NewOne2.png)fixed center top!important;}

Done! That's it for your background!

Now to remove (hide) the header...

Add this code to the remote sheet:

header{display: none !important;}

Now you can save the sheet and upload it to your file manager.

http://api.ning.com/files/N3dksbtuMJ59hVVT*sofffQZ80Hh1xSjGXhlg3h3aKaYnYKYTlCRZ81Lpw05dQzG5-4ViSWrjG1Py6iTr0o-ekkLTPZjuBfB/ExampleCSSforKOS.css

Now all you have to do is insert the hidden code into the page you want that will reference the sheet you just uploaded.

Add your url from the CSS sheet you uploaded to the code above so it will be:

Now you can copy the new link reference to your page you want to (make sure in an html block and in html mode of editor)......and BINGO!

Copy & paste the example I made for you so you can see it work and then identify what to change for your needs. Even when Ning does make things easier, these are some handy tricks to have in your pocket. Once you do it a few times, it's easy and soon you won't remember what your basic network even looks like...lol.
Hope that makes more sense for you. :)

▶ Reply

Permalink Reply by Kos on April 20, 2013 at 7:08pm

It must be "what" I was saving as my CSS. idk Eddie's <style> code is working at this juncture. I'm going to hangup my Notepad for the day and find myself a cold beer. *lol* Thank you Firetech