Forum icons created using CSS instead of images

[Paul B]

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?

 

[Jake Bunce]

I like this idea.

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

Find this 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:

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

 

[Peggy]

Interesting!

 

[Paul B]

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

Nice one

 

[Elizabeth]

There are some generators here:
CSS Corners http://csscorners.com/ Makes buttons by making all four corners
CSS Buttons http://www.cssbuttons.net/index.php
CSS Generator http://css3generator.com/

 

[Paul B]

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.

 

[Floris]

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?

"only work for very basic shapes"

yeah, if you're not creative


http://rathersplendid.net/cssicons/

 

[kilcher]

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

 

[Anthony Parsons]

http://rathersplendid.net/cssicons/

CSS3 has kind off taken css to a whole new playing field...

 

[mrGTB]

Jake, sure is THE MAN!

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

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.

 

[Digital Doctor]

Cool tweak by Jake bump

 

[Andy.N]

I like this idea.

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

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

 

[RobinHood]

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:

 

[Anthony Parsons]

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.

 

[Andy.N]

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:

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?

 

[Andy.N]

I like this idea.

I hope you like my idea too, Jake

 

[Jake Bunce]

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:

/* 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:

 

[Andy.N]

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.

 

[Anthony Parsons]

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.



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...



And then with a css gradient...

 

[Andy.N]

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