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

XF 1.1 Append node icons to child nodes using sprite method?

Discussion in 'Styling and Customization Questions' started by Cala_Marie, Jul 20, 2013.

  1. Cala_Marie

    Cala_Marie New Member

    I'm trying to get this to work with the sprite method (I've already appended the smaller node icons below the regular ones in the sprite file).

    Here's what I have now:
    [​IMG]

    Here's a quick mockup of what I'm trying to achieve:
    [​IMG]

    From what I can tell from the templates, xF generates the child node listing by grabbing each child's raw name and then spitting them back out (normally into a popup menu); there's no template I could use to insert an extra small div into each individual h4.noteTitle element for the icons (could be wrong).

    Will I have to go the old-fashioned route and create two separate images for the child node icons?
     
  2. Shelley

    Shelley Well-Known Member

    I suppose you could just link from the sprite and insert the path to the images from EXTRA.CSS defining your width and height etc to your preference or simply add smaller icons to the existing sprite sheet

    Code:
    .subForumList li .nodeTitle:before {
      background: url("@imagePath/to/your/spritesheet.png") no-repeat left center transparent;
      height: 10px;
      width: 10px;
      content: "";
      padding-left: 12px; }
    
    .subForumList li .unread .nodeTitle:before {
      background: url("@imagePath/to/your/spritesheet.png") no-repeat left center transparent;
      height: 10px;
      width: 10px;
      content: "";
      padding-left: 12px; }
     
  3. Shelley

    Shelley Well-Known Member

    Sorry I just attempted this and the above wouldn't really work in my previous post. The css below won't work either without the images being cropped but you could add smaller icons onto the same sprite and adjust the below css (coordinates, sizes, padding etc) below. Probably be best waiting to see if someone can jump in and help you further on this.

    Code:
    .subForumList li .nodeTitle:before {
      background-image: url("@imagePath/xenforo/node-sprite.png");
      background-position: 0 0;
      background-repeat: no-repeat;
      height: 20px;
      width: 20px;
      content: "";
      padding-left: 12px; }
    
    .subForumList li .unread .nodeTitle:before {
      background-image: url("@imagePath/xenforo/node-sprite.png");
      background-position: -36px 0;
      background-repeat: no-repeat;
      height: 10px;
      width: 10px;
      content: "";
      padding-left: 12px; }
    
     
    Cala_Marie likes this.
  4. Shelley

    Shelley Well-Known Member

    There's a resource I just submitted you may be interested in. If this appeals to you let me know and I'll add the colour of your nocde icons into the release. :) http://xenforo.com/community/resources/speech-node-icons-subforum-icons.2099/
     
    Cala_Marie likes this.
  5. Cala_Marie

    Cala_Marie New Member

    Thanks for the assistance on this. :) A few custom tweaks to your resource and I got it working:

    [​IMG]

    (Sorry about the late reply.)
     
    Shelley likes this.
  6. Shelley

    Shelley Well-Known Member

    Looking very good, nice job. Really liking the colours and the design which are very clean. :)
     
  7. Cala_Marie

    Cala_Marie New Member

    Thanks. :) Once I fix up most of the rough edges in the design I'll post a thread in the showcase/critique area.
     
    Shelley likes this.

Share This Page