Custom images (icons read/unread) in nodes

[King]

Custom images (icons) in nodes

This tutorial shows how to put custom images to mark "read" and "unread" with different images.

​

Copy on template: extra.less

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

Add / 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...