Using images as menu - New to DNN Platform

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

Home All Forums

1
2
3
4
5

1/6/2014 4:00 AM

Muhammad Ihsan Wan Khairuzzaman

Joined: 12/22/2013

Posts: 5

Using images as menu

I'm trying to change how my menu looks. I want to use images instead of text. Any way to do this? The 'Icon' and 'Large Icon' in the Page Settings page doesn't seem to do anything.

1/6/2014 11:54 AM

cathal connolly

www.cathal.co.uk
Joined: 4/9/2003

Posts: 9676

Re: Using images as menu

the icon is used in menus that support icons beside the page name, and the largeicon is used when the console module is shown e.g. click the admin or host pages and you'll see the console lists. I'm assuming you're using the 7.2.0 release in which case it's menu does not show the icons (showing icons went out of style a little so our last 3 skins have not shown them). You can update the menu to so if you want e.g. edit Portals\_default\Skins\Gravity\Simple\simpletokens.txt to use the icon token (http://www.dnnsoftware.com/wiki/Page/...) . Alternatively create your own menu (see http://www.dnnsoftware.com/wiki/page/... - I find razor the easiest and most powerful option). Note: you may find something appropriate at http://dnnddrmenutemplates.codeplex.com/

Buy the new Professional DNN7: Open Source .NET CMS Platform book Amazon US

1/6/2014 9:49 PM

Muhammad Ihsan Wan Khairuzzaman

Joined: 12/22/2013

Posts: 5

Re: Using images as menu

<ul id="dnn_pnav">
[*>NODE]
</ul>
[>NODE]
<li>
[?ENABLED]
<a

href="[=URL]" target="[=TARGET]">[=TEXT]</a>
[?ELSE]
<span>

[=TEXT]</span>
[/?]
[?NODE]
<ul>
[*>NODE]
</ul>

[/?]
</li>
[/>]

<script type="text/javascript">
(function($){
$().ready

(function(){
$("#dnn_pnav > li > ul li").mouseover(function(e){

var subMenu = $(">ul", $(this));
if

(subMenu.length > 0){
var offset = subMenu.offset

();
var rightEage = offset.left +

subMenu.outerWidth();
if(rightEage >

$(window).width()){
subMenu.css("left",

(parseInt(subMenu.css("left")) - (subMenu.outerWidth() + $(this).width())) +

"px");
}
}

e.stopPropagation();
});
});
})(jQuery);
</script>

here is the simpletoken.txt file.

Which part do i edit to change the text to image? I tried to edit the [text] part to [largeimage] but it just display the url of the image and when I clicked on it, it directs me to the image. It doesn't change the menu to use images

1/7/2014 9:11 AM

cathal connolly

www.cathal.co.uk
Joined: 4/9/2003

Posts: 9676

Re: Using images as menu

you don't change, you add (i.e., you want both text and an image in the menu) - just add the [ICON] beside the text

Buy the new Professional DNN7: Open Source .NET CMS Platform book Amazon US

Page 1 of 1

These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
No Flaming or Trolling.
No Profanity, Racism, or Prejudice.
Site Moderators have the final word on approving / removing a thread or post or comment.
English language posting only, please.

Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

DNN Corp. (DotNetNuke)