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

Edit node icon

Discussion in 'Styling and Customization Questions' started by madmartigan, Mar 22, 2012.

  1. madmartigan

    madmartigan Active Member

    How can i edit and make my own node icon when its only one file and look like this what size must i make them?[​IMG]
     
  2. Digital Doctor

    Digital Doctor Well-Known Member

    i TITLE searched for node icon.
    and found this. ...

    does that help ?

    The Node Icon spritesheets by Shelley would probably help.
     
  3. Shelley

    Shelley Well-Known Member

    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.
     
  4. Shelley

    Shelley Well-Known Member

    Here you go. There in the archive I didn't have enough time to get those moved but you should still be able to download the psd and modify the icon to suit your preference. http://xenforo.com/community/threads/xenforo-styled-forum-status-icons.7744/
     
  5. madmartigan

    madmartigan Active Member

    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.
     
  6. Digital Doctor

    Digital Doctor Well-Known Member

    Buy Shelley a bottle a wine via Paypal and get her to do your work ?
    It's either learn, pay or beg.
     
  7. Shelley

    Shelley Well-Known Member

    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.
     
    madmartigan likes this.
  8. madmartigan

    madmartigan Active Member

    I wanna learn how to desgin own icons for this what word should i google after?
     
  9. Shelley

    Shelley Well-Known Member

    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
     
  10. madmartigan

    madmartigan Active Member

    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. madmartigan

    madmartigan Active Member

    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? :,(
     
  12. CyclingTribe

    CyclingTribe Well-Known Member

    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. madmartigan

    madmartigan Active Member

    Thank you =)
    If i wanna have diffrent nodes for diffrent categories how can i do that?
     
  14. CyclingTribe

    CyclingTribe Well-Known Member

    Shelley likes this.
  15. Shelley

    Shelley Well-Known Member

    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. madmartigan

    madmartigan Active Member

    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?
     
  17. CyclingTribe

    CyclingTribe Well-Known Member

    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
     
    madmartigan likes this.
  18. madmartigan

    madmartigan Active Member

    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?
     
  19. CyclingTribe

    CyclingTribe Well-Known Member

    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. madmartigan

    madmartigan Active Member

    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.
     

Share This Page