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

XF 1.2 Custom Node Icon (again...)

Discussion in 'Styling and Customization Questions' started by Sheratan, Nov 7, 2013.

  1. Sheratan

    Sheratan Well-Known Member

    So I tried to break custom node icon "outside" pageWidth into like this (See "Anime" section. This is just a mock up)

    Untitled-1.jpg

    I trying to set margin-left -14px, z-index:99 but still had no luck.

    Any ideas?
     
  2. Sheratan

    Sheratan Well-Known Member

    Still no luck. Maybe I should find a xenforo site who used this kind of node icon to ask.
     
  3. Ernest L. Defoe

    Ernest L. Defoe Well-Known Member

    I bet @Sheldon could help you with something like this. He did this for my site http://www.secforu.ms/forums look at the bottom nodes. If he can do that I am sure he could do what you are needing.
     
  4. Sheldon

    Sheldon Well-Known Member

    Screenshot_11.png

    Screenshot_12.png

    Something along the lines of that? Don't mind the image obviously...
     
  5. Sheratan

    Sheratan Well-Known Member

    Yes, something like the 2nd pic.
     
  6. Shelley

    Shelley Well-Known Member

    Almost got it. In the middle of something so I'm jumping back and forth with this.
    Screenshot_62.png
     
  7. Sheratan

    Sheratan Well-Known Member

  8. Shelley

    Shelley Well-Known Member

    I pretty much did it the same way. so you change the margins/sizes and whatnot to fit your needs

    Code:
    .nodeList .node .nodeIcon, .nodeList .node .unread .nodeIcon {
      height: 38px;
      margin: 0 8px 0 -36px;
      width: 60px;}
    .nodeList .forumNodeInfo, .nodeList .forumNodeInfo.unread, .nodeList .categoryForumNodeInfo, nodeList .categoryForumNodeInfo.unread {
      overflow: visible !important; }
    .node .nodeText {
      margin: 10px 270px 10px 36px !important;}
    Screenshot_63.png
     
    Last edited: Nov 10, 2013
    Sheratan likes this.
  9. Sheratan

    Sheratan Well-Known Member

    Let me test it...
     
  10. Shelley

    Shelley Well-Known Member

    You'll need to tinker with it a little (lastpost might need adjusting).

    edit: I had to apply some negative value to the following you may need to do the same.

    Code:
    
    .node .nodeControls, .node .nodeLastPost {top: -10px !important;}
     
  11. Shelley

    Shelley Well-Known Member

    Last edited: Nov 10, 2013

Share This Page