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:

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

 

Short Instructions for Advanced Users:

  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.

 

 

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.

  1. Create, or have a background image ready.
  2. Upload your background image to an image server, or to Ning via a Blog or File Manager.
  3. 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).
  4. Add the code below to a text file using a Text Editor like notepad.
  5. Change the image file path (yourbackgroundimage.jpg) to your image path. You can press Ctrl + V for paste.
  6. Save your CSS file.
  7. Follow the exact same instructions at top of this tip, to upload the CSS file, and add to your Custom Page.
  8. 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

Views: 2362

Reply to This

Replies to This Discussion

They do not work on the site I'm currently working on, but if you will give me a link, I'll see if they work where you installed them.

To center at top, see below. I still think it's a better idea to use the link code, especially since it didn't work for me. Could be erratic.

<style>

body {

   background: url(yourimage.jpg) top center fixed

}

</style>

I'm just glad we have an alternative either way. Thanks for this...

Edie,

I tried <style> tag again. It just won't work for me. So odd.

Thanks,

Jen

...... Should have known my little ghetto tag wouldn't work. LOL!

Sorry Jen.

LOL!

Oh my. What are the odds? Your image was 8bits RGB Color. And, that won't work on Ning. It's very rare to even see an image with that image mode.

Actual CSS:

body {
    background: url("http://storage.ning.com/topology/rest/1.0/file/get/981290637?profile=original") repeat fixed 0 0 transparent!important;
}

New Code for HTML Box:

<link rel="stylesheet" type="text/css" media="screen,projection" href="http://storage.ning.com/topology/rest/1.0/file/get/964758736?profile=original" />

IT WORKED!!!!!!!! *clapping* Thank you so much for laboring on this! So sorry to take up your time like that!!! But it works great!!!!

Edie,

I appreciate you testing it. Now we know that <style> tag works sometimes, too. But, I am using FireFox too, and it won't work for me.

Thanks for your help!

Jen

Not at desk, but looks good to me. Go back, edit html. Be sure.to click on html button. Make sure code was saved.

8 Stinking Bits? LOL! Told you you are a genius. Man! I can change that in Photoshop right?

Nah, just doing this for many years. Yeah, just change the Image Mode, real easy. And then resave. I did it for you on this one.

RSS

Members

© 2024   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips