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?

 

[Anthony Parsons]

There is also a better range of speech bubbles at http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

View source to grab CSS and modify.

 

[DRE]

Hey Jake how do you change the triangle the other way around?

 

[Jake Bunce]

Hey Jake how do you change the triangle the other way around?

A horizontal flip in place?

 

[DRE]

A horizontal flip in place?

yeah that will do. how to flip?

 

[Anthony Parsons]

yeah that will do. how to flip?

Why not play around with it and learn? You can learn how to manipulate css triangles from many sites, i.e.. http://jonrohan.me/guide/css/creating-triangles-in-css/ in which you can learn and do it yourself, any way you want it to be displayed.

 

[DRE]

Why not play around with it and learn? You can learn how to manipulate css triangles from many sites, i.e.. http://jonrohan.me/guide/css/creating-triangles-in-css/ in which you can learn and do it yourself, any way you want it to be displayed.

I am worn out from work and my brain's fried. I'll ask someone else.

 

[Jake Bunce]

Here is updated code to flip the arrows horizontally. All that is required is to change the order of the border-color values:

/* 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 #555 transparent transparent;
}


/* 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 #cccccc transparent transparent;
}
.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 #777777 transparent transparent;
}
.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 #fff transparent transparent;
}
.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 #fff transparent transparent;
}
.node .linkNodeInfo .nodeIcon
{
	background-image: none !important;
	background-position: 0 0 !important;
	background-color: #fff;
}

 

[DRE]

Thanks Jake. I did this but it looked ugly. http://stackoverflow.com/questions/5768998/how-to-flip-background-image-using-css

 

[DRE]

Okay so how to use this CSS RSS Icon code? http://nicolasgallagher.com/pure-css-social-media-icons/

.rss a { position:relative; width:60px; padding:0 2px; border-color:#ea6635; text-transform:lowercase; text-indent:-186px; font-size:64px; font-weight:bold; color:#fff; background:#e36443; /* css3 */ -moz-box-shadow:0 0 4px rgba(0,0,0,0.4); -webkit-box-shadow:0 0 4px rgba(0,0,0,0.4); box-shadow:0 0 4px rgba(0,0,0,0.4); background:-webkit-gradient(linear, left top, left bottom, from(#f19242), to(#e36443)); background:-moz-linear-gradient(top, #f19242, #e36443); background:linear-gradient(top, #f19242, #e36443); } .rss a:before, .rss a:after { content:""; position:absolute; bottom:10px; left:10px; } /* create circle */ .rss a:before { width:12px; height:12px; background:#fff; /* css3 */ -moz-border-radius:12px; -webkit-border-radius:12px; border-radius:12px; } /* create the two arcs */ .rss a:after { width:22px; height:22px; border-style:double; border-width:24px 24px 0 0; border-color:#fff; /* css3 */ -moz-border-radius:0 50px 0 0; -webkit-border-radius:0 50px 0 0; border-radius:0 50px 0 0; }

 

[DRE]

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:

View attachment 32508

Post this as a resource please. Was hard to track down again.