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.
- Create a test network before trying this stuff out. I can't stress this enough. :)
- 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.
- 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.)
- 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>