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

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

No permission to download

Shelley

Well-known member
#1
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...
 
#5
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!
 

Shelley

Well-known member
#6
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!
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
 
#9
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)
 

Shelley

Well-known member
#10
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
 

Attachments

#13
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:

Shelley

Well-known member
#14
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;
}
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)
 
#17
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;}
View attachment 49466
Hello Shelly,

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

subforum-enhanced.png