Centered Website Skin
Last Post 10/19/2007 10:30 AM by Lee Sykes. 9 Replies.
Author Messages
SatAM17
Nuker
Nuker
Posts:13


--
10/11/2007 9:43 AM  
I have been using my spare time to develop a website with DNN and I've noticed after adding ventrian's modules to pages and my own skin, the site was extremely slow with only about 10 postings.  I am using re-invent hosting.  I thought perhaps switching to a pure css skin would help the site speed and that's when the fun began...  I have taken lee's 3 pain main code and modified it or I'm trying to, so my site will have a centered skin.  I'm having problems pulling this off and I am a DNN newbie so I've been stuck in code land for 3 weeks now.  I just love to tackle the most complex things first.. lol

Here's the code and the main problem is I can't get the menu to display correctly in the top "contentholder" div.  Absolute positioning doesn't work for this model since the main container is centered each time the browser window is re-sized.  I've tried relative positioning for the menu, breadcrumb, logo and search tokens but they always end up at the bottom of the pile.

What the heck am I doing wrong?  I thought nested divs would do the trick then I had so many nested divs I forgot what was going on with them all...!   Should I try floating the divs?



Here's the modified Lee code:

SatAM17
Nuker
Nuker
Posts:13


--
10/11/2007 9:44 AM  
<!--





<div id="contentpane" runat="server" visible="false">





<!-- end #mainbody -->



<div id="footerpane" runat="server" visible="false">


<!-- end #contentholder -->


[BREADCRUMB]




<div id="ControlPanel" runat="server">

<!-- The code below enables multiple css files to be called up
for browser hacks and a print.css file -->
<script type="text/javascript" language="javascript">
// BEGIN: styleSheetPicker object definition
// function styleSheetPicker()
{
this.ieScreen = this.iePrint = this.otherScreen = this.otherPrint = "";
}

styleSheetPicker.prototype.render = function()
{
if (document.createStyleSheet)
{
if (this.ieScreen)
document.createStyleSheet(this.ieScreen);

if (this.iePrint)
{
var ieP = document.createStyleSheet(this.iePrint);
ieP.media = "print";
}
}
else
{
var head = document.getElementsByTagName("head")[0];
if (this.otherScreen != "")
head.innerHTML += "";

if (this.otherPrint != "")
head.innerHTML += "";

}
}
// END: styleSheetPicker object definition

var picker = new styleSheetPicker();

// IE stylesheets
picker.ieScreen = "<%= SkinPath %>iehacks.css";
picker.iePrint = "<%= SkinPath %>print.css";

// Other browser stylesheets
// Don't need this: picker.otherScreen = "default.css";
picker.otherPrint = "<%= SkinPath %>print.css";
picker.render();
// ]]>
</script> -->
SatAM17
Nuker
Nuker
Posts:13


--
10/11/2007 9:46 AM  
code will not paste into this forum... eegads.........
SatAM17
Nuker
Nuker
Posts:13


--
10/11/2007 9:51 AM  
the css is above. I didn't change any of the div items, just the css absolute to relative.
Lee Sykes
DNN Creative Staff
Nuke Master VI
Nuke Master VI
Posts:4945


--
10/12/2007 3:54 AM  
The forum is not very helpful for posting code! - do you have a url - it's much easier to look through the code on a live site.

- I'm also thinking of enabling attachments in the forum - Do you think this will be useful for attaching skin code files?

Cheers
Lee Sykes
Site Administrator
Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

Twitter: www.twitter.com/DNNCreative

Lee Sykes's Facebook Profile
SatAM17
Nuker
Nuker
Posts:13


--
10/12/2007 8:46 AM  
I do have a url but it's still in development so I hesitate posting it on a live forum. I would be happy to send you a link via e-mail or pm. Can you delete a thread post and I will just post my e-mail in this thread if it can be deleted later..? nasty spam bots.

Yes, definitely need a way to paste code in here.

Thanks for your response and for your tutorials.
SatAM17
Nuker
Nuker
Posts:13


--
10/12/2007 1:43 PM  
My code is messing up the CSS on this forum page.. eek. I now have an even bigger problem, my site is throwing this error:
Unhandled Error
Error Details
File
Error The transaction log for database 'domainname' is full. To find out why space in the log cannot be reused, see the log_reuse_wait_desc column in sys.databases

I've asked my hosting company, re-invent to restore a backup of my website and hopefully that will fix whatever is happening. The only thing I've done recently is try to install the skins and I've deleted a few too. I may have this centered skin fixed soon and I will share it when finished. I will send it to your e-mail, now that I've found it.

Bugs are no fun....
Joseph Craig
DNN MVP
Posts:11667


--
10/12/2007 1:59 PM  
For that latter message, you should ask the hosting company to clear out your transaction log.

You should also look at Site logs, Event logs and Scheduler for information on configuring logging to save the information you need, but also prevent the logs from growing excessively or, as in your case, from killing your system.

I'm also going to remove some of your posts in this thread because, as you've noticed, they do bad things.



Joe Craig, Patapsco Research Group
Complete DNN Support
SatAM17
Nuker
Nuker
Posts:13


--
10/18/2007 12:58 PM  
Thanks for the information. I just upgraded to 4.6 and it is a bit quicker. I will go through the tutorial concerning site logs. The site is running slow but seems to be faster than it was before the upgrade.

I have accomplished getting the website centered (to a certain extent). The IE bugs have driven me nuts and it's still difficult to find enough information on how to work around them. I suggest Lee work on a future centered skin (3 and 2 pane) with the beautiful yet infamous rounded corner expanding css containers. I'm sure it would be very beneficial to people who have design/html experience but lack css advanced training to pull some of those tricks off in multiple browsers, or those of us who just don't have the time to delve too deep.

thanks

Lee Sykes
DNN Creative Staff
Nuke Master VI
Nuke Master VI
Posts:4945


--
10/19/2007 10:30 AM  
You maybe able to get tips for centering your skin by looking at one of the free skins, such as:
I will add those tutorial requests to the list, thanks,

Lee Sykes
Site Administrator
Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

Twitter: www.twitter.com/DNNCreative

Lee Sykes's Facebook Profile


---