NetTalk Central

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

michelis

  • Hero Member
  • *****
  • Posts: 1192
    • 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
  • Sr. Member
  • *****
  • Posts: 483
    • 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.15
String Theory 2.70
X-Files 2.95
Clarion 10.12799
Insight 2  2.27
Draw 4.15
Cryptonite 1.87
File Explorer 5.61
WinEvent  5.15
FM3   5.32
GPF Reporter 2.35
Hyperactive 2.13
jFiles 1.57
MessageBox  2.39
Windows 10 64bit
Browser:  Firefox 57.0.4

michelis

  • Hero Member
  • *****
  • Posts: 1192
    • 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
  • Sr. Member
  • *****
  • Posts: 483
    • 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.15
String Theory 2.70
X-Files 2.95
Clarion 10.12799
Insight 2  2.27
Draw 4.15
Cryptonite 1.87
File Explorer 5.61
WinEvent  5.15
FM3   5.32
GPF Reporter 2.35
Hyperactive 2.13
jFiles 1.57
MessageBox  2.39
Windows 10 64bit
Browser:  Firefox 57.0.4

bshields

  • Sr. Member
  • ****
  • Posts: 272
    • 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
  • Sr. Member
  • *****
  • Posts: 483
    • View Profile
    • Email
Re: How to extract an icon from a multi icon png
« Reply #5 on: Today at 01:52:47 AM »
Good info Brian!
NetTalk 10.15
String Theory 2.70
X-Files 2.95
Clarion 10.12799
Insight 2  2.27
Draw 4.15
Cryptonite 1.87
File Explorer 5.61
WinEvent  5.15
FM3   5.32
GPF Reporter 2.35
Hyperactive 2.13
jFiles 1.57
MessageBox  2.39
Windows 10 64bit
Browser:  Firefox 57.0.4