CommandButton custom Icon size

Next
 From:  mkdm
7860.1 
Hi everyone,

I'm trying to make a test to create a little extension of the Moi's UI and i wish to know if is it possible to specify an image icon dimension for the CommandButton elements of the UI.

I would set some elements to have icon size of 32pixels while some other 64pixels or bigger.

Nice day,

Marco.

EDITED: 23 Feb 2016 by MKDM

  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  Michael Gibson
7860.2 In reply to 7860.1 
Hi Marco, although the PNG image files for command buttons are 64x64 pixels in size, the actual size in the UI is relative to your current UI font size (set under Options > General > UI Size), and the images are shrunken or stretched as needed.

So just changing the PNG images to be a smaller size will not have any effect, other than to make them more blurry.

The command button icon size is controlled by this part of the moi.css file:

code:
moi\:CommandButton > img, moi\:CommandMenuButton > img, moi\:CommandSplitButton > img {
	width:3.25em;
	height:3.25em;
}


The "em" units used there are relative to the current font size, 1 em = font size in points.

To make a custom command button with a smaller icon you could add in a new entry in the moi.css file right below the above one, and have it say something like this:

code:
moi\:CommandButton.small_icon > img {
	width:2.25em;
	height:2.25em;
}


That means that a command button with a CSS class of "small_icon" will override the regular width and height with a smaller one. Then modify the command buttons that you want to have smaller by putting in class="small_icon" in them something like this:

code:
    <moi:CommandButton icon="icons/ConeIcon.png" class="small_icon" command="cone"><moi:Text textid="Cone"/></moi:CommandButton>


The PNG file itself does not have to be smaller, they can remain at 64x64 pixels, the UI will automatically shrink it to fit in the smaller space.

- Michael
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
Next
 From:  mkdm
7860.3 In reply to 7860.2 
Hi Michael,

Thank you so much for your accurate instructions about my question.

I think i'll use a custom CommandButton defined as follow, to accomplish what i want to do :
moi\:CommandButton.small_icon > img {
width:6em; (or 64-96px)
height:6em; (or 64-96px)
}

I should like to echo the appreciative words about the way you maintain live and challenging this forum.

Marco.
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged

Previous
 From:  Michael Gibson
7860.4 In reply to 7860.3 
No problem Marco. 6em will be a pretty large image though. But you can tune that number to whatever size works best for you.

- Michael
  Reply Reply More Options
Post Options
Reply as PM Reply as PM
Print Print
Mark as unread Mark as unread
Relationship Relationship
IP Logged
 

Reply to All Reply to All