Skip to main content
Topic: How can I exchange the board icons? (Read 94 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

How can I exchange the board icons?

Hello!

How can I exchange the board icons in the BeSocial theme of ElkArte 1.1.3 ?
By default the green and grey are displayed (Fontawesome?), but in the images folder are also the blue and grey (board_icons.png).
How can I now integrate six other individual icons (on.png, off.png, redirect.png ...)?
I haven't found a suitable topic in the forum, only some in which it's about the themes of EA version 1.0.x or the light theme.
ElkArte version: 1.1.3 / Theme: modified BeSocial!

Re: How can I exchange the board icons?

Reply #1
Actually, in 1.1 these icons are SVG images and not font and... I think the fact only the green ones are used is a bug. :P
@Spuds what do you think?
Shouldn't icons_svg.css be inside the variant folders?
Bugs creator.
Features destroyer.
Template killer.

Re: How can I exchange the board icons?

Reply #2
I'm thinking I forgot to commit a file !  

You should be able to have a variant icon file " icons_svg_besocial.css " in the besocial css directory and it will load.  I know I made the besocial board icons, but I bet since that was a new file I simply forgot to commit it :-[

Now I have to hope I still have it !!!!!!!!!!!
Squish squish. squish, squish, squish.
Find a bug,
Make a wish.

Re: How can I exchange the board icons?

Reply #3
The icon file "icons_svg_besocial.css" is in the css directory, so the icons of the light theme are the same green and grey.

The board icons part there:
Code: [Select]
/* Board icons */
.i-board-redirect::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3ClinearGradient id='brdGrd' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%235FA77B'/%3E%3Cstop offset='35%25' stop-color='%23539442'/%3E%3Cstop offset='60%25' stop-color='%23539442'/%3E%3Cstop offset='100%25' stop-color='%235FA77B'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23brdGrd)' d='M24 20v-4H14v-4h10V8l6 6zm-2-2v8H12v6L0 26V0h22v10h-2V2H4l8 4v18h8v-6z'/%3E%3C/svg%3E");
}

.i-board-new::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3ClinearGradient id='brdGrd' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%235FA77B'/%3E%3Cstop offset='20%25' stop-color='%23539442'/%3E%3Cstop offset='80%25' stop-color='%23539442'/%3E%3Cstop offset='100%25' stop-color='%235FA77B'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23brdGrd)' d='M26 30l6-16H6L0 30zM4 12L0 30V4h9l4 4h13v4z'/%3E%3C/svg%3E");
}

.i-board-sub::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3ClinearGradient id='brdGrd' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%235FA77B'/%3E%3Cstop offset='25%25' stop-color='%23539442'/%3E%3Cstop offset='80%25' stop-color='%23539442'/%3E%3Cstop offset='100%25' stop-color='%235FA77B'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23brdGrd)' d='M18 8l-4-4H0v26h32V8H18zm-2 19l-7-7h5v-8h4v8h5l-7 7z'/%3E%3C/svg%3E");
}

.i-board-off::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23aeaeae' viewBox='0 0 32 32'%3E%3Cpath d='M26 30l6-16H6L0 30zM4 12L0 30V4h9l4 4h13v4z'/%3E%3C/svg%3E");
}
ElkArte version: 1.1.3 / Theme: modified BeSocial!

Re: How can I exchange the board icons?

Reply #4
I found it :D

It was on my old laptop, glad I did not "convert" that yet. 

Attached is the missing beSocial icon file that you should place in your beSocial css directory.  It has the correct board icons and color/shape updates to 21 others.  I can't imaging how emanuele forgot to commit this file :P
Squish squish. squish, squish, squish.
Find a bug,
Make a wish.

 

Re: How can I exchange the board icons?

Reply #5
Now the right ones are there. :)
But what do I have to do if I want to exchange them for my own icons? Which is the easiest way?
I have some which are slightly larger in size (55x48 px).
ElkArte version: 1.1.3 / Theme: modified BeSocial!