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

XF 1.2 Trouble with node icons

Discussion in 'Styling and Customization Questions' started by Matthew Hawley, Jul 1, 2013.

  1. Matthew Hawley

    Matthew Hawley Well-Known Member

    I change the unread node icon to this:

    Code:
    <div class="icon-comments-alt icon-3x icon-fixed-width" style="color:#da0000;float:left;margin:auto; {xen:if $forum.hasNew, 'unread'}">
    And this is the result:

    nodeiconproblem.png

    Any suggestions?
     
  2. Jeremy

    Jeremy XenForo Moderator Staff Member

    why are you putting the unread class into the style attribute?
     
  3. Vincent

    Vincent Well-Known Member

    Shouldn't the class be "unread" and not the style?
     
  4. Matthew Hawley

    Matthew Hawley Well-Known Member

    Oh I didn't realize that...let me see if that works.
     
  5. Matthew Hawley

    Matthew Hawley Well-Known Member

    Okay I did this:

    Code:
    <div class="{xen:if $forum.hasNew, 'unread'} icon-comments-alt icon-3x icon-fixed-width" style="color:#1ada00;float:left;margin:auto;">
    Did the same thing.
    And then I did this:

    Code:
    <div class="icon-comments-alt icon-3x icon-fixed-width" style="color:#1ada00;float:left;margin:auto;" {xen:if $forum.hasNew, 'unread'}">
    Same thing happens again.
     
  6. Vincent

    Vincent Well-Known Member

    What's the original code and what are you trying to do?
     
  7. Matthew Hawley

    Matthew Hawley Well-Known Member

    Code:
    <div class="nodeInfo forumNodeInfo primaryContent {xen:if $forum.hasNew, 'unread'}">
    Im trying to replace the unread node icon with a web font icon.

    Code:
    icon-comments-alt icon-3x icon-fixed-width" style="color:#1ada00;float:left;"
     
  8. Vincent

    Vincent Well-Known Member

    Does it work when removing the "style" part and when "unread" is in class?
     
  9. Matthew Hawley

    Matthew Hawley Well-Known Member

    Yeah it worked.

    Code:
    <div class="{xen:if $forum.hasNew, 'unread'}" icon-comments-alt icon-3x icon-fixed-width" style="opacity:0.5">
    
     
  10. Vincent

    Vincent Well-Known Member

    Well, then I think the problem is related to the 'float: left;'. Does it work with the 'style=color' attribute alone?
     
  11. Matthew Hawley

    Matthew Hawley Well-Known Member

    I said it worked. o_O
     
  12. Jeremy

    Jeremy XenForo Moderator Staff Member

    No, you said that the original worked. He's asking if you add in the color if it still works. If not, we know its failing because of the float.
     
    Vincent likes this.
  13. Matthew Hawley

    Matthew Hawley Well-Known Member

    I need the float because without it the icon is way up there and the node title is way down there.
     
  14. Matthew Hawley

    Matthew Hawley Well-Known Member

    Nevermind, it works but the lastPost is gone.
     
  15. Matthew Hawley

    Matthew Hawley Well-Known Member

    I got the lastPost to show, but everything in the forum rows are faded.
    Code:
    <div class="nodeInfo forumNodeInfo primaryContent {xen:if $forum.hasNew, 'unread'}" style="opacity:0.6;">
     
  16. Matthew Hawley

    Matthew Hawley Well-Known Member

  17. Tracy Perry

    Tracy Perry Well-Known Member

    Where are you applying the opacity at? Can't you go into the Style Properties -> Node Icons and just set the opacity as a default there. That's what I do on the xenFoogle and my customized default style and it works fine. I define the icons I use (since I use different ones) in EXTRA.css and it applies across the board to all of them. In EXTRA.css I then apply a opacity of 1.0 for the unread icons.
    Code:
    /* Adjust opacity on new message icons in forum list */
    .node .forumNodeInfo.unread .nodeIcon, .node .categoryForumNodeInfo.unread .nodeIcon {
            opacity: 1.0;
            }
    If you are calling them from a remote site then that may present a problem (in more ways than one - I wouldn't want the additional traffic load and the dependency on another site that depends on a remote server that I don't control to deliver the icons). I'm of the school that just because it can be done doesn't necessarily mean it should be done. ;)
    What if someone wants to customize their icons - aren't you making it a more difficult for them by your design?
     
    Last edited: Jul 2, 2013
    Shelley likes this.
  18. Shelley

    Shelley Well-Known Member

    Whatever you are trying to do with the nodeicons you can do via css and implement the design you want (graphic editor knowledge required) and as @Tracy Perry mentioned others may want to modify and not appreciate remotely hosted images. I've quickly glanced through this thread but I can't see why you can't apply this via css in EXTRA and/or Style Properties.

    I'm really unsure what you are trying to do here. Has this anything to do with the PC you sent? If so I'd advise familiarising yourself with a graphics editor if the design part is the reason why your doing whatever you are doing. I'm still unsure what it is you are trying to do here.
     
  19. Matthew Hawley

    Matthew Hawley Well-Known Member

    Ohh I'll try putting the opacity in the style properties.
     
  20. Tracy Perry

    Tracy Perry Well-Known Member

    @Shelley some of us are technically inclined and severely graphically challenged (hmmm... I wonder who one of those could be! just replace the "b" with "m" and you got it!!). :p
    I know that PhotoShop (ended up finding an upgrade copy of PhotoShop CS in the box with the other PhotoShop stuff- which I think is actually the equivalent of PhotoShop 8 but renamed) is a great tool but can already tell it's going to be a challenge for me since I'm more tech geek than look good geek.:whistle:

    I can see where he's coming from, but with the wealth of already developed free icons out there that would work I don't see why he does not utilize them as he learns whatever graphics editor he has chosen.
     

Share This Page