Joomla Templates Club 406,261 posts

[timmiller Friend timmillerJoin date: August 2008Posts: 169Downloads:0Uploads:10 Thanks: 12 Thanked: 3 times in 1 posts]

#157535

Hey all,

I’ve followed the instructions here: http://wiki.joomlart.com/wiki/JA_Template_Framework/Navigation

But I’m unfortunately not getting an icon next to my submenu item.

Here is a link to the site: http://www.visualedge.biz/dfwcgi2

It should be next to “3-D Modeling” – I made sure it was a 16×16 png file.

Any thoughts?

Thanks!

[aman204 Friend aman204Join date: January 2010Posts: 1945Downloads:0Uploads:43 Thanks: 11 Thanked: 418 times in 356 posts]

#367186

I am able to see the image reference through debugging (firebug) but seems that it isnt rendering.

Can you try to instead assign one of default images which can be seen earlier? Also, You can try to give in less underscores for name of image file added

[timmiller Friend timmillerJoin date: August 2008Posts: 169Downloads:0Uploads:10 Thanks: 12 Thanked: 3 times in 1 posts]

#367203

Hi,

Which file? The demo site does not have any icons in the mega menu.

I took a date icon and moved it into the images/stories directory…here:
http://visualedge.biz/dfwcgi2/images/stories/icon-date.gif

I also renamed the linked icon as 16.png…here:
http://visualedge.biz/dfwcgi2/images/stories/16.png

Tried them both and neither work. I tried them both on different sub-sub nav menu items, still a no go. Both are 16×16 files, that can be viewed at the above link…not sure what’s up.

[aman204 Friend aman204Join date: January 2010Posts: 1945Downloads:0Uploads:43 Thanks: 11 Thanked: 418 times in 356 posts]

#367271

Will it be possible for you to please pm me superadmin details to take closer look

[aman204 Friend aman204Join date: January 2010Posts: 1945Downloads:0Uploads:43 Thanks: 11 Thanked: 418 times in 356 posts]

#367364

You can make these changes::

1) Change this::

ul.level1 li.mega a.mega span {light_ocean.css (line 350)
background:none repeat scroll 0 0 transparent !important;
}

to

/*ul.level1 li.mega a.mega span {light_ocean.css (line 350)
background:none repeat scroll 0 0 transparent !important;
}*/

2) Change this::

ul.level0 li.mega .has-image {mega.css (line 54)
background-position:left top;
background-repeat:no-repeat;
display:block;
padding-left:25px;
}

to

ul.level0 li.mega .has-image {mega.css (line 54)
background-position:left top;
background-repeat:no-repeat;
display:block;
padding-left:25px !important;
}

[timmiller Friend timmillerJoin date: August 2008Posts: 169Downloads:0Uploads:10 Thanks: 12 Thanked: 3 times in 1 posts]

#367387

Ok,

That did help out. Now I have a few different related problems. While I’m seeing the icons, they need to be moving menu itme text to right. They are behind menu item text now. Also, we seem to have adjusted the background color on sub menu group items, it is dark. I haven’t been able to locate where to change this in FireBug…

Thanks much!

[aman204 Friend aman204Join date: January 2010Posts: 1945Downloads:0Uploads:43 Thanks: 11 Thanked: 418 times in 356 posts]

#367438

<blockquote>While I’m seeing the icons, they need to be moving menu itme text to right. They are behind menu item text now.</blockquote>

Please make the update as seen in 2nd point. Add in !important behind property

<blockquote>Also, we seem to have adjusted the background color on sub menu group items, it is dark. I haven’t been able to locate where to change this in FireBug…</blockquote>

Frankly, Hover property debugging is real tough to do in firebug because as you move away from the hover item, the property will also tend to vanish in firebug so it is suggested to make these changes directly in css file 🙂

[timmiller Friend timmillerJoin date: August 2008Posts: 169Downloads:0Uploads:10 Thanks: 12 Thanked: 3 times in 1 posts]

#367480

Ok,

I found the background hover. it’s on line 190 in mega.css:

ul.level1 li.over, ul.level1 li.haschild-over { background: #E6F1F9; }

I had to do a screen grab, open photoshop, find the color, copy and paste into the css to find the line to change. I’m sure there is an easier way. It would be nice if you could do a search in firebug!

In a related question- I have some 32×32 images, in adjusting css, it seems that I can only have either 16×16 or 32×32 icons, and not one of each…easily. Just confirming.

Thanks for your help. I’m guessing the next version of T3 makes this easier correct?

[aman204 Friend aman204Join date: January 2010Posts: 1945Downloads:0Uploads:43 Thanks: 11 Thanked: 418 times in 356 posts]

#367491

<blockquote>In a related question- I have some 32×32 images, in adjusting css, it seems that I can only have either 16×16 or 32×32 icons, and not one of each…easily. Just confirming.

Thanks for your help. I’m guessing the next version of T3 makes this easier correct? </blockquote>

Globally, You can have padding value adjusted in accordance with image dimension. If you wish to adjust it indivually for menu item, You can let me know when you have placed the image to try out 🙂

[timmiller Friend timmillerJoin date: August 2008Posts: 169Downloads:0Uploads:10 Thanks: 12 Thanked: 3 times in 1 posts]

#367527

It’s up there now if you wanted to take a look. I do like the larger images. You can also see that the text of the menu item is cut off on right. I’m guessing it’s because of padding. They don’t really need to be 32×32, but I’d be interested in a way to maybe have sub menu headings one size and menu items under another size.

tm

[aman204 Friend aman204Join date: January 2010Posts: 1945Downloads:0Uploads:43 Thanks: 11 Thanked: 418 times in 356 posts]

#367547

Try add this at end of template.css file::

#ja-mainnav ul.level0 li.mega .group .group-title .has-image {padding-left:30px !important;}
#ja-mainnav ul.level0 li.mega .group .group-title a.mega{padding:7px 0px !important;}

[timmiller Friend timmillerJoin date: August 2008Posts: 169Downloads:0Uploads:10 Thanks: 12 Thanked: 3 times in 1 posts]

#367783

aman204,

That is very helpful. I can see that adjusting the padding on the top line, it only affects the top submenu item. Thanks!

I can now adjust the sub menu items using line 54 in mega.css which will not affect other icon padding.

Very helpful. thanks for all the work!

Tim

[timmiller Friend timmillerJoin date: August 2008Posts: 169Downloads:0Uploads:10 Thanks: 12 Thanked: 3 times in 1 posts]

#368832

Ok,
I’ve got a new problem with the Mega Menu on this template. I’m not sure if it was here all along or not. If you click on any menu item, then go back and hover over the main menu item to show the mega menu, ALL ICONS are missing. They do not show up…

This is only for items that are mapped to K2 Items. If I go in and map a menu item to a Joomla article, all icons are still there…

Any thoughts?

Does this happen with the newer templates? I’ve spent so much time modifying this template, I’m getting quite frustrated…but don’t want to switch to another one if it is going to be the same issue…

Thanks in advance,

[aman204 Friend aman204Join date: January 2010Posts: 1945Downloads:0Uploads:43 Thanks: 11 Thanked: 418 times in 356 posts]

#368877

Try make this change::

Comment out these ::

ul.level0 li.active a.mega span {light_ocean.css (line 335)
background:url(“../../images/light_ocean/mainlevel-activ.gif”) no-repeat scroll right top transparent !important;
}

and

ul.level0 li.active a.mega span, ul.level0 li.active a.over span.menu-title {mega.css #2 (line 98)
background:url(“../../images/mainlevel-active.gif”) no-repeat scroll right top transparent;
}

like this::

ul.level0 li.active a.mega span {light_ocean.css (line 335)
/*background:url(“../../images/light_ocean/mainlevel-activ.gif”) no-repeat scroll right top transparent !important;*/
}

[timmiller Friend timmillerJoin date: August 2008Posts: 169Downloads:0Uploads:10 Thanks: 12 Thanked: 3 times in 1 posts]

#368919

aman,

That did it, thanks so much!

[Author]

Posts