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

Changing the icons in front of the forums in the forumlist

Discussion in 'XenForo Questions and Support' started by SchmitzIT, Oct 8, 2010.

  1. SchmitzIT

    SchmitzIT Well-Known Member

    Hi,

    Is it possible to change the graphical icon in front of the forums when checking the list of forums? For vB4, we found a modification that allows us to actually control this in the admincp, and set it to display specific icons.

    It would be awesome if somthing like that could be added by default to XF.

    If you're unsure of what I mean, please check www.entropiaplanets.com/forums/forums.php. As you can see, we have a Generic section with one specific icon, and then a variety of sections for different planets, each of which has been assigned an icon matching the company producing these planets.

    It's also a great way to draw attention to sponsored forums.

    Thanks :)

    Peter
     
    feldon30 likes this.
  2. feldon30

    feldon30 Well-Known Member

    It was built into vB3.7.
     
  3. SchmitzIT

    SchmitzIT Well-Known Member

    Anyone? Pleazse? *puppy eyes*
     
  4. anotheralias

    anotheralias Well-Known Member

    Agggh I just finally managed to find where to change it, but I've looked at so many templates today I'm not sure which one it was now. I THINK it was in xenforo.css, or in one of the xenforo.css files, and I wound up changing the file type to .gif* on there and uploaded something else.

    Try the xenforo.css file and search for .png?

    * because I simply could not overwrite that png file. It was the strangest thing, I'd delete the contents of the image, flatten it, color it something else, kick it down the stairs, club it with a frying pan, hurl it out a window, and STILL it would pop right back to life on the forum, like a magic trick.
     
  5. Hilmer

    Hilmer Active Member

    If anyone have any news about how to change these small icons it would be super duper?

    I would strongly prefer a add-on to avoid changing any code manually.
    - Or surgest the option to upload an icon when you add a new root-note
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    Hilmer likes this.
  7. Hilmer

    Hilmer Active Member

    Brilliant Brogan:)
     
  8. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    In 1.1 you need to add a background-position to use nonsprite images with that CSS, like this:

    Code:
    /* custom status icons */
    .node .node_7 .forumNodeInfo .nodeIcon, .node .node_7 .categoryForumNodeInfo .nodeIcon {
        background-image: url("@imagePath/xenforo/widgets/forum-read-7.png");
        background-position: 0px 0px;
    }
    .node .node_7 .forumNodeInfo.unread .nodeIcon, .node .node_7 .categoryForumNodeInfo.unread .nodeIcon {
        background-image: url("@imagePath/xenforo/widgets/forum-unread-7.png");
        background-position: 0px 0px;
    }
    
     
  9. Hilmer

    Hilmer Active Member

    Thanks a lot Jake - I will look forward to get the new logos on the board.
     
  10. Hilmer

    Hilmer Active Member

    That works great:)

    One little challenge:
    When I log in as admin everything is perfect.
    When I log in as user, the name-unread icons are placed totally wrong - I fixed that with Jakes background-position: 0px 0px

    The problem is, when I visit the board as a guest the unread-icons are still wrong - se the KAMERAER at the photo:

    icons.png

    Hope someone has a solution.

    All the best
    Morten
     
  11. steel_curtain

    steel_curtain Well-Known Member

    It's still using the sprite background position for the unread icon. Try adding !important to Jakes css above like so...

    Code:
    /* custom status icons */
    .node .node_7 .forumNodeInfo .nodeIcon, .node .node_7 .categoryForumNodeInfo .nodeIcon {
        background-image: url("@imagePath/xenforo/widgets/forum-read-7.png");
        background-position: 0px 0px;
    }
    .node .node_7 .forumNodeInfo.unread .nodeIcon, .node .node_7 .categoryForumNodeInfo.unread .nodeIcon {
        background-image: url("@imagePath/xenforo/widgets/forum-unread-7.png");
        background-position: 0px 0px !important;
    }
    Also, I noticed you're using icons that are 40x40px, and your settings are for 36x36px icons. You can make it 40px for width and height in the Node Icon style property to display them properly.

    ACP > Styles > Your Style > Style Properties > Node Icons
     
    Hilmer likes this.
  12. Hilmer

    Hilmer Active Member

    Steel you are really a big help for me today:) Everything look so nice now and the round corners appear perfect.
     
    steel_curtain likes this.
  13. steel_curtain

    steel_curtain Well-Known Member

    Looks very nice now. I'll write a response to your question in the other thread detailing how I find the css to modify so you can do these things for yourself when I have more time today.
     
    Hilmer likes this.
  14. Hilmer

    Hilmer Active Member

    Thanks a lot. Oh that would be so nice if you have the time for that. Then I will use your method to try to find the white background color in the text/comment area so I can make it a little less bright.
     
  15. Hilmer

    Hilmer Active Member

    Just got another strange error: Everything is perfect now, when I am not logged in but when I log in as a user og admin, the standard icons apear under one of the categories - the Køb og Salg ??? Thats strange because the picture is fine and the css is a copy of the other ones just with the image name changed.
    I have checked the image, tried with other images, tried to remove the Ø in the name and everything but again - it works perfect when I am not logged in and it is only the forum-icons in this one category?
    Any ideas:)
    the link: www.hilmer-koch.dk/forum

    And the EXTRA.css: (only a part of it - the 24 works but not the 40 )

    /* custom status icons */
    .node .node_24 .forumNodeInfo .nodeIcon, .node .node_24 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-ikoner/billedbehandling-read.png");
    background-position: 0px 0px; !important;
    }
    .node .node_24 .forumNodeInfo.unread .nodeIcon, .node .node_24 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-ikoner/billedbehandling-unread.png");
    background-position: 0px 0px; !important;
    }
    .node .node_40 .forumNodeInfo.unread .nodeIcon, .node .node_40 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-ikoner/salg-read.png");
    background-position: 0px 0px; !important;
    }
    .node .node_40 .forumNodeInfo.unread .nodeIcon, .node .node_40 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-ikoner/salg-unread.png");
    background-position: 0px 0px; !important;
    }
     
  16. steel_curtain

    steel_curtain Well-Known Member

    Your css for the read icon is incorrect and you also have an extra ; in background position. I've colored the incorrect portion in red below.

    Code:
    * custom status icons */
    .node .node_24 .forumNodeInfo .nodeIcon, .node .node_24 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-ikoner/billedbehandling-read.png");
    background-position: 0px 0px; !important;
    }
    .node .node_24 .forumNodeInfo.unread .nodeIcon, .node .node_24 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-ikoner/billedbehandling-unread.png");
    background-position: 0px 0px; !important;
    }
    .node .node_40 .forumNodeInfo.unread .nodeIcon, .node .node_40 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-ikoner/salg-read.png");
    background-position: 0px 0px; !important;
    }
    .node .node_40 .forumNodeInfo.unread .nodeIcon, .node .node_40 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-ikoner/salg-unread.png");
    background-position: 0px 0px; !important;
    }
    It should look like this:
    Code:
    .node .node_24 .forumNodeInfo .nodeIcon, .node .node_24 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-ikoner/billedbehandling-read.png");
    background-position: 0px 0px !important;
    }
    .node .node_24 .forumNodeInfo.unread .nodeIcon, .node .node_24 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-ikoner/billedbehandling-unread.png");
    background-position: 0px 0px !important;
     
    .node .node_40 .forumNodeInfo .nodeIcon, .node .node_40 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-ikoner/salg-read.png");
    background-position: 0px 0px !important;
    }
    .node .node_40 .forumNodeInfo.unread .nodeIcon, .node .node_40 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-ikoner/salg-unread.png");
    background-position: 0px 0px !important;
    
     
    Jake Bunce and Hilmer like this.
  17. Hilmer

    Hilmer Active Member

    Everything according to the icons is now perfect thanks to you steel. I am so greatfull (y)
     
  18. Carlos

    Carlos Well-Known Member

    Does these edits work with single images?
     
  19. Andy.N

    Andy.N Well-Known Member

    Jake,
    Is there a way to replace those background image with a web font icon such as how we do it here
    http://xenforo.com/community/resources/fontawesome-icons-in-visitor-tab-account-wrapper.1861/
     

Share This Page