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

[JFarrow]

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:

<script type="text/javascript">
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.

[KWKhaing]

Very interesting! Great work.

[JFarrow]

thanks..hope it works out for youl..

[Brian Floe]

This is a great idea and just what I was looking for, but I'm having some problems adding a javascript tabbed content box to the text box.

Basically I want to what you see on this page to the HTML text box:
http://www.myapplespace.com/page/updates-1
(right now I'm having a problem with the tabbed content box - not sure if me playing around with this hack somehow ruined it or not but it worked before)

[JFarrow]

it seems to be working on this end...where did you find the tabbed content functionality...i wonder if it might work within my 3 column box...thanks for the reply Brian

[JFarrow]

oh...i think i see...is that just a customized feedly mix?

[Brian Floe]

Yes the tabs contains feedly mixes - you can click the tabs???? They are no longer working on my end. (Safari - Mac)

I want to create a version of this idea for my front page containing my forum, blog, photos, movies etc. using also all the new RSS feeds recently released by Ning.

[Brian Floe]

Even more strange: the tabs work when you click them in Firefox (Mac) but not in Safari (Mac).

I have attached the javascript - CSS - HTML for my Updates page

[Brian Floe]

I*m baffled - now the tabs work again out of the blue .... ?!?!?

[Edith Herrera]

Thank you very much, it works ok ... Add icons ... I like the result http://www.folklonautas.com/

[Brian Floe]

Will it be possible to click "show" and have the tabbed content box appear I wonder?

[JFarrow]

looks great Edith...great job!

[Jen]

I'm very curious to see how this hack progresses. I created a similar hack last year. It caused some real issues, and I had to remove. I would love it if this works well.

Nice job!
Jen