Ning Design Hack: Make a Text Box Span All 3 Columns

Post date: Nov 5, 2012 8:21:42 PM

Ive been playing around with the possibilities of making a site-wide column which spans the top of all 3 columns of the network. WARNING: this is a very advanced hack and i would advise trying it on a test site first before applying it to your primary network. This hack in in 2 parts. First is adding the actual box, then (optional) adding a SHOW/HIDE element to the box.

You can view the Finished 3 Column Text Box Live on Land Surveyors United

3 Column Text Box

With Show Hide Expanded

To add a text box at the top of the page you need first to create the box somewhere in your page.

Inside the text box place an elment with name and id "boxy3". For example

<div name="boxy3" id="boxy3"> Content of your 3 column text box</div>

Now, go to the analytics section and add the following javascript code:

Add This to Your Custom Code Box

var box3 = x$("#boxy3").parent().parent();

x$("#xg_body").children(":first-child").before(box3);

box3.width(935);

</script>

What does this code do?

Glad you asked- it simply sets the box that contains the "boxy3" element as the 1st child of element "xg_body" (in other words, the page elements container).

After you add the text box,you can edit the text box content as you would do for any other textbox, just remember to keep an element called "boxy3" and place the content between the divs. You will not want to add more than one of these boxes to your network because it will confuse all browsers and your network will look like complete shit.

Now, if you would like for this box to repeat on each and every page of your network, place it in the green area of the Features Layout section of dashboard as shown in the picture here:

I believe this tutorial has gotten long enough....i will post a future tutorial on the show/hide hack in the near future. Add me as a friend so you'll see it when I post in the next day or so.

I hope you find this tutorial to be helpful and interesting.