MozillaZine

assoc. icons with menu items + icon creators please help.

Discuss application theming and theme development.

rate this theme I am *still* working on.

I will use this as my default theme!!!
2
10%
It cool, but could use some polishing.
8
40%
I dont like it, but maybe others will.
7
35%
Totally blows!
3
15%
 
Total votes : 20

mozDude

User avatar
 
Posts: 228
Joined: November 5th, 2002, 1:34 pm
Location: ¢A, u$a

Post Posted November 5th, 2002, 3:34 pm

I am trying to figure out how I can associate icons with menuitems. For eg, if I wanted to associate a "scissor" icon with the "Cut" menu item, how would I go about doing that?

I looked around in the various .jar files for xul files that define menu items, but could exactly pinpoint where they (menu items in menu bar + context menu) are defined. Anyone can help me out???

here's a screenshot : (http://ajithd.tripod.com/themeCap.png) - copy and paste it into urlbar, or tripod will bitch about remote linking.

It's based on Classic, but has a flatter, more Office XP/VS.NETish look....and it is designed primarily for Win2K or XP with the Wndows Classic theme. It looks a bit funky with XP themes such as blue, silver etc.

As u can see, I still have to replace the navigation icons. I am not a graphics guy, so I am pretty pathetic when it comes to creating original icons. I am better at stealing icons :D ... Anyone want to help me out?? I am mostly looking for XP/OS Xish looking icons. You know the eyecandy stuff. Also I am looking for the spinning "busy" cursor that comes with OS X. I think that is kick ass and would make a great "loading..." icon for the tabs.

Please let me know about the icon-menuitem association thing....and let me know what you think of this *still* in thw works theme.

mozDude

User avatar
 
Posts: 228
Joined: November 5th, 2002, 1:34 pm
Location: ¢A, u$a

Post Posted November 6th, 2002, 8:04 am

No one knows how I can associate icons with menuitems???? Common, there have to be some supergurus here on this forum. I am almost a complete newbie when it comes to Theme creation. In fact this is the first theme I have ever creatyed for any program. It awesome that you can develop/modify a theme based on standards such as CSS.

Someone please help me! :cry: :cry: :cry: :cry: :cry:

grayrest

User avatar
 
Posts: 468
Joined: November 5th, 2002, 8:49 am
Location: Tribus!

Post Posted November 6th, 2002, 8:18 am

My guess is that you would use list-style-image, which is how the bookmarks images are put on the menus. If the menu item has an id (I'm too lazy to check) then you can easily associate an image with the icon. Here's the declaration of the menu items for bookmarks:
Code: Select all
.bookmark-item  {
  margin: 0px 2px;
  list-style-image: url("chrome://global/skin/icons/folder-item.png") !important;
  -moz-image-region: rect(0px 16px 16px 0px);
}

MXN

User avatar
 
Posts: 92
Joined: November 5th, 2002, 7:28 pm
Location: Stanford, California, United States

Post Posted November 6th, 2002, 2:52 pm

From what I've seen so far, some <code>menuitem</code>s have <code>id</code> attributes, but some don't. I was thinking to do the same thing with the theme I'm working on.

cdn

User avatar
 
Posts: 999
Joined: November 4th, 2002, 5:47 pm
Location: UK

Post Posted November 6th, 2002, 3:45 pm

you mean something like:

editor/EdImageMap.css:

Code: Select all
#cutButton {
  list-style-image: url("chrome://editor/skin/btn1/map-cut.gif");
}

mozDude

User avatar
 
Posts: 228
Joined: November 5th, 2002, 1:34 pm
Location: ¢A, u$a

Post Posted November 6th, 2002, 8:20 pm

What you say makes sense...use the menu ID...but the IDs I do find dont seem to work. I looked in comm.jar...i think the file was navigatorOverlay.xul. I tried the a couple of diff ids, but couldnt get it to work. Ill spend more time and try to figure it out...thanks for the tip.

In the mean time, if someone figures it out, please let me know.

mozDude

User avatar
 
Posts: 228
Joined: November 5th, 2002, 1:34 pm
Location: ¢A, u$a

Post Posted November 10th, 2002, 2:57 pm

I want to assign each of the default sidebar tabs an icon. For eg, the history tab in the sidebar will have a diff icon, search tab will have a diff icon and so on. I do not want the twisty-open/twisty closed icons for any of the default tabs in the sidebar. Any non-standard tab (say a Fedex tab) will use the twisty icons.

I read Willy Wonka's tutorial and used the DOM inspector to try and pinpoint what exactly to chnage.

From what I see, it looks like the ID for the Search tab is 'urn:sidebar:panel:search'.

SO I put this in my sidebar.css file:
Code: Select all
#urn:sidebar:panel:search{
    list-style-image: url('chrome://path/to/some/image.png');
}


But i do not see that icon. I know the path is right. I tried removing the twisty image refs in '.sbtab-twisty', but that did not help.

Am i missing something??

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 0 guests