NetTalk Central

NetTalk Web Server => Web Server - Ask For Help => Topic started by: Alberto on May 18, 2018, 06:20:55 AM

Title: How to extract an icon from a multi icon png
Post by: Alberto 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

Title: Re: How to extract an icon from a multi icon png
Post by: DonRidley 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)

Title: Re: How to extract an icon from a multi icon png
Post by: Alberto 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?

Title: Re: How to extract an icon from a multi icon png
Post by: DonRidley 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

Title: Re: How to extract an icon from a multi icon png
Post by: bshields 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

Title: Re: How to extract an icon from a multi icon png
Post by: DonRidley on May 20, 2018, 01:52:47 AM

Good info Brian!

Title: Re: How to extract an icon from a multi icon png
Post by: Alberto 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.

Title: Re: How to extract an icon from a multi icon png
Post by: bshields 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.

Title: Re: How to extract an icon from a multi icon png
Post by: Alberto 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.

Title: Re: How to extract an icon from a multi icon png
Post by: Bruce 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)

Title: Re: How to extract an icon from a multi icon png
Post by: Alberto 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