z-index problem with personaltools

[tkimnguyen]

In Plone 4.1 when I install dropdownmenu 2.2 the personaltools drop down (when I'm logged in) is hidden where it overlaps with the globalnav (portal tabs) because dropdownmenu specifies z-index 3 in some places and 10 in others. The workaround for personaltools is to add this to ploneCustom.css:

dl #portal-personaltools { z-index:20!important; }

Is there a specific reason for having z-index 3 or 10 in your product? If so, could you include a z-index value for personaltools too?

[allnode]

Where in the ploneCustomer.css should I add

dl #portal-personaltools { z-index:20!important; }

/* uncomment the below selector to get a fixed-width layout. *

• 60em is equivalent to 960px in this case, and every *
• grid cell will be 40px with 10px padding. */

/* #visual-portal-wrapper { width: 60em; margin: 0 auto; } */

/* To change the link color (or the navigation link background), uncomment *

• the selectors below, and insert new color values: */

/* a:link, a:visited, #content a:link, #content a:visited, dl.portlet a:link, dl.portlet a:visited { color: red; }

portal-globalnav .selected a, #portal-globalnav a:hover {

background-color: red; } */

/* To change the edit bar color, uncomment the selectors below, and insert *

• new color values: */

/*

contentActionMenus,

dl.actionMenu.activated dd,

content-views,

edit-bar {

background-color: blue; border-color: blue; } dl.actionMenu a { background-color: blue; } */

/* If you want to hide the path bar (aka. breadcrumbs), uncomment the below: */

/*

breadcrumbs-you-are-here,

breadcrumbs-home,

breadcrumbs-current,

breadcrumbs-1 {

display: none; } */

/* If you want variables in the CSS (for example for colors that are used *

• in several locations), Plone has a built-in facility for this. An example *
• is shown below, the variables are defined in the file "base_properties", *
• and below we show the syntax for using them directly in the CSS file. *
• Note that you always need to surround the relevant part (or the entire CSS *
• file) with the dtml-with statements for it to work. */

/*

/*

#content a:link { color: &dtml-linkColor;; }

*/

[tkimnguyen]

It looks like everything in your ploneCustom.css above is already commented out, so I'd say add those lines I suggested anywhere.

[allnode]

I am not familiar with the CSS syntax and tried a number of things including the following to no avail. Appreciate if you can give me some more details. BTW, I changed the sunburst plone.Customer css.

portal-globalnav dl #portal-personaltools {

z-index:20!important; }

/* uncomment the below selector to get a fixed-width layout. *

• 60em is equivalent to 960px in this case, and every *
• grid cell will be 40px with 10px padding. */

/* #visual-portal-wrapper { width: 60em; margin: 0 auto; } */

/* To change the link color (or the navigation link background), uncomment *

• the selectors below, and insert new color values: */

/* a:link, a:visited, #content a:link, #content a:visited, dl.portlet a:link, dl.portlet a:visited { color: red; }

portal-globalnav .selected a, #portal-globalnav a:hover {

background-color: red;

} */

/* To change the edit bar color, uncomment the selectors below, and insert *

• new color values: */

/*

contentActionMenus,

dl.actionMenu.activated dd,

content-views,

edit-bar {

background-color: blue;
border-color: blue;

} dl.actionMenu a { background-color: blue; } */

/* If you want to hide the path bar (aka. breadcrumbs), uncomment the below: */

/*

breadcrumbs-you-are-here,

breadcrumbs-home,

breadcrumbs-current,

breadcrumbs-1 {

display: none;

} */

/* If you want variables in the CSS (for example for colors that are used *

• in several locations), Plone has a built-in facility for this. An example *
• is shown below, the variables are defined in the file "base_properties", *
• and below we show the syntax for using them directly in the CSS file. *
• Note that you always need to surround the relevant part (or the entire CSS *
• file) with the dtml-with statements for it to work. */

/*

/*

#content a:link { color: &dtml-linkColor;; }

*/

[tkimnguyen]

Sorry, if you're not familiar with CSS syntax you should probably not try to do this.