1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Please donate today & help us with our growing server costs or buy premium for access to our premium products
    Dismiss Notice

Free Change Forum Status Icons To CSS Boxes (no images)

Discussion in 'Xenforo Template Mods & Extras' started by HAWK, Mar 21, 2016.

  1. HAWK

    HAWK Administrator Staff Member ADMIN

    Likes Received:
    593
    Trophy Points:
    113
    Gender:
    Male
    Edit this template:

    Admin CP -> Appearance -> Templates -> node_list.css

    Find this code:
    Code:
    .node .nodeIcon
    {
        @property "nodeIcon";
        background: transparent none no-repeat center center;
        margin: 10px 0 10px 10px;
        float: left;
        width: 36px;
        height: 36px;
        @property "/nodeIcon";
    }
    
        .node .forumNodeInfo .nodeIcon,
        .node .categoryForumNodeInfo .nodeIcon
        {
            background-image: url(@forumIconReadPath);
        }
    
        .node .forumNodeInfo.unread .nodeIcon,
        .node .categoryForumNodeInfo.unread .nodeIcon
        {
            background-image: url(@forumIconUnreadPath);
        }
    
        .node .pageNodeInfo .nodeIcon
        {
            background-image: url(@pageIconPath);
        }
    
        .node .linkNodeInfo .nodeIcon
        {
            background-image: url(@linkIconPath);
        }
    Change to this (I added the border-radius and changed the background-image to background-color):
    Code:
    .node .nodeIcon
    {
        @property "nodeIcon";
        background: transparent none no-repeat center center;
        margin: 10px 0 10px 10px;
        float: left;
        width: 36px;
        height: 36px;
        border-radius: 3px;
        @property "/nodeIcon";
    }
    
        .node .forumNodeInfo .nodeIcon,
        .node .categoryForumNodeInfo .nodeIcon
        {
            background-color: #aaaaaa;
        }
    
        .node .forumNodeInfo.unread .nodeIcon,
        .node .categoryForumNodeInfo.unread .nodeIcon
        {
            background-color: #555555;
        }
    
        .node .pageNodeInfo .nodeIcon
        {
            background-image: url(@pageIconPath);
        }
    
        .node .linkNodeInfo .nodeIcon
        {
            background-image: url(@linkIconPath);
        }
     

Share This Page