Skin Design
Last Post 04/11/2006 3:07 AM by Andrew Campbell. 3 Replies.
Author Messages
Andrew Campbell
Nuke Active Member
Nuke Active Member
Posts:22


--
04/09/2006 8:05 PM

    I am trying to design a skin for DNN based on my current website at www.intertag.com.au

    The top picture has 3 separate images.

    I have been successful in creating a table to hold these and preview in DNN. The images to the right should change when the mouse hovers over them but don't, they disappear. The preview in browser from VWD shows correct. This could be the code I'm using which was cut from current website.

    Should I reference images from a CSS file? If so, how do I do this? I created a class called logo1 and referred to the image. It loads OK but table cell shrinks and image is repeated.

    Cheers,

    Andrew

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


    --
    04/10/2006 5:56 AM
    Hello,

    The problem with the images is that the image links are not to the correct location: ie. they currently link to:

    http://localhost/dnntutorials/test/Home/tabid/74/nav_contact.gif

    http://localhost/dnntutorials/test/Home/tabid/74/nav_about.gif

    Whereas you need to find a way to link directly to the portal folder where the skin is stored.

    Regarding images from CSS files, you need to specify repeat: none to stop it repeating the image.

    If you want to create hover over effects within CSS, you can only do this on links. - So you need to create a link with an class id then call that id from within your CSS file to specify what happens when you hover over the link.
    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
    Andrew Campbell
    Nuke Active Member
    Nuke Active Member
    Posts:22


    --
    04/11/2006 2:58 AM
    Hi Lee,

    I got the skin to work, my test site can be viewed at http://intertag.s26.dotnetsql.com.s...etsql.com/ (this will change soon to www.intertag.com.au once I'm happy with the site)

    Hover your mouse over the menu to the right.

    For the onmouseover and on mouseout events I had to provide the full path of the image. As you can see it now works.

    Thanks for your help.

    Cheers,

    Andrew
    Andrew Campbell
    Nuke Active Member
    Nuke Active Member
    Posts:22


    --
    04/11/2006 3:07 AM
    My code:

    <a href="http://intertag.s26.dotnetsql.com.s26.dotnetsql.com/" onmouseover="document.images['home'].src='http://intertag.s26.dotnetsql.com.s26.dotnetsql.com/Portals/0/Skins/Intertag/nav_home_on.gif';" onmouseout="document.images['home'].src='http://intertag.s26.dotnetsql.com.s26.dotnetsql.com/Portals/0/Skins/Intertag/nav_home.gif';"><img width="180" height="128" border="0" alt="Home" id="home" src="http://intertag.s26.dotnetsql.com.s26.dotnetsql.com/Portals/0/Skins/Intertag/nav_home.gif" /></a>


    ---