You need to Register for free and Login to post a message in the forum.

Forum

Subject: Issue 25 -- Great!
Prev Next
You are not authorized to post a reply.

Author Messages
DavidWSnow
DNN Creative Magazine Subscriber
Nuke Master
Nuke Master
Posts:124

28 Sep 2007 1:54 PM  

I was waiting for this issue and it didn't disappoint me.

The process of moving the content around on the page was easier than I thought.  I was wondering if you could have placed all of the absolute positioned items in a single div and just positioned it.

This was a much of a video on skin design as it was on making CSS skins SEO friendly. It was good to see your thought process.

I did notice a couple of items to comment on.

You called content pane “contentpane” while DNN uses “ContentPane”. While IE and FireFox don’t see any difference when displaying, I have been burned when I had JavaScript that was going to operate on the “ContentPane”. It appears that JavaScript in FireFox is case sensitive. As a result I recommend that people name their “divs” with the same case as DNN uses.

On the last video talking about how “skinname.css” only needs the differences from “skin.css”, it reminded me of a question about “print.css”. Does “print.css” only need the diffs, or must contain the whole css file with the few changes that you need for printing like margins, removing the menu, dealing with links etc?

As you were duplicating #dnn_contentpane’s attributes, I was reminded that I find it much better group like items together and just and the id and class names to the list.  In fact, for colors I move all of the color statements to a common place and then I can easily tweak them as required.

Again thanks for the great video!

/DaveS - www.agingSafely.com

 

leesykes
DNN Creative Staff
Nuke Master III
Nuke Master III
Posts:3324

01 Oct 2007 10:56 AM  
Thanks for the feedback Dave. - yes print.css works in a similar way to skinname.css, although there are times when you need to add a couple of extra tweaks to get all of the styling working correctly, there will be an example of how I implemented the print.CSS for the Andreas01 skin in Januarys issue. - Dec and Jan will be parts 1 + 2 of how to create a DNN skin from a free XHTML template. - It's basically the presentation that I will be giving at openforce, but instead of it being a quick 30min overview, it will be 2hours of vids showing the entire process in detail.

Cheers,

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

Twitter: www.twitter.com/leesykes

Lee Sykes's Facebook Profile
DavidWSnow
DNN Creative Magazine Subscriber
Nuke Master
Nuke Master
Posts:124

13 Nov 2007 6:00 PM  
I was using your new CSS skin, I got to looking at a JavaScript code in the HTML/aspx template.
I was wondering if there was a better place to add JavaScript code that needs to be included with every page on the website. If it is part of the skin it will get loaded with every page load. If it could be loaded some other way it would only be loaded once. Is there a way to add JavaScript files to the list of other files loaded by DNN?

/DaveS
leesykes
DNN Creative Staff
Nuke Master III
Nuke Master III
Posts:3324

15 Nov 2007 1:31 PM  
Hello,

To be honest I don't know that much about Javascript, Nik Kalyani kindly put together that script for me. - The solution that I provided is suitable if you wish to distribute your skin to the community, but if it is for a client then I think moving the JavaScript is a good solution.

All of the JavaScript used by DotNetNuke is stored in the js folder, so you'll need to add your JavaScript into there and then call it. - Elements of using JavaScript in this method have been covered in this tutorial:
Incorporating sIFR (Scalable Inman Flash Replacement) with DotNetNuke skins

If you get this working I'll be very interested to hear how you implemented it, thanks,

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

Twitter: www.twitter.com/leesykes

Lee Sykes's Facebook Profile
jncraig
DNN Creative Staff
Nuke Master II
Nuke Master II
Posts:2318


16 Nov 2007 9:31 AM  
I think that you can do this by putting the Javascript code in Default.aspx.

Joe Craig
DNN Creative Support
Subscribe to the website
DavidWSnow
DNN Creative Magazine Subscriber
Nuke Master
Nuke Master
Posts:124

16 Nov 2007 10:26 AM  
I just watched Lee's sIFR (Flash Text) videos and that is the way he did it. That seems like a very bad way to have to do it. With several portals and skins the only code that can be put these MUST be common to all portals and skins and runs the risk of "falling out" evey time that DNN gets upgraded. Yuk.

That tutorial did give me an idea about the css. layout and the JavaScript code that Lee usually has in skin.aspx to handle print.css and iehacks.css.

He used @media print { } and @media tty
{
    i(content:"\";/*" "*/}}
to seperate the sections.

It APPEARS that I could make a single skin.css that contained common, print and ie.hacks for a skin. I then could have 2-pane.cdd for the 2 pane skin that tweaked the widths ol columns and had its own ie.hacks  etc.

The big question is with IE7 and xhtml mode which "hack" (if any) is the correct hack to seperate IE from the rest?

I'll be trying this within a few days I hope. If it works Ok I'll post the framework.

My old skins were HTML 4.01 transitional and I have found a couple of  differences in Padding and Marings on ol and ul that really changed in IE when I went to xhtml mode with my new skin. I was able to find a common setting that looked ok (but diffferent) in both IE and FF. Yuk!


DavidWSnow
DNN Creative Magazine Subscriber
Nuke Master
Nuke Master
Posts:124

16 Nov 2007 12:02 PM  
I just did some texting

1. Adding @media print ( /* css code here */} at the end of skin.css works fine
and keeps all the skin css together.

2. using
/* Use this to call in IE5.x/Win iehacks.css file */
@media tty
{
    i(content:"\";/*" "*/}} @import 'iehacks.css'; /*";}
}/* */
 from Issue 11, and DNN creative's current skin to import iehacks.css doesn't appear to work with xhml skins and IE7. I was hoping that I could remove all of Lee's JavaScript from the skins.aspx doing it this way.

I ASSUME that the must be a CSS IE-only  hack that will seperate IE from FF in xhtml mode, but haven't found it yet. I have found on the we ones that will seperate IE7 from IE's.

When IE gets better the harder it becomes to fix its hacks.

Regards,

DaveS
jncraig
DNN Creative Staff
Nuke Master II
Nuke Master II
Posts:2318


16 Nov 2007 5:29 PM  
Dave,

I agree with you about making modifications to the code. It's a maintenance nightmare. Given DotNetNuke's fairly aggressive release schedule -- we'll begin to see initial releases of "Cambrian" in January -- you don't want to be modifying a lot of code with each release.

Having had the opportunity to see Lee's presentation at Open Force '07, I expect that the promised tutorials with the Andreas Skin in the next couple of issues will also become classics!

Joe Craig
DNN Creative Support
Subscribe to the website
DavidWSnow
DNN Creative Magazine Subscriber
Nuke Master
Nuke Master
Posts:124

16 Nov 2007 5:48 PM  
Glad to hear that Lee's presentation was a success.

I have just sorted out the skin.css stuff so that print and iehacks (IE6 & IE7) can live in a single file and no JavaScript is required in the header. It really cleaned up the css for a multi-layout skin and simplifies the maintenance. It also means that you don't have issues when iehacks needs to modify a column width that is changed in a 2pane layout and in the common iehacks.

I'll post it when I get it polished a little more.

/DaveS
leesykes
DNN Creative Staff
Nuke Master III
Nuke Master III
Posts:3324

19 Nov 2007 10:02 AM  
Hi Dave,

In the dnncreative skin I haven't used javascript for css files, I have used the @import method - look at the default.css file code and you can see how I have implemented this.

- Downside to this is that the @imports need to be in the first CSS file that is read for validation, which is why it is placed in the default.css file - of course you could only do this for client websites and not for skins for resale / distribution. - Also another problem is if modules use module.css as this file is placed before the default.css file and therefore causes invalid CSS code. . .

Thanks,


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

Twitter: www.twitter.com/leesykes

Lee Sykes's Facebook Profile
DavidWSnow
DNN Creative Magazine Subscriber
Nuke Master
Nuke Master
Posts:124

19 Nov 2007 12:28 PM  
I have a site with several parent portals and usually several skins, so the method that you are using won't work for me. 

While testing, I have had bad luck using IE7 selectors to block FF and allow IE6&7 for both quirts and xml modes.

I may have to go back to your skin JavaScript method, but that has issues if the css values you are adjusting have are also adjusted in a {1-2}pane.css files.

It is really too bad tha IE didn't do a CSS conditional like they did for HTML.


While I hate overloading comments I can see the benifits to it today.

Regards,
/Dave

leesykes
DNN Creative Staff
Nuke Master III
Nuke Master III
Posts:3324

22 Nov 2007 3:01 AM  
  I think it was this free skin where I have implemented separate IE7 and IE6 hacks.  It could be worth looking at the code in there to see if it is of any use to you: FreeStyle

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

Twitter: www.twitter.com/leesykes

Lee Sykes's Facebook Profile
You are not authorized to post a reply.
Forums > Users Lounge > DNN Creative Articles > Issue 25 -- Great!



ActiveForums 3.7

Latest Forum Posts

localhost Install issues by cdees
I've set up a local host and want to run DNN for a local development machine.  The host is set up; h...
RE: Reversing Limited Access to the Admin Menu by wynnjon
That is what I thought.  So for my clients that will need to manage user accounts, I can not limit t...
RE: Reversing Limited Access to the Admin Menu by leesykes
I seem to recall it doesn't work
RE: Reversing Limited Access to the Admin Menu by wynnjon
Thanks Lee-  I will give that a try.An additional question- If you place the "User Accounts" page un...
RE: Reversing Limited Access to the Admin Menu by leesykes
all you need to do is reverse the process within the SQL tables.Compare the data to the other rows i...
RE: Module not working when logged off. by leesykes
thanks for the info,
Reversing Limited Access to the Admin Menu by wynnjon
Hi!  I followed the tutorial for limiting the access to the admin menu.  What a great thing!However,...
RE: Trouble installing! Designer trying to be a Developer. by leesykes
glad to hear you found a solution, thanks,
RE: Skim Question by leesykes
You could but you will not be able to have an XHTML compliant page as the SolpartMenu is non-complia...
RE: Include in Menu - Weird Request by leesykes
For your sitemap.xml file - use GSiteCrawlerYou could create the site map before moving the sub menu...
RE: Trouble installing! Designer trying to be a Developer. by awright14
It looks like I had ASP installed in the wrong order.  Copying and pasting this into the Run Command...
RE: Need Help Changing Containers Contentpane's Text Color by leesykes
Hello,Have you tried adding a class to the content area of your container and then styling the p, a,...
RE: Vertical SolpartMenu by leesykes
hello,If you wish to display the admin and host menus within the house menu, you need to enable it i...
RE: Firefox Does Not Display WMV File In Media Module by leesykes
Hello,I have just tested this and I can play a wmv file in Firefox 3.0.3, so it does suggest that it...
RE: advice wanted convert site to DNN while keeping existing asp functionality by leesykes
You could try using the IFrame module in DotNetNuke and then just link the IFrame to the current pag...
RE: Need Help Changing Containers Contentpane's Text Color by CROKeefe
Thanks for the quick update... I know it looks broken right now, but I had the TITLE classes working...
RE: Need Help Changing Containers Contentpane's Text Color by leesykes
The default class for a container is .head so you will find that the .head class will override any s...
RE: Module not working when logged off. by t.ramya85
have to set the cache time to '0' in that module setting.
Trouble installing! Designer trying to be a Developer. by awright14
Hi Everyone,Just to let you know, I'm very new at this - very new to any type of dev environments in...
Skim Question by tlsadler
I've been going over your videos on skinning and may have missed something somewhere.Can you use the...
DotNetNuke Modules
RSS Feeds