• 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?

#1
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:


Here's a quick mockup of what I'm trying to achieve:


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?
 

Shelley

Well-known member
#2
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; }
 

Shelley

Well-known member
#3
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:


Here's a quick mockup of what I'm trying to achieve:


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?
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; }
 

Shelley

Well-known member
#4
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:


Here's a quick mockup of what I'm trying to achieve:


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?
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/