Change Forum Status Icons To CSS Boxes (no images)

[Jake Bunce]

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



Edit this template:

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

 

[Paul B]

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.

 

[Paul B]

One other little edit....

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

You end up with circles instead of squares

 

[Ranger375]

One other little edit....

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

You end up with circles instead of squares

View attachment 5697

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

 

[Paul B]

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

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

 

[Ranger375]

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

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

 

[Paul B]

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

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

 

[Shelley]

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.

 

[Paul B]

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

 

[Eric J.]

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

 

[Paul B]

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?

 

[yoghurtfarmer]

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?

I think that xenforo converts plain old border-radius to all of the different browser ones.

 

[Jake Bunce]

I think that xenforo converts plain old border-radius to all of the different browser ones.

Very interesting. I didn't know that but you are right. I just checked.

 

[HannahP]

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

Well, IE9 will have support...

Only five or six years after the fact. Right on schedule for IE.

 

[Eric J.]

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.

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

I think that xenforo converts plain old border-radius to all of the different browser ones.

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

 

[hcmagix]

I need a way for different Icons for everey forum like my vb Than Im happy

 

[manik]

Very good topic here. Less images the better.

 

[Paul B]

Another update to this.
If you also want to replace the link forum and page icons, then you will need to replace this:

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

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