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

[1.2] Subforum unread/read Icons (Indicators) 2013-06-20

Subforum grid icons

  1. Shelley

    Shelley Well-Known Member

    Shelley submitted a new resource:

    [1.2] Subforum unread/red Icons (Indicators) - Subforum grid icons

    Read more about this resource...
     
  2. RoldanLT

    RoldanLT Well-Known Member

    This should be built-in @Mike @Kier
    Hopefully!
    Thanks !
     
    Shelley likes this.
  3. Shelley

    Shelley Well-Known Member

    Yeah I think I have to agree, I was debating on whether to suggest this which i might just go and do now.
     
    RoldanLT likes this.
  4. Shelley

    Shelley Well-Known Member

    resonansER and RoldanLT like this.
  5. Ji2myTran

    Ji2myTran Active Member

    Hi Shelley,

    Excellent!! (y) However, why didn't i see the check box " Show sub-forums popup" in Style Properties >>Forum / Node List?

    I'm using XF ver1.3

    Thanks!
     
  6. Shelley

    Shelley Well-Known Member

    There's not a v1.3. if your referring to 1.1.3 then the sub forum grid isn't implemented into this older version it's only just been implemented into 1.2
     
    RoldanLT likes this.
  7. Ji2myTran

    Ji2myTran Active Member

    Sorry, i mean version 1.1.3. Oh! i got it now, thanks. ;)
     
    Shelley likes this.
  8. Shelley

    Shelley Well-Known Member

    No worries. :) And your welcome. I thought 1.3 I want it already. :D
     
  9. Ji2myTran

    Ji2myTran Active Member

    Haha! :D by the way, for XF 1.1.3, if you want to display with the same style like this, just add this into EXTRA.CSS:

    Code:
    .subForumsPopup .dot span {
    background: url("@imagePath/xenforo/icons/subforum-read.png") no-repeat left center transparent;
      height: 10px;
      width: 10px;
      content: "";
      padding-left: 12px;
    }
    Then go to node_forum_level_n, find:

    Code:
    <li class="node forum level-n node_{$forum.node_id}">
    Add this below:

    Code:
    <span class="dot"><span></span></span>
    Here is the flat design:

    Code:
    .subForumsPopup .dot span
    {
    width: 7px;
    height: 7px;
    background-color: #f89306;
    display: inline-block;
    zoom: 1;
    top: 10px !important;
    position: absolute;
    left: 6px;
    }
    Cheers!! (y)
     
  10. Shelley

    Shelley Well-Known Member

    For anyone that is interested I made a couple of css edits/additions and gave the subforums some spacing and set the width value to 20 something percent. I also made the icon a little smaller (it's a pixel smaller) :p but yeah, I thought i'd just submit it on chance this is preferred which gives the subforum grid area a little more prominence.

    Install: Upload the icons to the /icons folder and paste the css code into your EXTRA.CSS template.

    Code:
    .nodeList .node .subForumList li { width: 22%; }   
    
    .nodeList .node .subForumList  { margin: 0 10px 10px 56px;}
    
    .subForumList li .nodeTitle:before {
      background: url("@imagePath/xenforo/icons/subforum-read.png") no-repeat left center transparent;
      height: 10px;
      width: 10px;
      content: "";
      padding-left: 12px; }
    
    .subForumList li .unread .nodeTitle:before {
      background: url("@imagePath/xenforo/icons/subforum-unread.png") no-repeat left center transparent;
      height: 10px;
      width: 10px;
      content: "";
      padding-left: 12px; }
       
    .subForumList {
      background-color: @primaryLightest;
      border: 1px solid @primaryLighterStill;
      border-radius: 3px;}
    
    
    subforum-enhanced.png
     

    Attached Files:

  11. imno007

    imno007 Active Member

    Thanks for this! Definitely looks better now. ;)
     
    Shelley likes this.
  12. Rizwan Kassim

    Rizwan Kassim Member

    Odd ... I unchecked that box in XF 1.2rc2 and haven't been able to remove the popups.
     
  13. PhiHDN

    PhiHDN Member

    Here is my CSS. No images used.
    Demo at my site: http://www.caravanvn.com

    Code:
    .subForumList li .nodeTitle a:before {
      content:"•";
      color: #cecece;
      font-weight:bold;
      margin-right:5px;
    }
    
    .subForumList li .unread .nodeTitle a:before {
      content:"•";
      color: #6CB2E4;
      font-weight:bold;
      margin-right:5px;
    }
    
    /* Add background color when hover */
    .subForumList a:hover, .subForumList a:focus {
        background-color: #D7EDFC;
        text-decoration: none;
    }
    
    .subForumList a {
        border-radius: 5px 5px 5px 5px;
        color: #175F92;
        outline: 0 none;
        display: block;
        padding: 5px 10px;
    }
     
    Last edited: Aug 3, 2013
    StRonK, Andre Daub and Shelley like this.
  14. Shelley

    Shelley Well-Known Member

    Nice. I did consider not using images but i do like using images with all the extra effects that come with using imagery. Nice job though. (y)
     
    PhiHDN likes this.
  15. wickedstangs

    wickedstangs Well-Known Member

    this stopped working on my new skin.. :( and I went to my new skin extra.css

    UPDATE FIXED...
     
    Last edited: Aug 17, 2013
  16. Tize

    Tize Active Member

    Super!

    s.png
     
  17. Fatih Özcan

    Fatih Özcan Active Member

    Hello Shelly,

    How can we change sun forum style like that. Thanks..

    subforum-enhanced.png
     

Share This Page