XF 2.0 Customize an icon

Sort by date Sort by votes
Upvote 0 Downvote
 
Upvote 0 Downvote
Justwise said:
Anyone knows how to change this icon to a customized one?
View attachment 187631
Click to expand...

You can do his by editing your EXTRA.less file with something like this...

CSS: 
/** forum node with id of say 11 **/
.node--forum.node--id11.node--read .node-icon i:before{content: url(./images/forumicons/unread_image.png);}
.node--forum.node--id11.node--unread .node-icon i:before{content: url(./images/forumicons/read_image.png);}
/** forum node with id of say 99 **/
.node--forum.node--id99.node--read .node-icon i:before{content: url(./images/forumicons/unread_image.png);}
.node--forum.node--id99.node--unread .node-icon i:before{content: url(./images/forumicons/read_image.png);}

unread_image.png and read_image.png can be whatever you want for that particular forum node and make sure you add them into ./images/forumicons/
 
Upvote 0 Downvote
He used this already. Doing it this way, you only have to add 1 image, not 2.

Code: 
/**********/
.node .node-icon i { display: none; }
.node .node-icon {
background-image: url('/images/yourpic.png');
background-repeat: no-repeat;
background-position: center;   
}
.node--forum.node--read .node-icon {
background-image: url('/images/yourpic.png');
background-repeat: no-repeat;
background-position: center;
opacity: 0.4;
}
/**********/
 
Upvote 0 Downvote
Hristo Avramov said:
@Jordyn
What will be the code if I want to add exactly like what you said, but I also want to add different icons only for 2 forums. I tried messing up with this but whatever I do it always ends badly.
Click to expand...

the code i posted above is for individual forum nodes, change the node number to whatever node you want to change.

CSS: 
/** forum node with id of say 11 **/
.node--forum.node--id11.node--read .node-icon i:before{content: url(./images/forumicons/unread_image.png);}
.node--forum.node--id11.node--unread .node-icon i:before{content: url(./images/forumicons/read_image.png);}
/** forum node with id of say 99 **/
.node--forum.node--id99.node--read .node-icon i:before{content: url(./images/forumicons/unread_image.png);}
.node--forum.node--id99.node--unread .node-icon i:before{content: url(./images/forumicons/read_image.png);}
 
Upvote 0 Downvote
What if I use sprite? I tried to adjust the positions but they always end up weird.

Dermot said:
the code i posted above is for individual forum nodes, change the node number to whatever node you want to change.

CSS: 
/** forum node with id of say 11 **/
.node--forum.node--id11.node--read .node-icon i:before{content: url(./images/forumicons/unread_image.png);}
.node--forum.node--id11.node--unread .node-icon i:before{content: url(./images/forumicons/read_image.png);}
/** forum node with id of say 99 **/
.node--forum.node--id99.node--read .node-icon i:before{content: url(./images/forumicons/unread_image.png);}
.node--forum.node--id99.node--unread .node-icon i:before{content: url(./images/forumicons/read_image.png);}
Click to expand...
 
Upvote 0 Downvote
I would imagine you would have to set the position of the image you want to show from the sprite after the url parameter like i added below, didn't test it though

EG: adding the 0,-50

CSS: 
/** forum node with id of say 11 **/
.node--forum.node--id11.node--read .node-icon i:before{content: url(./images/forumicons/unread_image.png) 0,0;}
.node--forum.node--id11.node--unread .node-icon i:before{content: url(./images/forumicons/read_image.png) 0,-50;}
/** forum node with id of say 99 **/
.node--forum.node--id99.node--read .node-icon i:before{content: url(./images/forumicons/unread_image.png) 0,0;}
.node--forum.node--id99.node--unread .node-icon i:before{content: url(./images/forumicons/read_image.png) 0,-50;}
 
Upvote 0 Downvote
Hristo Avramov said:
What if I use sprite? I tried to adjust the positions but they always end up weird.
Click to expand...

Okay, actually tried it myself and content doesn't allow positioning of background so sprites would not work, you would have to do something like the following, using the following sprite gif as reference.

img_navsprites_hover.gif


CSS: 
/** forum node with id of say 2 **/

.node--forum.node--id2.node--read .node-icon i:before{
background: url('https://www.w3schools.com/css/img_navsprites_hover.gif') no-repeat 0px 0px;
    width:43px;
    height:43px;
    display:block;
    position:absolute;
    content: " ";
    top:20px;
    left:10px;
}
.node--forum.node--id2.node--unread .node-icon i:before{
    background: url('https://www.w3schools.com/css/img_navsprites_hover.gif') no-repeat -91px 0px;
    width:43px;
    height:43px;
    display:block;
    position:absolute;
    content: " ";
    top:20px;
    left: 10px;
}

read node been the home icon and unread as right arrow..
 
Upvote 0 Downvote
Hristo Avramov said:
@Jordyn
What will be the code if I want to add exactly like what you said, but I also want to add different icons only for 2 forums. I tried messing up with this but whatever I do it always ends badly.
Click to expand...
You can just use both codes mate.
First code add in extra.less, add your image for all forums first.
Code: 
/* Node All Forums */
.node .node-icon i { display: none; }
.node .node-icon {
background-image: url('/images/yourpic.png');
background-repeat: no-repeat;
background-position: center;  
}
.node--forum.node--read .node-icon {
background-image: url('/images/yourpic.png');
background-repeat: no-repeat;
background-position: center;
opacity: 0.4;
}
/* Node All Forums End */



In this code, add to extra.less, replace the numbers 4/5 with your 2 forum ID's and add your images.
Code: 
/* Node icons */
.node--id4 .node-icon i { display: none; }
.node--id4 .node-icon {
background-image: url('/images/yourimage.png');
background-repeat: no-repeat;
background-position: center;  
}
.node--forum.node--id4.node--read .node-icon {
background-image: url('/images/yourimage.png');
background-repeat: no-repeat;
background-position: center;
opacity: 0.4;
}
/* Node icons End */

/* Node icons */
.node--id5 .node-icon i { display: none; }
.node--id5 .node-icon {
background-image: url('/images/yourimage.png');
background-repeat: no-repeat;
background-position: center;  
}
.node--forum.node--id5.node--read .node-icon {
background-image: url('/images/yourimage.png');
background-repeat: no-repeat;
background-position: center;
opacity: 0.4;
}
/* Node icons End */
 
Upvote 0 Downvote
I manage to setup the default icon and it is in position but with both of the codes you provided for specific node icon the icon is always out of position, it's like it doesn't follow the css of the default icon. I am using this css for the default icon because I decided to have only 1 icon, not 2 for read and unread.

Code: 
.node-icon i{
    background-image: url(images/iconsprites.png);
    background-position: 0px 0px;
    height: 32px;
    line-height: 40px;
    width: 32px;
}
 
Upvote 0 Downvote
Hristo Avramov said:
I manage to setup the default icon and it is in position but with both of the codes you provided for specific node icon the icon is always out of position, it's like it doesn't follow the css of the default icon. I am using this css for the default icon because I decided to have only 1 icon, not 2 for read and unread.

Code: 
.node-icon i{
    background-image: url(images/iconsprites.png);
    background-position: 0px 0px;
    height: 32px;
    line-height: 40px;
    width: 32px;
}
Click to expand...
You would just use this code without the opacity: 0.4; and add your 1 image to both mate.
Code: 
/* Node All Forums */
.node .node-icon i { display: none; }
.node .node-icon {
background-image: url('/images/yourpic.png');
background-repeat: no-repeat;
background-position: center; 
}
.node--forum.node--read .node-icon {
background-image: url('/images/yourpic.png');
background-repeat: no-repeat;
background-position: center;
}
/* Node All Forums End */
 
Upvote 0 Downvote
Hristo Avramov said:
I manage to setup the default icon and it is in position but with both of the codes you provided for specific node icon the icon is always out of position, it's like it doesn't follow the css of the default icon. I am using this css for the default icon because I decided to have only 1 icon, not 2 for read and unread.

Code: 
.node-icon i{
    background-image: url(images/iconsprites.png);
    background-position: 0px 0px;
    height: 32px;
    line-height: 40px;
    width: 32px;
}
Click to expand...

you would have to position the icon with the CSS using absolute positioning or relative positioning then use the background position to align sprite, if you're using a sprite, which i think you are? Jordyn keeps giving you a single image result though so i'm not sure.

CSS: 
.node .node-icon i:before { content: " "; }

.node--forum.node--id2.node--read .node-icon i{
    background: url('https://www.w3schools.com/css/img_navsprites_hover.gif') no-repeat 0px 0px;
    position: relative;
    left: -5px;
    display: table-cell;
    vertical-align: middle;
    padding: 8px 14px 0px 0px;
    opacity: 0.4;
}
.node--forum.node--id2.node--unread .node-icon i{
    background: url('https://www.w3schools.com/css/img_navsprites_hover.gif') no-repeat -91px 0px;
    position: relative;
    left: -5px;
    display: table-cell;
    vertical-align: middle;
    padding: 8px 14px 0px 0px;
}

Obviously these values will differ on whatever theme you're using and you will need to tweak it, same way you will have to tweak the position of the sprites, as it depends on what sprite and how many icons are in the single sprite.

if you give me the sprite url and your site url i could check it for you.
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

Fred.
  • Question Question
XF 2.3 How to add space after custom font awesome node icon?
Replies
2
Views
39
Fred.
Fred.
J
Add-on XMG - add-on to customize album view
Replies
5
Views
84
philmckrackon
philmckrackon
GermanPotato
  • Question Question
Cannot customize forum permissions
Replies
1
Views
46
Paul B
P
K
Broken output when using icon in custom field title
Replies
0
Views
28
Kirby
K
RaPoRSuZDeLi
  • Solved
XF 2.3 How to add footer FA icon?
Replies
5
Views
49
RaPoRSuZDeLi
RaPoRSuZDeLi
Back
Top Bottom