Skip to main content
Topic: Custom Board Icon (Read 4726 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Re: Custom Board Icon

Reply #1

Yes, that would be great to quickly add icons with links to other sites or to subdomains or to a wordpress blog as a substitute
for a portal...

Re: Custom Board Icon

Reply #2

CSS is usually more than enough:
Code: [Select]
#board_1 .board_icon:before {
    content: "";
    width: 3em;
    height: 3em;
    display: block;
    background-image: url(https://www.elkarte.net/community/avatars/Oxygen/rocket.png);
    background-size: 100%;
}
Then only thing you have to change is the "1" at the end of "#board_1" with the id of each board (that you can look up with any "inspect tool" of your browser). ;)

Re: Custom Board Icon

Reply #3

I have a few questions about the CSS code.
In my case, it affects the EA version 1.1.3 and the besocial theme.

1) The code must be inserted in the index.css? (I did it so)

2) After that, do I have to change, comment out or delete something in the index.css, icons_svg.css or index_besocial.css (custom_besocial.css)?

3) How can users notice with the new icons, if there are new unread posts in the boards? The color/look of the icons will always be the same. Or not?

4) How must I write it, if several boards shall have the same icon? I tried it that way, but it's obviously wrong. In the forum the boards then slip into each other.
Code: [Select]
#board_2, #board_3, #board_4 .board_icon:before {

Re: Custom Board Icon

Reply #4

Quote from: Mrs. Chaos – 1) The code must be inserted in the index.css? (I did it so)
Do not use index.css, use a custom file
  • /themes/default/css/_besocial/custom_besocial.css (for BeSocial version)
  • /themes/default/css/_light/custom_light.css (for Light version)
Do a research on the forum, there are several discussions about custom css.

Quote from: Mrs. Chaos – 2) After that, do I have to change, comment out or delete something in the index.css, icons_svg.css or index_besocial.css (custom_besocial.css)?
There is no need to edit the inedex.css, icons_svg.css o index_besocial. Do all the edits in custom_besocial.css file

Eg: let's say you have in index.css this piece of css:
Code: [Select]
.admin_menu {
    color: white;
}
and instead of white you want it red, in custom_besocial.css you will have to add:
Code: [Select]
.admin_menu {
    color: red;
}
As you can see there is no need to edit the original files. ;)


Quote from: Mrs. Chaos – 4) How must I write it, if several boards shall have the same icon? I tried it that way, but it's obviously wrong. In the forum the boards then slip into each other.

Try with:
Code: [Select]
#board_1 .board_icon:before, #board_2 .board_icon:before, #board_3 .board_icon:before {


Last Edit: April 27, 2018, 04:30:29 pm by radu81
sorry for my bad english

Re: Custom Board Icon

Reply #5

I already have a custom.css -> custom_besocial.css

In it is this part:

Code: [Select]
	.board_icon {
width: 25px;
height: 25px;
position: relative;
top: -5px;
}

.on_board, .on2_board {
background-position: -300px -14px;
}

.off_board {
background-position: -372px -14px;
}

.redirect_board {
background-position: -444px -14px;
}

May the part remain there or shall I replace it with that new code?:

Code: [Select]
#board_1 .board_icon:before {
    content: "";
    width: 3em;
    height: 3em;
    display: block;
    background-image: url(https://www.elkarte.net/community/avatars/Oxygen/rocket.png);
    background-size: 100%;
}

 

Re: Custom Board Icon

Reply #6

Everything worked, thanks!
I would need for the index page 30 icons, 20 of it should be different, but I can't find so many that fit well with the topics (also not from Fontawesome).
I think, for now I will try to exchange just the six standard icons for six new ones. To this I have a few questions, too, but I'll open a new topic for these.