colorization of custom board icons

Topic: colorization of custom board icons (Read 1712 times) previous topic - next topic

0 Members and 1 Guest are viewing this topic.

colorization of custom board icons

November 18, 2015, 07:42:07 am

If I use custom board icons using botstrap, what will they look like in color if there is:

1. a new post in this board
2. a new post in a sub board
3. no new post

1. should be the link color, right? But what about 2. and 3.?

Re: colorization of custom board icons

Reply #1 – November 18, 2015, 02:50:47 pm

hmm... I guess you are referring to the topic by TE, right?
I think you can decide what the color shall be with some css, the icons have the classes "on_board", "on2_board" and "off_board" depending on what the state is, so you can use them (how exactly depends on how you exactly are styling the board index) to define the color of the icons.

So, for example:

Code: [Select]

.category_boards .board_icon {
    background-image: none;
}
.board_icon:before {
    font-family: "FontAwesome";
    content: '\f0a5';
    position: relative;
    top: 5px;
    font-size: 2.7em;
    text-shadow: 1px 1px 2px #555;
}

.board_icon.on_board:before {
    color: red;  /* Unread boards */
}
.board_icon.on2_board:before {
    color: pink;  /* Unread sub-boards */
}
.board_icon.off_board:before {
    color: grey;  /* All read */
}

Re: colorization of custom board icons

Reply #2 – June 28, 2016, 11:40:48 pm

Just to be 100% sure.... in 1.1, this is no longer applicable right? It's been superseded by these new CSS right?

From this area onwards:

Code: [Select]

/********************************************************************
 * Most (so far all) of these are from Font Awesome.
 *
 * Where an icon was renamed, I list the original name in a comment.
 ********************************************************************/

Re: colorization of custom board icons

Reply #3 – June 29, 2016, 04:18:53 am

IIRC they use the same approach, just change the content of the .board_icon:before and it should work.