Skip to main content

"How to put a widget in the main left column of the homepage" was one of the first questions I asked Hoop about during Beta, and I have seen many others ask the same question since.

Answer: you can't put real widgets there. But I did figure out how to 'fake' one there     --which also has the side option of creating 3 columns, if you like that sort of thing.

Why? We like the idea of more custom content in the Main Left Column (aka "MLC"), and less of the preset content blocks feeding plain-vanilla content extracts from forums (though we use those too).  During Beta, we were grateful Hoop added the ability to add "custom content block" to the MLC. We also like how the widget header gives us a nice familiar VISUAL divider between blocks, though you could certainly add any other divider, and someday we might.

Below is the code I used to create a "fake" a widget in a custom content block in the MLC. For the purposes of consistency on our site, we gave the MLC widget the same background color and header as the Right Column widgets on our site www.rotation.org. (We have custom widget-header code set in the Custom CSS as well, which creates the 'flag' shaped widget seen on our site.)  To the user: it is a widget.

Three Column Bonus!
The additional "small-6" div class I used also happens to create 2 vertical columns in the custom block --because I wanted to organize our particular content that way in that particular custom block. For those of you who like the visual organization of THREE COLUMNS below the Main Menu Bar, this is a simple way to achieve something like that.   If you want one column, just do small-12 or whatever fits for you.   

Here's the CSS code to insert into a custom content block:

<div style="background:#efefef">
<header class="widget-header">
<h3>INSERT "WIDGET" TITLE HERE</h3>
</header>
<div class="row">

/*Creates first column-remove this remark*/
<div class="small-6 columns">
<p>INSERT YOUR CONTENT HERE</p>
</div>

/*Creates second column-remove this remark*/
<div class="small-6 columns">
<p>INSERT CONTENT HERE</p>
</div>
</div>
</div>

Hoop:  Feel free to code-monger this. 
It would be also nice to have a 'sandbox' to play with such changes, rather than having to "play live." I think sandbox was a platinum feature or something like that, but now that you have all your customers needing to customize CSS, how about giving us all a sandbox?

All: I would love to see your variations on this, including, if any of you have embedded widget code in a custom block.

Replies sorted oldest to newest

Add Reply

×
×
×
Link copied to your clipboard.
×