How can I exchange the board icons?

How can I exchange the board icons? Started by Mrs. Chaos · April 29, 2018, 09:42:46 am · Read 9515 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

How can I exchange the board icons?

April 29, 2018, 09:42:46 am

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.

Re: How can I exchange the board icons?

Reply #1 – April 29, 2018, 05:08:50 pm

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.

@Spuds what do you think?
Shouldn't icons_svg.css be inside the variant folders?

Re: How can I exchange the board icons?

Reply #2 – April 30, 2018, 09:30:08 am

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 – April 30, 2018, 11:10:54 am

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");
}

Re: How can I exchange the board icons?

Reply #4 – May 02, 2018, 06:53:06 pm

I found it

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

Re: How can I exchange the board icons?

Reply #5 – May 03, 2018, 02:40:10 am

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).

Re: How can I exchange the board icons?

Reply #6 – June 30, 2018, 11:51:03 am

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?

Re: How can I exchange the board icons?

Reply #7 – June 30, 2018, 12:45:15 pm

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.

Re: How can I exchange the board icons?

Reply #8 – June 30, 2018, 02:35:33 pm

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:

Re: How can I exchange the board icons?

Reply #9 – July 01, 2018, 11:12:42 am

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:

Re: How can I exchange the board icons?

Reply #10 – July 01, 2018, 02:34:20 pm

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;
    }
}

Re: How can I exchange the board icons?

Reply #11 – July 01, 2018, 04:56:49 pm

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

Re: How can I exchange the board icons?

Reply #12 – July 01, 2018, 05:08:32 pm

Try to reload the page using Ctrl + F5

Re: How can I exchange the board icons?

Reply #13 – July 02, 2018, 02:31:21 am

Hmm... I remember some customs are loaded not in the best order, maybe add an !important to the property:

Code: [Select]

width: 1em !important:

Re: How can I exchange the board icons?

Reply #14 – July 02, 2018, 04:28:44 am

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;
}