NOTE: THIS IS NOT EASY; THIS DEMO SHOWS WHAT YOU CAN DO WITH A NETWORK'S MAIN PAGE AND SOME SMOKE AND MIRRORS. I RECOMMEND THAT YOU ONLY ATTEMPT THIS IF YOU ARE VERY, VERY COMFORTABLE WITH CSS. AT THE VERY LEAST, MAKE A TEST NETWORK TO PLAY AROUND WITH THIS STUFF BEFORE REMOVING ALL THE MODULES FROM YOUR VERY IMPORTANT NETWORK. I'M TYPING IN ALL CAPS BECAUSE, SERIOUSLY, THIS IS PRETTY COMPLICATED, AND YOU'RE DOING THIS AT YOUR OWN RISK.

  1. Create a test network before trying this stuff out. I can't stress this enough. :)
  2. Use the following layout seen in this link. The key takeaway is that we do NOT use the left column; the center column is stretched out.
  3. Add this custom CSS to your advanced tab. I recommend you use FireFox so you can take a look at the CSS (IE will just download it directly.)
  4. Use the following HTML in this module box right here:
<div class="xg_module" style="height:300px;width:742px;float:none;clear:both;position:relative;"> <div class="xg_module_body"> Put your HTML code here. We used a background image and used the background-image CSS property to attach it to the xg_module class inline. </div> </div>

Latest Activity

alisya is now a member of Wacky CSS Demo!
September 24

How To Get Started

<div class="xg_module" style="float:left;width:275px;"> <div class="xg_module_head">
<h2>How To Get Started</h2>
</div>
<div class="xg_module_body">
This is the HTML module we used. For advanced CSS folks, you could probably apply the same CSS styles that are inline and apply theme to the customized style sheet in the Advanced tab.
</div>
</div>

 
 

About

 

© 2009   Created by Ning Developer Admin on Ning.   Create Your Own Social Network

Badges  |  Report an Issue  |  Privacy  |  Terms of Service