• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Edit node icon

Shelley

Well-known member
#3
As DD mentioned the icons are available i designed that you can modify/re-colour and save out individually. I'm sure i moved the squared node icons to the Rm but I'm not sure whether i moved the original default more rounded ones across to the resource manager so you may need to check in the graphics archive.
 
#5
As DD mentioned the icons are available i designed that you can modify/re-colour and save out individually. I'm sure i moved the squared node icons to the Rm but I'm not sure whether i moved the original default more rounded ones across to the resource manager so you may need to check in the graphics archive.
I think this is to complicated for me :(
I wanna make my own icon i dont want that bubble but i dont know how to do.
 

Shelley

Well-known member
#7
Buy Shelley a bottle a wine via Paypal and get her to do your work ?
I'm not taking on custom work.

At OP I suggest you google search <program> you want to use there's plenty of free alternatives and then search for < program tutorials> there's no specific way anyone can advise the technique you use or features in a graphics program to get the result your looking for or the design for that matter unless you make a request or someone may step in and spend the time explaining after you give the specifications of the design your aiming to craft out.
 
#8
I'm not taking on custom work.

At OP I suggest you google search <program> you want to use there's plenty of free alternatives and then search for < program tutorials> there's no specific way anyone can advise the technique you use or features in a graphics program to get the result your looking for or the design for that matter unless you make a request or someone may step in and spend the time explaining after you give the specifications of the design your aiming to craft out.
I wanna learn how to desgin own icons for this what word should i google after?
 
#10
Depends, if you wanting something that's free you can always try GIMP and then once installed start reading tutorials familiarizing yourself on how to use it.

You can also try photoshop there's currently a free trial of photoshop cs6 beta
My english is bad sorry for that.
I have adobe Photoshop but i dont know how to design do you know where i can look at some tutorial for this so i can create my own icons?
 
#11
I dont understand this node-sprite.png before it was 2 files rean and unread can somebody please link some kind of tutorial how i can do my own icons? :,(
 

CTXMedia

Formerly CyclingTribe
#12
I dont understand this node-sprite.png before it was 2 files rean and unread can somebody please link some kind of tutorial how i can do my own icons? :,(
A sprite sheet is a collection of graphic items in one single image file. In the case of the new node icons, it's four different node icons in one image file.

XF then uses co-ordinates to make a lens which highlights the part of the image it needs to use at the time ... like this:

FULL sprite sheet:

node-sprite.png

Unread icon (visual example of what it looks like to your visitor when the lens is applied and the part of the image you are using is selected):

node-sprite-mask-01.png

Same again with a different icon from the sprite sheet:

node-sprite-mask-02.png

So ... that's how the icons work. XF uses the co-ordinates to define the size and shape of the icon, then uses just that part of whole image to display the select smaller part of it on the page.

You can edit the templates to define the area of the icon you wish to use so if you want to create bigger or smaller ones you just redefine the sprite size.

So, to get started, you just need to design your individual icons and then place them all together on a single image to create your sprite sheet.

Once you've done that, post here again and we'll help you integrate your icons into your layout.

Cheers,
Shaun :D
 
#13
A sprite sheet is a collection of graphic items in one single image file. In the case of the new node icons, it's four different node icons in one image file.

XF then uses co-ordinates to make a lens which highlights the part of the image it needs to use at the time ... like this:

FULL sprite sheet:

View attachment 27426

Unread icon (visual example of what it looks like to your visitor when the lens is applied and the part of the image you are using is selected):

View attachment 27427

Same again with a different icon from the sprite sheet:

View attachment 27428

So ... that's how the icons work. XF uses the co-ordinates to define the size and shape of the icon, then uses just that part of whole image to display the select smaller part of it on the page.

You can edit the templates to define the area of the icon you wish to use so if you want to create bigger or smaller ones you just redefine the sprite size.

So, to get started, you just need to design your individual icons and then place them all together on a single image to create your sprite sheet.

Once you've done that, post here again and we'll help you integrate your icons into your layout.

Cheers,
Shaun :D
Thank you =)
If i wanna have diffrent nodes for diffrent categories how can i do that?
 

Shelley

Well-known member
#15
No probs - glad it was helpful.

Unfortunately I've no idea how to do separate node icons - but it is described in this thread, so hopefully this will help too: http://xenforo.com/community/threads/rc-1-custom-node-status-icons-read-unread.10886/

Cheers,
Shaun :D
Thank you =)
If i wanna have diffrent nodes for diffrent categories how can i do that?
The easiest method I can suggest is right clicking, and looking at your source code finding out the node id your forums are using as each forum node id will differ. If your having difficulty doing this using the link Shaun provided you may want to post a link to your forum and others will be able to tell you the node id's you have. Pending the forums aren't hidden.
 
#16
No probs - glad it was helpful.

Unfortunately I've no idea how to do separate node icons - but it is described in this thread, so hopefully this will help too: http://xenforo.com/community/threads/rc-1-custom-node-status-icons-read-unread.10886/

Cheers,
Shaun :D
The easiest method I can suggest is right clicking, and looking at your source code finding out the node id your forums are using as each forum node id will differ. If your having difficulty doing this using the link Shaun provided you may want to post a link to your forum and others will be able to tell you the node id's you have. Pending the forums aren't hidden.
This looks difficult i will try it =) thanky you for the help
The thread is closed and i cant post there i saw that the png's was read and unread how do i do now when its only one node-stripe.png file and its moore icons?
 

CTXMedia

Formerly CyclingTribe
#17
This looks difficult i will try it =) thanky you for the help
The thread is closed and i cant post there i saw that the png's was read and unread how do i do now when its only one node-stripe.png file and its moore icons?
If you're wanting to use different icons for different nodes I expect you'd need to create the icons as separate PNG image files and not use a sprite sheet at all - as per the instructions in the thread I linked to.

For example, if you've got nodes 1 through 10 and you want a separate read and unread icon for each one so you'd need 20 images in total.

Cheers,
Shaun :D
 
#18
If you're wanting to use different icons for different nodes I expect you'd need to create the icons as separate PNG image files and not use a sprite sheet at all - as per the instructions in the thread I linked to.

For example, if you've got nodes 1 through 10 and you want a separate read and unread icon for each one so you'd need 20 images in total.

Cheers,
Shaun :D
I dont understand so i need to do one sprite sheet with 20 images then how will i now what image is for which node?
 

CTXMedia

Formerly CyclingTribe
#19
I dont understand so i need to do one sprite sheet with 20 images then how will i now what image is for which node?
No, as per my previous post and the linked thread with instructions - you will use separate images for each node you won't use a sprite sheet.

It is possible to use a sprite sheet but you'd need to setup CSS styling for each node icon then apply the styling at the template level, which adds an extra level of complexity that you don't need right now.

Cheers,
Shaun :D
 
#20
No, as per my previous post and the linked thread with instructions - you will use separate images for each node you won't use a sprite sheet.

It is possible to use a sprite sheet but you'd need to setup CSS styling for each node icon then apply the styling at the template level, which adds an extra level of complexity that you don't need right now.

Cheers,
Shaun :D
I have been sitting for hours with this but it will not work as i want-

Some node icons is visible but when logged in but if i logout from the forum some icons are not visible and if i login again they are visible what can i do to fix this?
i used the css code from the thread you linked and i have done exactly like its shown but it dont work for me.