New And No New Post Icons

[Steve]

How the heck does one change these icons?

[Shades.]

You have to edit boardicons.png in Themes/default/images/boardicons.png

You cannot view this attachment.

[Kindred]

Or change the css..   that's what I did

[Steve]

Or change the css..   that's what I did

How?

[Antechinus]

Like this:

Code Select Expand

/* ------------------------------- */
/* @todo - Board icons - animated. */
.board_on, .board_on2  {
    filter: sepia(1) hue-rotate(-10deg) saturate(1.6);
    animation: BoardOnPulse 3s infinite;
}
@keyframes BoardOnPulse{
    0% {
        opacity: .5;
    }
    50% {
        opacity: .5;
    }
    75% {
        opacity: .6;
    }
    100% {
        opacity: .5;
    }
}
/* ----------------------------- */
/* @todo - Board icons - static. */
.board_off {
mix-blend-mode: soft-light;
}
.board_redirect {
background-image: none !important;
position: relative;
}
.board_redirect::before {
position: absolute;
display: block;
width: 45px;
height: 45px;
content: '';
background: url(https://static.simplemachinesweb.com/smf/smsite/images/boardicons.png) no-repeat 0 0 / 90px;
background-position: -1px -41px;
    opacity: .3;
}
.board_redirect::after {
position: absolute;
display: block;
width: 45px;
height: 45px;
top: -2px;
left: 2px;
font-size: 3.125rem;
line-height: 1em;
content: '\21aa';
transform: scaleY(-1);
background: linear-gradient(90deg,#bb9c77,#eda85a);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
text-shadow: 1px 1px 1px rgba(23,35,44,.3);
}
/* ------------------------------------------- */
/* @todo - Board icons - Hover, focus, active. */
.board_on:hover, .board_on:focus,.board_on:active,
.board_on2:hover, .board_on2:focus,.board_on2:active {
    animation: none;
    opacity: .9;
}
.board_redirect:hover::before, .board_redirect:focus::before,.board_redirect:active::before {
    opacity: .6;
}
.board_redirect:hover::after, .board_redirect:focus::after,.board_redirect:active::after {
background: #ffb866;
-webkit-background-clip: text;
background-clip: text;
}
(A smartarse answer, but it shows you the relevant elements.)

[Kindred]

Look at my test site.  Test2.turtleshellprod.com

I replaced the icons with a gradient circle, and then overlaid a star wars icon on top .

[Steve]

Thanks guys. Not sure why we made it so we couldn't just replace the on and off pngs but it is what it is.

Thanks again.

[Arantor]

The reason is that pushing a single image with all the parts in it is faster for end users than separate images. And Google etc penalises you if you do this sort of thing wrong now.

[Kindred]

yup... which is why I replaced it with a css generated "bubble" and a font-set-icon

[Shades.]

Or change the css..   that's what I did

How?

You can also use this mod. I just tested it and it works on 2.1.1!

[Steve]

Thanks Shades. Will give that a look.