Module Dropdownmenu seperator
Last Post 02/15/2010 3:25 PM by TommyOnDNN. 8 Replies.
Author Messages
TommyOnDNN
Nuke Ace
Nuke Ace
Posts:41


--
02/15/2010 2:07 PM
    Hey All, I'm using an Artisteer generated skin and my Module-dropdown-menu seperator is way to high, which causes me to be unable to select certain dropdownmenu options, such as "delete". Doe anybody happen to know how to fix this?
    Lee Sykes
    DNN Creative Staff
    Nuke Master VI
    Nuke Master VI
    Posts:4945


    --
    02/15/2010 2:16 PM
    I haven't used Artisteer, but in theory it should be setup the same as a standard skin.

    I'm not sure what you mean, from looking at the picture, Delete looks selectable, could you provide further info?
    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
    TommyOnDNN
    Nuke Ace
    Nuke Ace
    Posts:41


    --
    02/15/2010 2:20 PM
    Well, I figured using the Artisteer skin messed something up in the CSS, which causes the Module dropdown seperators to be much higher as usual.
    In this instance (screenshot) all dropdown menu items are selectable, however often the bottom menu items are not. So I figured fixing the CSS value that causes the seperators to be as high as they are, would solve the problem. Don't have a clue on where to start looking for that CSS key though.
    Lee Sykes
    DNN Creative Staff
    Nuke Master VI
    Nuke Master VI
    Posts:4945


    --
    02/15/2010 2:27 PM
    ok, simplest way for you to troubleshoot and find the CSS code to change will be to use the techniques in this tutorial:
    Troubleshooting DotNetNuke Skins

    Using the techniques there I would recommend that in the web develeoper toolbar you delete all of the CSS and then introduce elements of the CSS until you find the section of CSS that is causing the problem.

    Depending on their CSS class names, you may need to look for code related to:

    /* Module Title Menu */
    .ModuleTitle_MenuContainer

    etc.

    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
    TommyOnDNN
    Nuke Ace
    Nuke Ace
    Posts:41


    --
    02/15/2010 2:38 PM
    Thanks Lee!

    Haven't solved the problem yet, however this tutorial will be way more benificial troubleshooting these kinds of errors in the future.
    TommyOnDNN
    Nuke Ace
    Nuke Ace
    Posts:41


    --
    02/15/2010 3:00 PM
    Ok, I've managed to find the CSS value in the DEFAULT.CSS file which controls the menu break:

    .ModuleTitle_MenuBreak

    {

    border-bottom: #EEEEEE 1px solid;

    border-left: #EEEEEE 0px solid;

    border-top: #EEEEEE 1px solid;

    border-right: #EEEEEE 0px solid;

    background-color: #EEEEEE;

    height: 1px;

    }

    However it is already set to 1px. Changing the value doesn't affect the seperator styling, except for changing it to huge values (100px for instance) which does increase the seperator's height.

    I've searched through all of the CSS and can't find another key called ".ModuleTitle_MenuBreak", which could possibly overwrite the ".ModuleTitle_MenuBreak" in DEFAULT.CSS.

    When I tried "Information > Display ID & Class" from the web developers toolbar, I found the menubreak seperator has the following ID:
    #dnn_ctrl406_dnnACTIONS_cltdnnACTIONSctr .ModuleTitle_MenuBreak break mi mi0-6 id
    which doesn't make much sense to me. Probably because the dropdown menu is dynamic.

    How do you recommend I proceed, fixing the seperator height?
    Lee Sykes
    DNN Creative Staff
    Nuke Master VI
    Nuke Master VI
    Posts:4945


    --
    02/15/2010 3:05 PM
    In the web developer toolbar try deleting all content from all of the CSS files except for the default.css file - all of the skin styling will be removed, but does the module menu now display correctly?
    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
    TommyOnDNN
    Nuke Ace
    Nuke Ace
    Posts:41


    --
    02/15/2010 3:06 PM
    Sorry, posted to quickly.

    it was:
    .ModuleTitle_MenuIcon
    {
    cursor: pointer;
    background-color: #EEEEEE;
    border-left: #EEEEEE 1px solid;
    border-bottom: #EEEEEE 1px solid;
    border-top: #EEEEEE 1px solid;
    text-align: center;
    width: 15px;
    height: 21px;
    }

    When I adjust the height to 1px everything is fine.

    Don't really understand how the skin could alter this value, since the skin, which is installed using the Administrator Menu (Portals\0\Skins\SKIN) shouldn't alter the DEFAULT.CSS should it?
    TommyOnDNN
    Nuke Ace
    Nuke Ace
    Posts:41


    --
    02/15/2010 3:25 PM
    Sorry,

    I've been being too hasty. It's the style.css, not the default.css that messes things up.

    The seperator size does get fixed when altering the heigh from 21px to 1px, however the menu still doesn't display correctly.

    I just found it is the a key in the STYLE.CSS, namely:

    /* begin LayoutCell */
    .art-contentLayout .art-sidebar1
    {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    overflow: hidden;
    width: 201px;
    }
    /* end LayoutCell */

    When I delete the "position: relative;" value, the menu displays correctly again. Don't know if I'm breaking something else by deleting that line though.

    However thanks for pointing me in the right direction on troubleshooting these problems. Very valueable.


    ---