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

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:
iboGFE5uI4pkVQ.png


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


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?
 
Sort by date Sort by votes
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; }
 
Upvote 0 Downvote
Cala_Marie said:
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:
iboGFE5uI4pkVQ.png


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


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?
Click to expand...

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; }
 
Upvote 0 Downvote
Cala_Marie said:
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:
iboGFE5uI4pkVQ.png


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


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?
Click to expand...

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/
 
Upvote 0 Downvote
You must log in or register to reply here.
Back
Top Bottom