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

Forum icons created using CSS instead of images

Discussion in 'XenForo Questions and Support' started by Brogan, Nov 2, 2010.

  1. Brogan

    Brogan XenForo Moderator Staff Member

    One of the biggest problems when doing a custom style is any icons need to be recoloured.

    So I was thinking, I wonder if the forum icons can be constructed solely from CSS?

    Of course this will only work for very basic shapes but as I just want a square with rounded corners, it should be possible.

    Has anyone else attempted this?
     
    erich37 likes this.
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I like this idea. :cool:

    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);
    	}
    
    The result looks like this:

    Screen shot 2010-11-02 at 9.27.51 AM.png
     
    8thos, Andy.N, RobinHood and 6 others like this.
  3. Peggy

    Peggy Well-Known Member

    Interesting!
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    You just saved me the effort Jake.
    That's exactly what I was hoping for.

    Nice one :)
     
  5. Elizabeth

    Elizabeth Well-Known Member

    8thos and Brandon Sheley like this.
  6. Brogan

    Brogan XenForo Moderator Staff Member

    Using the @ tag for the colour should also mean it updates with each style, which will mean no changes at all required for multiple styles.
     
  7. Floris

    Floris Guest


    "only work for very basic shapes"

    yeah, if you're not creative :)


    http://rathersplendid.net/cssicons/

    :p
     
    Brandon Sheley likes this.
  8. kilcher

    kilcher Active Member

    Just added this to one of my forums. Works great, thanks Jake!
     
  9. Anthony Parsons

    Anthony Parsons Well-Known Member

  10. mrGTB

    mrGTB Well-Known Member

    Jake, sure is THE MAN! :)

    We need to start calling him - Jim'll fix it

    [​IMG]

    Very good though, because this again can save on HTTP requests if images are not being called for Forum Icon, especially if you have many forums in place and loading times will be improved.
     
  11. Digital Doctor

    Digital Doctor Well-Known Member

    Cool tweak by Jake bump :)
     
  12. Andy.N

    Andy.N Well-Known Member

    Hi Jake,
    Been looking for something like this a long time and thanks a lot for your help.
    Can we please have a 2012 version of forum icons in CSS3? ;)
    How about using speech bubbles CSS3 as forum icons.
    www.sitepoint.com/pure-css3-speech-bubbles/

    I'm thinking we use a bubble with filled color for the unread forum icon.

    While we are at it, why can't we replace the RSS feed icon at the footer and in front each forum with a RSS CSS3 icon from http://rathersplendid.net/cssicons/

    You can do it, Jake ;)
     
    ArnyVee and 0xym0r0n like this.
  13. RobinHood

    RobinHood Well-Known Member

    You'll have to make sure you specify fallbacks to the original images for older browsers as these fancy new CSS3 images start to break down in some of them. This is IE8:

    [​IMG]
     
  14. Anthony Parsons

    Anthony Parsons Well-Known Member

    IMHO, CSS has a time and a place, and for the issues it can cause with something like an icon, it is far more economical to simply create a sprite and add the image that way, along with all your other small icons.

    The forum read, unread, easy enough to make in CSS, the only difference for fallback will be plain looking images vs. nice gradients. Even then, you can use the fallback sprite as mentioned, for silly IE legacy support.
     
  15. Andy.N

    Andy.N Well-Known Member

    They look quite fine to me ;)
    The biggest reason I'd like to move away from image-less is for retina screen.
    I don't worry about support older browsers and more and more browsers support css3.
    I think these ideas are pretty achievable?

    Jake, what do you think?
     
  16. Andy.N

    Andy.N Well-Known Member

    I hope you like my idea too, Jake ;)
     
  17. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    EXTRA.css only for this one:

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

    Add this code. The CSS for this is a little hairy so I commented and grouped stuff as best I could to make it easier to change the colors. Note that there is some mathematical rigidity in the dimensions, border sizes, and position adjustments. So changing the size, thickness, or position of the speech bubble requires several adjustments:

    Code:
    /* defines border of speech bubble, and shadow behind it */
    .node .nodeIcon
    {
    	/* XF defaults reiterated here just for documentation */
    	margin: 10px 0 10px 10px;
    	float: left;
    	width: 36px;
    	height: 36px;
    
    	/* relevant to speech bubble */
    	border: 2px solid #555;
    	box-shadow: 2px 2px 4px #888;
    	border-radius: 5px;
    }
    
    
    /* defines border of bottom triangle */
    .node .nodeIcon:before
    {
    	content: ' ';
    	position: absolute;
    	width: 0;
    	height: 0;
    	left: 20px;
    	top: 48px;
    	border: 4px solid;
    	border-color: #555 transparent transparent #555;
    }
    
    
    /* defines inside of bottom triangle */
    .node .nodeIcon:after
    {
    	content: ' ';
    	position: absolute;
    	width: 0;
    	height: 0;
    	left: 22px;
    	top: 48px;
    	border: 2px solid;
    }
    
    
    /* inner background color/image for READ forums/categories */
    .node .forumNodeInfo .nodeIcon:after,
    .node .categoryForumNodeInfo .nodeIcon:after
    {
    	border-color: #cccccc transparent transparent #cccccc;
    }
    .node .forumNodeInfo .nodeIcon,
    .node .categoryForumNodeInfo .nodeIcon
    {
    	background-image: none !important;
    	background-position: 0 0 !important;
    	background-color: #cccccc;
    }
    
    
    /* inner background color/image for UNREAD forums/categories */
    .node .forumNodeInfo.unread .nodeIcon:after,
    .node .categoryForumNodeInfo.unread .nodeIcon:after
    {
    	border-color: #777777 transparent transparent #777777;
    }
    .node .forumNodeInfo.unread .nodeIcon,
    .node .categoryForumNodeInfo.unread .nodeIcon
    {
    	background-image: none !important;
    	background-position: 0 0 !important;
    	background-color: #777777;
    }
    
    
    /* inner background color/image for page nodes */
    .node .pageNodeInfo .nodeIcon:after
    {
    	border-color: #fff transparent transparent #fff;
    }
    .node .pageNodeInfo .nodeIcon
    {
    	background-image: none !important;
    	background-position: 0 0 !important;
    	background-color: #fff;
    }
    
    
    /* inner background color/image for link-forums */
    .node .linkNodeInfo .nodeIcon:after
    {
    	border-color: #fff transparent transparent #fff;
    }
    .node .linkNodeInfo .nodeIcon
    {
    	background-image: none !important;
    	background-position: 0 0 !important;
    	background-color: #fff;
    }
    
    The result is pure CSS speech bubbles:

    Screen shot 2012-08-04 at 9.21.32 PM.png
     
    8thos and Andy.N like this.
  18. Andy.N

    Andy.N Well-Known Member

    This is so great, Jake. Thanks a lot.
    I'm going to play with it some more and make changes with it.

    I'm going to overwrite the default node icon size (36x36) which will means having to adjust many other things in the bubbles.

    Still trying to get the thought bubble css as well. This seems to work well with speech bubble css.
     
  19. Anthony Parsons

    Anthony Parsons Well-Known Member

    Andy, doing what you're asking, I quickly did in the below images... and it doesn't look anywhere near as good as when you see it large for blogging purposes.

    IMHO, small images are often better when delivered on a sprite, as they are with XF, than CSS.

    Screen Shot 2012-08-05 at 3.14.53 PM.png

    The area is really just too small to make really graphic quality node icons from a 36 x 36px area thereabouts. If you made it bigger, getting more to a 50px square area, then it would be a little nicer IMHO. And in XF blue...

    Screen Shot 2012-08-05 at 3.19.34 PM.png

    And then with a css gradient...

    Screen Shot 2012-08-05 at 3.21.54 PM.png
     
    Andy.N likes this.
  20. Andy.N

    Andy.N Well-Known Member

    That looks pretty good to me Anthony.
    I'm using retina screen and it really bothers me when the images are blurry. Can't help it but to make it looks as best as I can.
    Node icons are something has minimal practical value so I want it to be as little distraction to the eyes as possible.
    I play quickly with the CSS that Jake provided and this is a first result. I will play around with different size, color and the thought bubble and see what stick

    nodeicon.png
     
    Jake Bunce likes this.

Share This Page