1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

node nodeInfo styling

Discussion in 'Styling and Customization Questions' started by gldtn, Aug 26, 2011.

  1. gldtn

    gldtn Well-Known Member

    I'm having a hard time understanding why my css code is generating this..

    I applied to EXTRA.CSS:
    Code:
    /* ============= */
    /* = forumlist = */
    /* ============= */
    
    .node:first-child .nodeInfo {
      -webkit-border-top-left-radius: 5px;
      -webkit-border-top-right-radius: 5px;
      -moz-border-radius-topleft: 5px;
      -moz-border-radius-topright: 5px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }
    
    .node:last-child .nodeInfo {
      -webkit-border-bottom-right-radius: 5px;
      -webkit-border-bottom-left-radius: 5px;
      -moz-border-radius-bottomright: 5px;
      -moz-border-radius-bottomleft: 5px;
      border-bottom-right-radius: 5px;
      border-bottom-left-radius: 5px;
    }
    
    .node .nodeInfo {
      -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
      -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    }
    Some of the nodes are fine, but random ones are messed up, so I'm not sure where to begin; here are some screenshots:

    001.jpg 002.jpg 003.jpg 004.jpg

    Does anyone have a clue as to what might be happening?

    Thanks!
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I played with this for a while. This works:

    Code:
    /* ============= */
    /* = forumlist = */
    /* ============= */
    
    li.forum:first-child .nodeInfo, li.category_forum:first-child .nodeInfo {
      -webkit-border-top-left-radius: 5px;
      -webkit-border-top-right-radius: 5px;
      -moz-border-radius-topleft: 5px;
      -moz-border-radius-topright: 5px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }
    
    li.forum:last-child .nodeInfo, li.category_forum:last-child .nodeInfo {
      -webkit-border-bottom-right-radius: 5px;
      -webkit-border-bottom-left-radius: 5px;
      -moz-border-radius-bottomright: 5px;
      -moz-border-radius-bottomleft: 5px;
      border-bottom-right-radius: 5px;
      border-bottom-left-radius: 5px;
    }
    
    .node .nodeInfo {
      -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
      -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    }
    
    I had to specify li.node:first-child instead of just .node:first-child. And I also had to be more specific than .node so I changed that to specify the specific types of nodes, li.forum:first-child and li.category_forum:first-child.

    For reference:

    http://www.w3schools.com/css/css_pseudo_classes.asp
     
    bogus likes this.
  3. bogus

    bogus Guest

    anyone knows how that has to look like for Forums Page List?
     

Share This Page