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

[Shelley]

Shelley submitted a new resource:

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

View attachment 49395

Summary: this small edit will allow for you to have read & unread post icons (indicators) to the left of the xenforo subforum grid titles.

Install: Upload the images in the zip archive to your /icons folder and paste the following into EXTRA.CSS

Additional Note: To enable the xenforo subforum grid layout you will need to go into Style Properties >> Forum / Node List & uncheck the checkbox...

Read more about this resource...

 

[rdn]

This should be built-in @Mike @Kier
Hopefully!
Thanks !

 

[Shelley]

This should be built-in @Mike @Kier
Hopefully!
Thanks !

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

 

[Shelley]

This should be built-in @Mike @Kier
Hopefully!
Thanks !

Made the suggestion here http://xenforo.com/community/threads/1-2-sub-forum-unread-read-indicators-grid.52955/#post-566339

 

[Ji2myTran]

Hi Shelley,

Excellent!! 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!

 

[Shelley]

Hi Shelley,

Excellent!! 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!

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

 

[Ji2myTran]

Sorry, i mean version 1.1.3. Oh! i got it now, thanks.

 

[Shelley]

Sorry, i mean version 1.1.3. Oh! i got it now, thanks.

No worries. And your welcome. I thought 1.3 I want it already.

 

[Ji2myTran]

Haha! 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:

.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:

<li class="node forum level-n node_{$forum.node_id}">

Add this below:

<span class="dot"><span></span></span>

Here is the flat design:

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

Cheers!!

 

[Shelley]

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) 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.

.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;}

 

[imno007]

Thanks for this! Definitely looks better now.

 

[Rizwan Kassim]

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

 

[PhiHDN]

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

.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;
}

 

[Shelley]

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

.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;
}

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.

 

[wickedstangs]

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

UPDATE FIXED...

 

[Tize]

Super!

 

[alfaNova]

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) 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.

.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;}

View attachment 49466

Hello Shelly,

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