Some suggestions: allow NO CSS & JS and change arrow image

Aug 5, 2010 at 11:37 PM
Edited Aug 6, 2010 at 12:00 AM

I have a few suggestions,

I would like to be able to not load any CSS or JS so I can add my own to the skin.

Say: LoadCss="False" & LoadJs="False"

It would also be cool if the base image (the arrow) would be changeable (for styling purposes).
I think a CSS (sprite) would be the most flexible solution (because it can be overruled from the skin).

Also, I don't want to be overly critical, but I think if you would change the default color to a more neutral color (White / Grey), the skin object would seem lot more usable for the average user.
( I know it's only the first impression, but it helps)

The idea of adding skins (you mention on the home page) seems like a good thing to do too.

If you need some help creating some variation, let me know.

Thanks, Timo

Aug 5, 2010 at 11:58 PM

I suggest something like this as a more neutral "design"

 


/*********************
 Main styles
*********************/
/* menu wrapper */
.ModulOptionsMenu { }
/* all list items */
.ModulOptionsMenu li {cursor:pointer;padding-left: 6px;padding-top: 1px;}

/* all links within the menu wrapper */
.ModulOptionsMenu li li a { padding-left: 5px;line-height: 20px;color:#222;text-decoration:none;}
/*********************
 SubMenu styles
*********************/

/* MainSubmenu  */
.ModulOptionsMenu li ul {
    width: 15em;/* width of submenu, must be set so third-level list can get shifted over properly */
    left: -9999px; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    margin: 0 0 0 -6px;
    background-color: #F8F8F8;
    border:1px solid #aaa;

    z-index:30000;
    -moz-box-shadow: 3px 3px 3px #888;
    -webkit-box-shadow: 3px 3px 3px #888;
    box-shadow: 3px 3px 3px #666;
    opacity:.95;
   
    border-radius: 0.4em;
    -webkit-border-radius: 0.4em;
    -moz-border-radius: 0.4em;
}
* html .ModulOptionsMenu li ul {margin: 12px 0 0 -19px;}

*:first-child+html .ModulOptionsMenu li ul {margin: 15px 0 0 -19px;}

/* second-level lists-and-above-level lists */
.ModulOptionsMenu li ul ul { margin: -26px 0 0 6em;background-color: #fff;}

* html .ModulOptionsMenu li ul ul {margin: -2px 0 0 0px;}

*:first-child+html .ModulOptionsMenu li ul ul {margin: -26px 0 0 0em;}

/* styles for top level */
.ModulOptionsMenu li li:hover,.ModulOptionsMenu li li.sfhover {background: #ddd;}
* html .ModulOptionsMenu li {padding-right:5px;}

.ModulOptionsMenu ul li:hover,.ModulOptionsMenu ul li.sfhover  {background: #ddd; padding-top: 1px;padding-left: 6px;
border-left:left: 1px solid black;
border-right:left: 1px solid black;
    }

/* style for arrow gif */
.ModulOptionsMenuArrow { }

/* style Icon */
.ModulOptionsMenu li li img  {margin-left:0px! important;margin-top:2px! important;}

Coordinator
Aug 7, 2010 at 3:41 PM
Edited Aug 7, 2010 at 3:46 PM
timo_design wrote:

I would like to be able to not load any CSS or JS so I can add my own to the skin.

Say: LoadCss="False" & LoadJs="False"

 Done IncludeJs="True" is the Default Value

timo_design wrote:

The idea of adding skins (you mention on the home page) seems like a good thing to do too.

If you need some help creating some variation, let me know.

Thanks, Timo

 Ok there is a new Value IncludeCssFile="True" Default is True and CssFile="ModuleMenu-Grey" is the new Default. there is also my old one CssFile="ModuleMenu-Red". There will be a Folder with Default Skins, that can be loaded (What Variations can you make?). If some body want to use the skin.css instead of my one. Just set IncludeCssFile="False". I think thats the best solution

timo_design wrote:

It would also be cool if the base image (the arrow) would be changeable (for styling purposes).
I think a CSS (sprite) would be the most flexible solution (because it can be overruled from the skin).

 Done.

/* Main Icon (Arrow Image) */
.ModuleOptionsMenuMainIcon {background: url('action.gif') no-repeat;width:13px;height:13px;}

and the other One

/* style for arrow gif */
.ModuleOptionsMenuArrow {background: url('arrow.gif') no-repeat;width:16px;height:16px;padding-left:16px}

timo_design wrote:

Also, I don't want to be overly critical, but I think if you would change the default color to a more neutral color (White / Grey), the skin object would seem lot more usable for the average user.
( I know it's only the first impression, but it helps)

The Reason why i choose Red was because mostly only Admins can see this Menus, and red is the perfect color for that.

Coordinator
Aug 7, 2010 at 5:44 PM

New Version is Online i included 4 Different Variations, of Colors.

Since i am addicted to those nice CSS Gradients i added them to the Skins

OldNew

Aug 7, 2010 at 11:49 PM

Great! Very cool!

Thanks!