Joomla Templates Club 406,261 posts

[mmservices Friend mmservicesJoin date: March 2011Posts: 25Downloads:0Uploads:4 Thanks: 6]

#162198

Hello to all,

I would like to change the colour of the ja_cssmenu, i’ve attached a screenshot of the area I want to change. It is the 2nd level menu. Only the color shall be changed, the transparency effect shall remain.

How to make those modifications?

Replacing the original trans-bg.png against another png did not work for some reason, although i guess that the new png was transparent too.

Please explain eventual procedures a bit in detail, if possible.

Kind regards in advance.

Best,

netshare

---

Attachments:

1. 

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#384311

Hi,
It’s right.New png must be transparent

1 user says Thank You to khoand for this useful post

1. mmservices

[mmservices Friend mmservicesJoin date: March 2011Posts: 25Downloads:0Uploads:4 Thanks: 6]

#384412

Dear khoand,

thank you for this input, that works like adviced.

In the context of the 2nd menu a further problem/question has arised:

When you look on our test-site at http://new.oeschger-brandschutz.ch , you see that the 2nd menu is set off vertically by a small gap from the horizontal main menu.

This is wanted.

The solution we have chosen is not quite the best. We have achieved this effect by adding a border with a white background onto the 2nd level ja-cssmenu li ul as you can see from the css code below:

/* 2nd level and above */
#ja-cssmenu li ul {
background: #e0e0e0;

border-top: 10px solid #ffffff; !important /*<—- Padding 2nd Menu from Horizontal Main Menu */
display: block;
border-bottom: 1px solid #202020;
}

This method is not really targeting for example if a shadow effect shall be added to the entire frame:

{

background: #e0e0e0;

border-top: 10px solid #ffffff; !important /*<—- Padding 2nd Menu from Horizontal Main Menu */
display: block;
border-bottom: 1px solid #202020;

/* Begin Added shadow effect */

-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000′)”;
/* For IE 5.5 – 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000′);

/*End Added Shadow Effect */

}

With the border-top element, the shadow effect would span over the whole construction vertically, including the border.

Which is unwanted.

Can you provide us with a better solution on how to solve that, respectively to bypass this problem?

Best regards,

Netshare

Best regards,

Netshare

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#384543

Hi,
I viewed your css: http://new.oeschger-brandschutz.ch/templates/ja_nickel/ja_menus/ja_cssmenu/ja.cssmenu.css file


#ja-cssmenu li a {
vertical-align: middle;
display: block;
text-decoration: none;
font-size: 100%;
color: #666;
padding: 0px 25px 0px 25px;
text-transform: regular;
line-height: 25px;
height: 25px;
border-bottom: 10px solid white !important; <-- gap
}

– It’s diference from you said. If you add shadow code into #ja-cssmenu li ul, it works normally

[mmservices Friend mmservicesJoin date: March 2011Posts: 25Downloads:0Uploads:4 Thanks: 6]

#384601

Dear khoand,

yes it’s true.

in the meantime we changed the ‘gap-instruction’ from #ja-cssmenu li ul (border-top: 10px solid #ffffff; !important) to #ja-cssmenu li a (border-bottom: 10px solid white !important;).

Why this?

It’s because with a border-top instruction the gap (10px) would also be included into the shadow.

This is unwanted, because the 10px shall span the 2nd menu from the horizontal main menu optically and the shadow border shall just cover parts of the 2nd menu.

and now comes the core-question:

if we change the border-instruction into the #ja-cssmenu li a -file, we can realize that shadow effect because the border instruction does not belong to the 2nd menu.

but doing so brings also an other unwanted side effect:

when somebody hovers over the white gap between the main menu and tne 2nd menu, then the the mouse is activated as like when hovering on the horizontal main menu item. Logically, because the white gap part belongs to #ja-cssmenu li a.

How can this problem be solved?

Can you recommend a ‘workaround’ to bypass this mouse-effect when hovering onto the white gap?

Or can you recommend a totally different solution to construct this white gap?

Any targeting advice is heavily appreciated.

Best,

Netshare

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#384724

Hi,
You add this code

top:40px
into #ja-cssmenu li ul

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#384731

Hi,
I don’t see 3rd menu level
<blockquote>
similar menu issue –> your help would be fantastic
dear khoand,

a few days ago you helped us out with the solution of a similar menu problem.

may we ask you again for your help?

we have a weird problem to be solved:

in our main menu (left side) we have 3 menu levels.

functionality is ok, menues are working technically well.

regarding the css design we notice a problem with the active/hover/passive state of the level 3 menu.

when the level 2 element (Sprinkler-Löschsysteme) gets an active state, all elements of level 3 (childs of ‘Sprinkler-Löschsysteme’ got an active state (underline).

this is wrong and unwanted.

our website: http://new.oeschger-brandschutz.ch

any targeting help is appreciated much.

with our best regards,

netshare
</blockquote>

[mmservices Friend mmservicesJoin date: March 2011Posts: 25Downloads:0Uploads:4 Thanks: 6]

#384823

Dear Khoand,

thank you for your message.

Yes, in the horizontal menu the 3rd menu is not visible, but on the left side menu you will notice that all 3rd menu items are underlined (see: screenshot).

Only the active item must be underlined.

We could not manage it via css instructions to correct this issue.

Here we need urgently a targeting advice.

For your help we thank you in advance.

Best regards,

Netshare

---

Attachments:

1. 

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#385356

Sorry for reply lately. I checked your website that works normally

[mmservices Friend mmservicesJoin date: March 2011Posts: 25Downloads:0Uploads:4 Thanks: 6]

#385408

Dear khoand,

yes, sure. now it is working normally.

we had assistance from Chavan, a forum member. It was a tricky thing with level3 active items.

Another problem with the menu styling:

Go to our website: http://new.oeschger-brandschutz.ch and check with internet explorer (IE7, IE8) the following:

1. hover on a active menu on the HORIZONTAL menu.

2. hover out from the active menu item down into the pulldown menu.

in safari and firefox the active state of the main menu item remains blue (background color) when hovering down into the pulldown menu.

in IE7 and IE 8 not.

This is wrong and unwanted.

Can you check this for us and advise us on how to solve this issue, please?

Best regards,

Herbert

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#385644

You try this way:
– Add this code into http://new.oeschger-brandschutz.ch/templates/ja_nickel/ja_menus/ja_cssmenu/ja.cssmenu.css file


#ja-cssmenu li:hover a.active{
background: #102b72;
}

1 user says Thank You to khoand for this useful post

1. mmservices

[mmservices Friend mmservicesJoin date: March 2011Posts: 25Downloads:0Uploads:4 Thanks: 6]

#385772

Dear Khoand,

thank you for your reply.

Again, your suggestion is absolutely perfect.

The solution works as you proposed: Internet Explorer (older than IE9) obviously demand this combinated instruction to be able to ‘keep in mind’ the active state of 1st level active items in the horizontal menu when hovering out to the 2nd level pulldown menu.

Thanks again for your support.

Best regards,

Herbert

[Author]

Posts