1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
    Dismiss Notice
  3. This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Change Forum Status Icons To CSS Boxes (no images)

Discussion in 'Template Modifications [Archive]' started by Jake Bunce, Nov 9, 2010.

  1. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    This will replace the forum read/unread icons with CSS boxes (no images). It looks like this:

    Screen shot 2010-11-02 at 9.27.51 AM.png

    Edit this template:

    Admin CP -> Appearance -> Templates -> node_list.css

    Find this code:

    Code:
    .node .nodeIcon
    {
    	@property "nodeIcon";
    	background: transparent none no-repeat center center;
    	margin: 10px 0 10px 10px;
    	float: left;
    	width: 36px;
    	height: 36px;
    	@property "/nodeIcon";
    }
    
    	.node .forumNodeInfo .nodeIcon,
    	.node .categoryForumNodeInfo .nodeIcon
    	{
    		background-image: url(@forumIconReadPath);
    	}
    
    	.node .forumNodeInfo.unread .nodeIcon,
    	.node .categoryForumNodeInfo.unread .nodeIcon
    	{
    		background-image: url(@forumIconUnreadPath);
    	}
    
    	.node .pageNodeInfo .nodeIcon
    	{
    		background-image: url(@pageIconPath);
    	}
    
    	.node .linkNodeInfo .nodeIcon
    	{
    		background-image: url(@linkIconPath);
    	}
    
    Change to this (I added the border-radius and changed the background-image to background-color):

    Code:
    .node .nodeIcon
    {
    	@property "nodeIcon";
    	background: transparent none no-repeat center center;
    	margin: 10px 0 10px 10px;
    	float: left;
    	width: 36px;
    	height: 36px;
    	border-radius: 3px;
    	@property "/nodeIcon";
    }
    
    	.node .forumNodeInfo .nodeIcon,
    	.node .categoryForumNodeInfo .nodeIcon
    	{
    		background-color: #aaaaaa;
    	}
    
    	.node .forumNodeInfo.unread .nodeIcon,
    	.node .categoryForumNodeInfo.unread .nodeIcon
    	{
    		background-color: #555555;
    	}
    
    	.node .pageNodeInfo .nodeIcon
    	{
    		background-image: url(@pageIconPath);
    	}
    
    	.node .linkNodeInfo .nodeIcon
    	{
    		background-image: url(@linkIconPath);
    	}
    
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Nice one Jake.

    The only thing I would suggest is replacing #aaaaaa with @primaryLighter and #555555 with @primaryMedium (or any of the template colours desired).

    That way the "icons" update automatically with each style.
     
    Alien and Jake Bunce like this.
  3. Brogan

    Brogan XenForo Moderator Staff Member

    One other little edit....

    If you change border-radius: 3px; to border-radius: 18px;

    You end up with circles instead of squares :D

    forum_icons_css_circles.PNG
     
    Alien, Peggy and Jake Bunce like this.
  4. Ranger375

    Ranger375 Well-Known Member

    Do you know if the circles will show up in IE too?
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

    IE doesn't support the border-radius attribute, so no.
     
  6. Ranger375

    Ranger375 Well-Known Member

    Just out of curiousity, would it then just appear as a square?
     
  7. Brogan

    Brogan XenForo Moderator Staff Member

    Yes, the same as the rest of the rounded corners throughout the forum.

    IE.PNG
     
    Jake Bunce and Ranger375 like this.
  8. Shelley

    Shelley Well-Known Member

    Just an idea and i thought I'd throw the suggestion out. You could have a background colour and add a 1px border that is darker than the background and then apply a background image (category-23px-light.png) which would give the appearance that a gradient is present for the older browsers?

    For cosmetic purposes I feel this would be a better visual solution. Eitherway nice work.
     
  9. Brogan

    Brogan XenForo Moderator Staff Member

    I've already experimented with that Shelley :)

    I've also tried transparent background for read "icons" and a light background for unread.

    The beauty of this system is it takes seconds to update/change.

    Perfect for someone like me who is hopeless with graphics/images :D
     
    Shelley likes this.
  10. Eric J.

    Eric J. Well-Known Member

    Well, IE9 will have support, so by then it should work great for cross-browser compatibility. A nice addition, thanks.
     
  11. Brogan

    Brogan XenForo Moderator Staff Member

    Jake, I was just wondering, shouldn't there be all the border attributes for this CSS; -webkit-border-radius, -moz-border-radius and border-radius ?

    Or will plain old border-radius suffice?
     
  12. yoghurtfarmer

    yoghurtfarmer Well-Known Member

    I think that xenforo converts plain old border-radius to all of the different browser ones.
     
    Brogan, Eric J. and Jake Bunce like this.
  13. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Very interesting. I didn't know that but you are right. I just checked.
     
    Brogan and Eric J. like this.
  14. mjp

    mjp Well-Known Member

    Firefox doesn't require the moz prefix for border radius anymore (post 3.5), and webkit doesn't require a prefix either (post 5).

    Only five or six years after the fact. Right on schedule for IE.
     
    Brogan, CFodder and Eric J. like this.
  15. Eric J.

    Eric J. Well-Known Member

    Yeah, and by the time they release their next one they'll be plenty behind as well.

    This is awesome. I wondered when I only saw border radius, but thanks to Jake for confirming. That's awesomeness.
     
  16. hcmagix

    hcmagix Active Member

    I need a way for different Icons for everey forum like my vb :) Than Im happy :D:D
     
  17. manik

    manik Member

    Very good topic here. Less images the better.
     
  18. Brogan

    Brogan XenForo Moderator Staff Member

    Another update to this.
    If you also want to replace the link forum and page icons, then you will need to replace this:
    HTML:
    .node .nodeIcon
    {
    	@property "nodeIcon";
    	background: transparent none no-repeat center center;
    	margin: 10px 0 10px 10px;
    	border-radius: 3px;
    	float: left;
    	width: 36px;
    	height: 36px;
    	@property "/nodeIcon";
    }
    
    	.node .forumNodeInfo .nodeIcon,
    	.node .categoryForumNodeInfo .nodeIcon
    	{
    		background-image: url(@forumIconReadPath);
    	}
    
    	.node .forumNodeInfo.unread .nodeIcon,
    	.node .categoryForumNodeInfo.unread .nodeIcon
    	{
    		background-image: url(@forumIconUnreadPath);
    	}
    
    	.node .pageNodeInfo .nodeIcon
    	{
    		background-image: url(@pageIconPath);
    	}
    
    	.node .linkNodeInfo .nodeIcon
    	{
    		background-image: url(@linkIconPath);
    	}

    with this:
    HTML:
     .node .nodeIcon
    {
    	 @property "nodeIcon";
    	 background: transparent none no-repeat center center;
    	 margin: 10px 0 10px 10px;
    	 border-radius: 3px;
    	 float: left;
    	 width: 34px;
    	 height: 34px;
    	 @property "/nodeIcon";
    }
    
    	 .node .forumNodeInfo .nodeIcon,
    	 .node .categoryForumNodeInfo .nodeIcon
    	 {
    		  background-color: @primaryLighterStill;
    		  border: 1px solid @primaryLighter;
    	 }
    
    	 .node .forumNodeInfo.unread .nodeIcon,
    	 .node .categoryForumNodeInfo.unread .nodeIcon
    	 {
    		  background-color: @primaryLighter;
    		  border: 1px solid @primaryLightish;
    	 }
    	 .node .pageNodeInfo .nodeIcon
    	 {
    		  background-color: @secondaryLighter;
    		  border: 1px solid @secondaryLight;
    	 }
    
    	 .node .linkNodeInfo .nodeIcon
    	 {
    		  background-color: @secondaryLightest;
    		  border: 1px solid @secondaryLighter;
    	 }
    Obviously change the style, border, colours etc. to suit.
     
    Jake Bunce likes this.

Share This Page