NetTalk Central

Author Topic: How to extract an icon from a multi icon png  (Read 402 times)

michelis

  • Hero Member
  • *****
  • Posts: 1231
    • MSN Messenger - alberto-michelis@hotmail.com
    • View Profile
    • ARMi software solutions
    • Email
How to extract an icon from a multi icon png
« on: May 18, 2018, 06:20:55 AM »
Hi,
How can I use an icon from the multi icons png provided?
I want to use it in a browse column.
Thanks
-----------
Regards
Alberto

DonRidley

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 560
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: How to extract an icon from a multi icon png
« Reply #1 on: May 18, 2018, 01:18:07 PM »
https://www.w3schools.com/css/css_image_sprites.asp


<img id="home" src="img_trans.gif"> - Only defines a small transparent image because the src attribute cannot be empty. The displayed image will be the background image we specify in CSS
width: 46px; height: 44px; - Defines the portion of the image we want to use
background: url(img_navsprites.gif) 0 0; - Defines the background image and its position (left 0px, top 0px)
NetTalk 10.32
Clarion 10.12799

michelis

  • Hero Member
  • *****
  • Posts: 1231
    • MSN Messenger - alberto-michelis@hotmail.com
    • View Profile
    • ARMi software solutions
    • Email
Re: How to extract an icon from a multi icon png
« Reply #2 on: May 19, 2018, 06:21:06 AM »
Thanks Don,
So, if I want to use one of this icons in a NT button Ill have to do a class for each icon?
like:

.my-calc-icon-button {
    width: 46px;
    height: 44px;
    background: url('img_navsprites.gif') -70px 15px;
}

and hows the better way or software to, given the collection, know wich is the top and left of the image you want?
-----------
Regards
Alberto

DonRidley

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 560
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: How to extract an icon from a multi icon png
« Reply #3 on: May 19, 2018, 12:06:56 PM »
I'm not sure. 

You can use your the inspection tool in Firefox or Chrome and edit the class' CSS attributes in real time.  Adjust the left and top values until you get it where you want.  Then save your custom class values as you need.

Don
NetTalk 10.32
Clarion 10.12799

bshields

  • Sr. Member
  • ****
  • Posts: 318
    • View Profile
    • Inhabit
    • Email
Re: How to extract an icon from a multi icon png
« Reply #4 on: May 19, 2018, 04:17:05 PM »
Hi,

Built into NetTalks jquery-ui.css files are the CSS styles you need.

If you go to http://jqueryui.com/themeroller/ and down to the "Framework Icons" heading, you'll see the built in icons NetTalk uses from jquery-ui.

You just need to hover over the icon you want to see its CSS class.

For example:

The alert (warning) icon's CSS style is:

ui-icon-alert

To use this inside NetTalk specify your CSS as:

'ui-icon ui-icon-alert'

So, you don't need to create your own CSS as its already done by jquery ui and included automatically as part of your NetTalk theme.

Regards
Bill

DonRidley

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 560
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: How to extract an icon from a multi icon png
« Reply #5 on: May 20, 2018, 01:52:47 AM »
Good info Brian!
NetTalk 10.32
Clarion 10.12799

michelis

  • Hero Member
  • *****
  • Posts: 1231
    • MSN Messenger - alberto-michelis@hotmail.com
    • View Profile
    • ARMi software solutions
    • Email
Re: How to extract an icon from a multi icon png
« Reply #6 on: May 21, 2018, 05:48:33 AM »
Thanks Brian but... it does not work.
See atached image...
The NT change icon is still there and the calculator icon is shifted and then you can see three icons.
Another problem is that it depends on the Theme, se second image in Base.
« Last Edit: May 21, 2018, 07:05:58 AM by michelis »
-----------
Regards
Alberto

bshields

  • Sr. Member
  • ****
  • Posts: 318
    • View Profile
    • Inhabit
    • Email
Re: How to extract an icon from a multi icon png
« Reply #7 on: May 21, 2018, 04:47:50 PM »
Well it depends upon how you want to use it.

To make a button:

Text: ''<span class="ui-icon ui-icon-plus"></span>''
Css: nothing

Turn off jquery styling

It will definitely depend upon the theme as the CSS is a fundamental part of the theme.


michelis

  • Hero Member
  • *****
  • Posts: 1231
    • MSN Messenger - alberto-michelis@hotmail.com
    • View Profile
    • ARMi software solutions
    • Email
Re: How to extract an icon from a multi icon png
« Reply #8 on: May 22, 2018, 02:48:48 AM »
I dont want to make a button.
I just want to use one of the theme provided icon in a NT button, for example change the "Change" icon button.
How does Bruce use it?
He use this icons on all NT buttons.
-----------
Regards
Alberto

Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 9320
    • View Profile
Re: How to extract an icon from a multi icon png
« Reply #9 on: May 24, 2018, 01:57:13 AM »
>> How can I use an icon from the multi icons png provided?
>> I want to use it in a browse column.

Column properties
Image tab
Display jQuery Icon.
Use the name, without the ui- part. (see attached pic)

michelis

  • Hero Member
  • *****
  • Posts: 1231
    • MSN Messenger - alberto-michelis@hotmail.com
    • View Profile
    • ARMi software solutions
    • Email
Re: How to extract an icon from a multi icon png
« Reply #10 on: May 24, 2018, 02:03:18 AM »
Sory but in a browse column button, a Change button in this case, I dont have this option.
This Tab hides when I choose Button.
see attavhed pic
« Last Edit: May 24, 2018, 02:07:11 AM by michelis »
-----------
Regards
Alberto