Skip to main content
How can I exchange the board icons? Started by Mrs. Chaos · · Read 9145 times 0 Members and 1 Guest are viewing this topic. previous topic - next 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.8 / Theme: BeSocial / PHP 8.0

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 !!!!!!!!!!!

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.8 / Theme: BeSocial / PHP 8.0

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

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.8 / Theme: BeSocial / PHP 8.0

Re: How can I exchange the board icons?

Reply #6

I come back to my question in the last post.
How can I exchange the board icons for others? I would like to have others instead of the comment balloons.
I know on which pages I can change the size, spacing and colors of the balloons, but I just can not figure out how to exchange the entire icons/images for others.
Where and how is this done, please?
And can I somehow insert a colored background behind them?
ElkArte version: 1.1.8 / Theme: BeSocial / PHP 8.0

Re: How can I exchange the board icons?

Reply #7

You have the code there, in the content use the url you want:
Code: [Select]
.i-board-redirect::before {
content: url("https://www.elkarte.net/community/index.php?action=dlattach;attach=5905;type=avatar");
}
this is for the redirect, you can do it for any other following the naming scheme you posted in your message above.
Bugs creator.
Features destroyer.
Template killer.

Re: How can I exchange the board icons?

Reply #8

Oh, that's really easy...
I have just exchanged the icons in my test forum and now I will do that in my main forum, too.
Thank you!


EDIT
1)  "sub" is the same that used to be "on2" in EA version 1.0.x?
2)  In the footer the two icons have now the same large size as the board icons. How can I get these small again?

My too large icons and the small original icons:
Last Edit: July 01, 2018, 10:49:06 am by Mrs. Chaos
ElkArte version: 1.1.8 / Theme: BeSocial / PHP 8.0

Re: How can I exchange the board icons?

Reply #9

Second question:
Likewise, I have found that when viewing with a smartphone, the font lines extend into the board icons, which are now slightly larger than the original icons. The view is correct on the PC and notebook, but not on the smartphone.
Can I somehow increase the spacing between the icons and the two lines of text only for mobile view?

The view with the PC and with my smartphone:
Last Edit: July 01, 2018, 11:18:23 am by Mrs. Chaos
ElkArte version: 1.1.8 / Theme: BeSocial / PHP 8.0

Re: How can I exchange the board icons?

Reply #10

For the legend:
Code: [Select]
#posting_icons .i-board-redirect::before {
    width: whatever;
    height: whatever;
}

For the mobile:
Code: [Select]
@media screen and (max-width: 50em) {
   
@media screen and (max-width: 50em) {
    .i-board-redirect::before {
        width: whatever;
        height: whatever;
    }
}

@media screen and (max-width: 33.750em) {
    .i-board-redirect::before {
        width: whatever;
        height: whatever;
    }
}
Bugs creator.
Features destroyer.
Template killer.

Re: How can I exchange the board icons?

Reply #11

Hm, for the legend I tried it with

Code: [Select]
#posting_icons .i-board-redirect::before {
    width: 1em;
    height: 1em;
}

in the custom_besocial.css and the index.css, but there was no change.

The same goes for the mobile view. There were also no changes.
What am I doing wrong??  :o
ElkArte version: 1.1.8 / Theme: BeSocial / PHP 8.0

Re: How can I exchange the board icons?

Reply #12

Try to reload the page using Ctrl + F5
sorry for my bad english

Re: How can I exchange the board icons?

Reply #13

Hmm... I remember some customs are loaded not in the best order, maybe add an !important to the property:
Code: [Select]
width: 1em !important:
Bugs creator.
Features destroyer.
Template killer.

Re: How can I exchange the board icons?

Reply #14

Colon or semicolon in the end?

I've tried it in custom.css now like in the following code, with entries for redirect, off and new. But again there was no change/reduction of the icons.

Code: [Select]
#posting_icons .i-board-redirect::before {
    width: 1em !important;
    height: 1em !important;
}

#posting_icons .i-board-off::before {
    width: 1em !important;
    height: 1em !important;
}

#posting_icons .i-board-new::before {
    width: 1em !important;
    height: 1em !important;
}
ElkArte version: 1.1.8 / Theme: BeSocial / PHP 8.0