CSS rollover buttons
Last Post 03/06/2007 12:09 PM by Lee Sykes. 1 Replies.
Author Messages
eric bott
Posts:10


--
03/06/2007 10:08 AM

    Hi All - Lee youve done a great job - Ive watched most of the tutorials - but am looking to make rollover images using style sheets but am having problems - is there a video of how to to get it done in DNN

    I created this file  and it works on an HTML page but can't get it to work in the dnn module - Im new to CSS stuff so please be kind

    html cocument


    < html>
    < head>
    < title>My CSS Navigation
    < meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    < /head>
    < body>

    p.navbuttons a:hover, p.navbuttons a:active {
    background-color: #white;
    color: #FFFFFF;
    background-image: url(="/Portals/0/TDsucribeUP.png);
    background-repeat: no-repeat;
    }

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


    --
    03/06/2007 12:09 PM
    Hello,

    There is not a video on how to do this, but you may find the following helps:

    DotNetNuke uses a slightly different CSS class naming method, for instance any text placed within the text/HTML module uses the CSS class of normal.

    For example, if you add a link into the text HTML module and then rename your CSS to use the following classes:
    .normal a {
    color: #000000;
    text-decoration: none;
    background-color:white;
    padding: 3px 0px 3px 12px;
    width: 80px;
    border-top: 0px solid #EEEEEE;
    border-right: 0px solid #666666;
    border-bottom: 0px solid #666666;
    border-left: 0px solid #EEEEEE;
    background-image: url(="/Portals/0/TDsucribeUP.png);
    background-repeat: no-repeat;
    }

    .normal a:hover, .normal a:active

    etc.

    This will change the details whenever you hover over the Link.

    If you watch this video tutorial: Troubleshooting DotNetNuke Skins you will learn the methods for finding out which CSS classes DotNetNuke uses.

    Hope this helps, 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


    ---