Module spacing
Last Post 04/16/2011 10:56 PM by rod lloyd. 6 Replies.
Author Messages
rod lloyd
Nuke Active Member
Nuke Active Member
Posts:36


--
04/15/2011 9:00 PM  
Is there a way to reduce the module spacing to zero [touching each other] without using code, or can a module be added into a table cell [again without code other that html].
Joseph Craig
DNN MVP
Posts:11667


--
04/16/2011 8:54 AM  
The spacing between modules and panes is determined by the skin and containers that you use.

If you are using a table-based skin, make sure that cellpadding and cellspacing are set to 0. This will be in the skin or in styles associated with the skin. That will affect the spacing between the panes.

The spacing between modules should be determined by the containers that you use. You can check the CSS styles for them.

Using the Developer Tools in IE or the Web Developer toolbar in Firefox or the tools in Chrome make it easy to identify elements and adjust their styles while viewing your site. You'll likely find the IE Developer tools the easiest to use. Sometimes it also helps to stare at the souce code that is generated (in View Mode and logged out to elmininate any host or admin mode content).

If you are choosing to NOT display containers (which is something that I do quite often), then any spacing is going to be the result of styles applied inside of the modules. The same tools apply there.

------
But the bottom line is that it is fairly easy and simple to get the result that you want. Skins, containers and their related CSS files are there for you to edit to your liking.

Joe Craig, Patapsco Research Group
Complete DNN Support
rod lloyd
Nuke Active Member
Nuke Active Member
Posts:36


--
04/16/2011 8:22 PM  
OK I said no coding but apparently that is not possible. Could you point me in the right direction. Yes I use Chrome and see tools which gives me lots of choices. Please elaborate.

Rod
Joseph Craig
DNN MVP
Posts:11667


--
04/16/2011 9:20 PM  
There are different levels of coding. Some proficiency withn CSS and HTM is fairly important when it comes to building web sites.

There are tools like the Morphesu, Catalyst and Artistter are available that allow you to create skins minimum coding.

To learn about skin creation, do cheek out at least the I troductory tutorials. Then look at the tutorials related to skins for DotNetNuke 5.

Do you have a site that I can see? What skin do you use?

Joe Craig, Patapsco Research Group
Complete DNN Support
rod lloyd
Nuke Active Member
Nuke Active Member
Posts:36


--
04/16/2011 10:17 PM  
I am using a test site that handcuffs me a little. The site I am taking over I recreated using tables on the home page but this page I am trying with only modules and skins:

http://rodtestbed.d13cgaux.com/dnnr...t2011.aspx

The original site created by others is:
http://www.swwasymphony.org/index.html

Rod
Joseph Craig
DNN MVP
Posts:11667


--
04/16/2011 10:49 PM  
You will want to modify your skin file to remove any cellpadding="3" and cellspacing="3". Doing that will result in the table cells abutting one another.

In skin.css, remove all of the padding for toppane, leftpane, contentpane, rightpane, etc. Doing this will cause the edges of the cells to coincide with the table edges.

The image in your content pane doesn't appear to be quite wide enough to fill the page. You can specify width="100%" to stretch it. Also make sure that there is no styling to cause it to not fill the pane. I think that you probably have the image wrapped in paragraph tags. If you edit the html for the contents of that module using the basic text box editor in raw mode, you'll be able to make all of that go away.

Those simple changes will go a long way -- I'm assuming that you want the red left column to abut the green content page.

You will also want to convert this skin to an XHTML skin (see our tutorial about XHTML skins and DOCTYPE files). This will make things more cross-browser compatible. Right now, what you have looks a lot better in Firefox than in IE as it causes the browsers to render in Quirks mode rather than XHTML compliance mode.

Finally, it looks like you have based this skin on an old DotNetNuke skin. It looks like you are also using (at least for this test scenario) an old version of DotNetNuke (the copyright in the page is 2009). Before doing anything else, I would definitely recommend that you upgrade to DotNetNuke 5.6.2. You'll save yourself a LOT of hassles. Then, I would base the skin on a more modern design. The Minimal Extropy skin that comes with current versions of DotNetNuke is a good place to start. And, while doing that, I'd recommend that you upgrade the menu in the skin to the DDR Menu from DNNGarden.com. This will be the standard menu in upcoming versions of DotNetNuke, so it's a good time to make sure that you start off on the right foot.

Ask lots of questions!

Joe Craig, Patapsco Research Group
Complete DNN Support
rod lloyd
Nuke Active Member
Nuke Active Member
Posts:36


--
04/16/2011 10:56 PM  
great information and you have given me plenty to work on

Thanks

Rod


---