• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • 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.
  • 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)

Jake Bunce

XenForo moderator
Staff member
#1
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);
	}
 

Brogan

XenForo moderator
Staff member
#2
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.
 

Shelley

Well-known member
#8
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.
 

Brogan

XenForo moderator
Staff member
#9
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
 

Brogan

XenForo moderator
Staff member
#11
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?
 

Eric J.

Well-known member
#15
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.
 

Brogan

XenForo moderator
Staff member
#18
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.