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
Replies