Thread

If you are using NSM Morphine Theme for the control panel and have updated to EE version 2.1.3 you might be seeing some funky CSS conflicts in CP navigation menu (arrows messed up, spacing on active top level nav links is off).

This CSS will help:

#navigationTabs li li.parent:focus > a, #navigationTabs li li.parent.active > a {
    background-color: inherit;
}

#navigationTabs li li.parent:focus, #navigationTabs li li.parent.active {
    background-image: url("../../images/bg/nav_arrow_light.png");
    background-repeat: no-repeat;
    background-position: right center;
}

#navigationTabs li li.parent:focus > a:after,
#navigationTabs li li.parent.active > a:after {
    content: none !important;
}

#navigationTabs > .parent:focus > a:after,
#navigationTabs > .parent.active > a:after {
    content: none !important;
}

#navigationTabs > li.parent.active >  a {
    padding-right: 25px;
}

It isn’t perfect but it does fix the most distracting bits.

Add it to the end of /themes/third_party/nsm_morphine_theme/styles/screen/cp_tweaks.css

Hey thanks!  I had turned off the Morphine theme due to the goofy images in 2.1.3.  I’ll give this a shot.  Thanks for posting it!

You bet! I had done the same, but in a fit of insomnia last night decided I’d fix it enough to turn back on.

Thanks for this quick fix. For some reason, I have to change the last line of your CSS to 21px padding right to keep my menu from jumping around:

#navigationTabs > li.parent.active >  a {
padding-right: 21px;
}

I’m noticing some inconsistencies in this CSS fix across different browsers.  Could be that.

Actually I just looked at my CP in Chrome and Safari and noticed the CSS isn’t kicking in at all (I only tested it in Firefox).

I’m noticing some inconsistencies in this CSS fix across different browsers.  Could be that.

Actually I just looked at my CP in Chrome and Safari and noticed the CSS isn’t kicking in at all (I only tested it in Firefox).

I have only looked at it in FF 3.6.13 on the Mac so far. This is where I noticed the kick. Weird…

A more consistent fix than adjusting the padding might be to comment out lines 84-92

#navigationTabs > li.parent >  a:after{
    font-family:arial;
    color:#5d666e;
    content: "▼";
    font-size:6px;
    margin-left:5px;
    position:relative;
    top:-2px;
}

in /themes/third_party/nsm_morphine_theme/styles/screen/cp_tweaks.css

Instead of my earlier suggestion of adding

#navigationTabs > li.parent.active >  a {
    padding-right: 25px;
}

...which isn’t consistent even for different users on the same browser…

So the new CSS I’m using (in addition to commenting out lines 84-92) is:

#navigationTabs li li.parent:focus > a, #navigationTabs li li.parent.active > a {
    background-color: inherit;
}

#navigationTabs li li.parent:focus, #navigationTabs li li.parent.active {
    background-image: url("../../images/bg/nav_arrow_light.png");
    background-repeat: no-repeat;
    background-position: right center;
}

#navigationTabs li li.parent:focus > a:after,
#navigationTabs li li.parent.active > a:after {
    display: none;
}

#navigationTabs > .parent:focus > a:after,
#navigationTabs > .parent.active > a:after {
    display: none;
}

This is consistent in Firefox, Chrome, and Safari on a Mac.

Thank you for the fix! That works well, but you lose the “▼” beside the menu item, which is not a big deal for me at all. Morphine + Anti-Pink is much better than the default theme any day!

That works well, but you lose the “▼” beside the menu item

Yeah, I tried to make a fix that would keep that in, but for some reason there is a conflict when adding .active to li.parent.  After spending too much time in Firebug and not finding it I gave up. 

I’ll let you know if I get that sorted.

Make sure to update all your -webkit- -moz- rules to include the non-prefixed versions too so that IE9 & Opera users can see the styles too.

Thanks for the fix!
But I still have some css problems, please fing the screenshot attached.
Is there anything that can be done to fix this?

Thank you!

Hmm, I’m not seeing CSS problem in my accessories panels.  I don’t have the same ones installed, so maybe it’s specific to those accessories (but I kind of doubt it). 

What operating system, browser, and browser version are you seeing this in?

Well from the screenshot it looks like for some reason the background color isn’t being applied correctly to your accessories panel.

This is line 3014 in global.css

#accessoriesDiv .accessory {
    background-color: #243038;
}

And should give you the right color. Try looking at it with Firebug and see if something is overriding that color.

Here’s a screenshot of the needed part of the global.css, looks like everything is in it’s place.
I’m using Safari 5.0.3 under MAC OS X 10.6.6 and Firefox 3.6.8. under Windows XP. The result is the same in the both browsers and OS-es.

I’ve managed to solve the problem by manually re-installing all the NSM add-ons - NSM Morphine and NSM Addon Updater.
Thank you for your help!