Weekend Project: Wide Image or Ad Above Two Sidebars

October 28, 2011

For this Weekend Project we'll be tackling the task of adding a wide image above the sidebars of a three-column-right layout. This can also be used for wider widgets, large advertisements, and more. Typically, however, it's used when you have something you want to feature above the rest of your sidebar.

Adding Wide Content Spanning Above Two Sidebars

We recommend creating a test blog in your account, then selecting the three-column layout where the post column is on the left and the two sidebars are on the right. The theme you choose can be a duplicate of your existing theme, or you can add any theme of your choice; it really depends on whether you want to test the change for your existing design or a new design.

Adding Wide Content Spanning Above Two Sidebars

To get started, you'll need to go to Design > Content, then add the Embed Your Own HTML module. When you click to add the module, a pop-up box will appear, pre-filled with "Custom HTML" in the Label field, which we recommend changing to something that will remind you what the module is for. The HTML field is where you'll be placing the content you want to span across the two sidebars.

In order to create the space for your content, you'll need to first strip the default module tags that appear around the Embed Your Own HTML module content. To do that, place the following into the HTML field of the Embed Your Own HTML module:

<!-- no_wrapper -->

Immediately below that, you'll need to add the HTML to prematurely close the #beta-inner and #beta DIV tags of the first sidebar. The code for that looks like this:

 </div> <!-- prematurely close #beta-inner -->
</div> <!-- prematurely close #beta -->

If you left the HTML at that, your sidebars would be broken, but that's something that will be fixed before you click OK and save the content changes.

Next up, add the HTML for your content. If, like in our example, you are adding a centered image, the recommended HTML would be:

<div align="center">
 <img src="http://example.typepad.com/image.jpg" title="Image Title" />
</div>

Replace http://example.typepad.com/image.jpg with the URL of your own image. If you're using the space for an advertisement or widget, then paste in the HTML or script that you were provided for that item instead of our example image code.

The final step would be to add in HTML to re-open the closed sidebar by adding in the opening DIV tags. We recommend keeping the same IDs for the DIV tags, which would make the HTML you need to add:

<div id="beta"> <!-- re-open #beta -->
 <div id="beta-inner"> <!-- re-open #beta-inner -->

All of the HTML content together for our example would be:

<!-- no_wrapper -->
 </div> <!-- premature close #beta-inner -->
</div> <!-- premature close #beta column -->

<div align="center">
<img src="http://example.typepad.com/image.jpg" title="Image Title" />
</div>

<div id="beta"> <!-- re-open #beta -->
 <div id="beta-inner"> <!-- re-open #beta-inner -->

Adding Wide Content Spanning Above Two Sidebars

After adding the HTML above, click the OK button and position the module at the very top of the first sidebar. You can then click Preview to see how the spanned area looks before clicking Save Changes.

With that last step, we wrap up this Weekend Project! It can be used for a myriad of things. You can even add more than one item to the spanned area (just place it within the same area as your first image, ad, etc.). So, try it out, have some fun, and let us know how it works out for you!

comments powered by Disqus

Welcome

Need help?

Follow us!

Typepad on FacebookTypepad on TwitterTypepad on Google+Typepad on PinterestSubscribe to Everything Typepad

Like us!

Typepad Newsletter

Still having trouble? Contact Support.