Current status of the Ning Platform is always available on the Ning Status Blog.

FORUM

NC for Hire

You may want to create a visual sense of depth on your network or simply place borders around elements within your site- this is how to do this using CSS and the advanced section in your appearance dashboard (old editor).  What I am about to show you is a simple tutorial for taking an image and placing it on the border of any element on your network.  You can see the result live on my network for land surveyors.

For the purposes of this discussion, we will be adding a border around the #xg_body, .xg_bodybg  portions of a ning site, sitewide.

 

Let's begin.  I will first tell you about two helpful CSS3 generator sites which are helpful for achieving this if you are unfamiliar with CSS.

CSS3GENERATOR (mentioned before)  and BORDER-IMAGER

Lets use the BORDER-IMAGER because it supports images...the other generator works best for color based borders using no images.

 

1) find an image you'd like to use as your border and upload it into one of your text boxes-copy the URL of that image and paste it into the "Image:" field on BORDER-IMAGER

2) Adjust the border appearance to your liking and look at the bottom for the CSS code it generates.  Copy that and head over to your Advanced Appearance area on your site.

3)  Find the #xg_body, .xg_bodybg section in your code and place the code you just generated/copied under that element in between the {}

    For example, it should look something like this (numbers will vary):

#xg_body, .xg_bodybg {  border-image: url(https://api.ning.com/........-border.png) 10 repeat;
-moz-border-image: url(https://api.ning.com/........-border.png) 10 repeat;
-webkit-border-image: url(https://api.ning.com/........-border.png) 10 repeat;
}

Save your new style and check it out.  View a live demo here on my network

 

 

 

You can do this for virtually any element on your network with a little  tweaking and creativity.  Enjoy!

 

 

Further Reading on Border Images CSS3:

 Border-image: using images for your border

 CSS3 Border Images for Beautiful, Flexible Boxes

Understanding Border Images-CSS Tricks

My other posts on ning design with CSS:

Customize Your Pagination Style with CSS

CSS: Best Way to Clean and Optimize

Design Hack #3: How to have 2 RSS Modules Side by Side

Design Hack: How to Make Video and Photo Modules Side by Side

Design Hack: Add A Text Box which Spans All 3 Columns

Awesome Tweak Tip: Animate Your Network Logo With Pure CSS-No Gifs

 

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Email me when people reply –

Replies

This reply was deleted.

Announcements

 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Fabricio Giugni posted a discussion
Hi there,  Can we integrate the Builderall with Ning? The only thing I want from Ning is the abilit…
yesterday
Fabricio Giugni replied to Fabricio Giugni's discussion
How can I add video from Youtube on landing page?
"Hi,
    Thanks, it did work. But I will create this page in some other place. I spend a Thousand do…"
yesterday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
TRICK: Host Your External CSS and JS Files using Dropbox
"I no longer use Dropbox for this...   I use Github....  ask me how if it is too complicated for you…"
yesterday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Create a More Exciting "Featured" Email With Language Editor

still one of the most powerful tools and one of the first things I change when I start a new comm…"
Thursday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
How to Give Your Ning a Really Fake Voice
"These days I use Speakpage and it provides a great on the fly service, but it is limited to a singl…"
Thursday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
How to Create Search Feeds in Bing with a Simple Hack
"thank you brother"
Thursday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
How-to Control Number of Member Profiles on Member Page Using CSS
"Wow... just look how active Creators used to be!"
Thursday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
You May Not Know This About Facebook
"this tip worked well for me today again"
Thursday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Linkedin Tip: Export Your Contacts For Import Into Ning
"yes it most definitely does work on both"
Thursday
⚡JFarrow⌁ updated their profile
Thursday
⚡JFarrow⌁ replied to Fabricio Giugni's discussion
How can I add video from Youtube on landing page?
"Simply right click on the video and open HTML/CSS then find the line where the youtube video URL is…"
Thursday
J.Ayvar replied to Anastasia_Ning_Support's discussion
Join our webinar on SEO
"Thank you!  i am wating for the webinar. Just 5 minutes :)"
Thursday
More…

Meanwhile, you can check our social media channels