I have some users who need a worksafe style; I am supporting a casual sports forum but sometimes members don't want to see avatars, signature images, etc, since they can be at work, around children, etc.
I wrote this to plug into my forum and I thought I may as well share it. It should turn any WBB4.1 theme on default templates into a work-safe theme without avatars, signature images, etc. Just put it on the CSS panel in your style editor, and remove the pieces you don't want, that's all.
CSS
/* worksafe mod - should work on any style using the default template scheme, good for creating a "worksafe" option or two for your users. copy all of the below, delete the parts you don't want to use, and paste it into the Advanced Settings CSS table in your style settings. I recommend against using this on your default style because display:none tags are not good for SEO. */
/* disable general avatars */
.userAvatarImage {
display: none;
}
/* disable user rank images */
.userRank {
display: none;
}
/* fix 'user is online' badge - you need this to put it in correct orientation after removing avatars */
.message .messageSidebar .userAvatar > .badgeOnline {
bottom: auto;
left: auto;
position: relative;
background-image: none;
border-radius: 9px;
}
.message .messageSidebar .userAvatar > .badgeOnline::before {
display: none;
}
/* remove 'user is online' badge - in case you prefer to disable it */
.badge.green.badgeOnline {
display: none;
}
/* hide 'new messages' badge from new forum posts */
.message .newMessageBadge {
display: none;
}
/* hide 'likes' and 'dislikes' badge - not necessary */
.badge.likesBadge.green {
display: none;
}
.badge.likesBadge.red {
display: none;
}
/* hide 'likes' column on forum - not necessary, but column is pointless if you decide to hide likes and dislikes. you may also keep the likes so they appear within forums, but still delete this column */
.columnLikes {
display: none;
}
/* disable avatar inside quotes - thanks Black Rider for this snippet */
.quoteBoxAuthor > .quoteAuthorAvatar {
display: none;
+ .quoteBox {
margin-left: 0;
}
}
/* hide images from signature - if signatures are ok and you just want to prevent images there */
.messageSignature img {
display: none;
}
/* hide whole signature */
.messageSignature {
display: none;
}
/* hide list of smilies - probably not necessary, will not hide smilies from posts */
.smileyList {
display: none;
}
/* disable images including smilies from forum message posts - you are probably better off using a browser extension or a plugin which converts images to links, than using this. But here it is. */
.messageText img {
display: none;
}
/* prevent images in the dashboard "recent activities" feed */
.dashboardBox img {
display: none;
}
/* hide share buttons from the bottom of threads - you probably don't want to, but if you must, change the display property to "none" */
.shareInfoBox {
display: inherit;
}
/* prevent "my posts are in this thread" icon */
.framed.myAvatar {
display: none;
}
/* hide users online icons - i doubt it's necessary */
.wbbBoardList .wbbUsersOnline {
display: none;
}
/* recover space from forum avatar column */
.messageGroupList .columnAvatar div {
width: auto;
}
/* recover space that was used by inline avatars */
.box24 > .framed ~ * {
margin-left: 2px;
}
/* recover avatar space from left reading panel */
.message .messageSidebar {
width: 138px;
}
.message.messageSidebarOrientationLeft .messageContent {
margin: 0 0 0 180px;
}
/* hide forum toplogo - not necessary if forum logo is safe for work, but creates a nice clean look */
.logo img {
display: none;
}
/* prevent images in preview popovers */
.popover > .popoverContent img {
display: none;
}
/* prevent preview popovers entirely */
.popover > .popoverContent {
display: none;
}
.popover {
display: none;
border-radius: 0;
padding: 0;
width: 0;
z-index: 0;
box-shadow: none;
}
.popover::after {
display: none;
}
.icon48 {
display: none;
}
/* disable avatars in Darkwood Studios Shoutbox */
.shoutboxEntry > .userAvatar {
display: none;
}
/* remove background image - easy to do yourself from style editor but here it is. if you use it be sure to define a background-color. */
body {
background-image: none;
background-color: initial;
}
Display More