King
Administrator
- Joined
- Jul 12, 2021
- Messages
- 25,005
- Reaction score
- 5
- Points
- 38
Custom images (icons) in nodes
This tutorial shows how to put custom images to mark "read" and "unread" with different images.
Copy on template: This tutorial shows how to put custom images to mark "read" and "unread" with different images.
extra.lessCode:
Code:
/***** START // Node icons with custom image (https://thejavasea.com) *****/
.node.node--id? {
.node-icon i { display: none; }
&.node--forum {
.node-body {
}
.node-icon {
background-image: url('Unread_IMG.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
&.node--read .node-icon {
background-image: url('Read_IMG.png');
webkit-filter: none !important;
filter: none !important;
}
}
}
/***** END // Node icons with custom image (https://thejavasea.com) *****/Replace:
· "?" > Your node ID.
· "Unread_IMG.png" > Image you want to use on unread nodes.
· "Read_IMG.png" > Image you want to use on read nodes.
Replace depending on the type of node ...
· ".node--forum" >
.node--category· ".node--forum" >
.node--page· ".node--forum" >
.node--linkAdd / change css to adjust the image to the desired taste
How do I find the ID?
If you hover over the node's title (in Google Chrome), the node's address appears in the lower left corner of the window. The number at the end is the ID.
Continue reading...