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

XF 1.2 How would I add a bullet point to the sub-forum links?

CyclingTribe

Well-known member
#1
I've previously used a template tweak to display sub-forums in rows on the home page (never liked the drop-down method) and they have a bullet point in from of them.

1.2 supports this in the core now so I want to use the built-in option - but on my test site the sub-forum links have no bullet point.

How would I add a bullet point to the 1.2.x sub-forum links please?

Cheers,
Shaun :D
 

Brogan

XenForo moderator
Staff member
#2
I use this:
Code:
.node .subForumList {
margin: -4px 0 1px 46px !important;
}

.node .subForumList li {
margin: 4px 0 8px 0 !important;
}

.subForumList li .nodeTitle:before {
background: @primaryLight url('@imagePath/images/node-icon-gradient.png') repeat-x top;
border: 1px solid @primaryLight;
content: "";
margin-right: 4px;
padding-left: 14px;
}

.subForumList li .unread .nodeTitle:before {
background: @secondaryMedium url('@imagePath/images/node-icon-gradient.png') repeat-x top;
border: 1px solid @secondaryMedium;
content: "";
margin-right: 4px;
padding-left: 14px;
}
You can edit that to suit your needs.
 

CyclingTribe

Well-known member
#4
Just upgraded Entertainmentchat.net to XF 1.2.1 (responsive on) and used a 12px mini-node-sprite icon for read/unread status:

Code:
/* Add 12px mini-node icon to sub-forums */

.node .subForumList {
margin: -4px 0 7px 54px !important;
}

.node .subForumList li {
margin: 2px 0 2px 0 !important;
}

.subForumList li .nodeTitle:before {
background: @sectionMain.background-color url('@imagePath/xenforo/subforum-read.png');
content: "";
margin-right: 4px;
padding-left: 12px;
}

.subForumList li .unread .nodeTitle:before {
background: @sectionMain.background-color url('@imagePath/xenforo/subforum-unread.png');
content: "";
margin-right: 4px;
padding-left: 12px;
}
... and this is how it looks on the home page:

upload_2013-8-27_22-33-33.png
 

Shelley

Well-known member
#5
Just upgraded Entertainmentchat.net to XF 1.2.1 (responsive on) and used a 12px mini-node-sprite icon for read/unread status:

Code:
/* Add 12px mini-node icon to sub-forums */

.node .subForumList {
margin: -4px 0 7px 54px !important;
}

.node .subForumList li {
margin: 2px 0 2px 0 !important;
}

.subForumList li .nodeTitle:before {
background: @sectionMain.background-color url('@imagePath/xenforo/subforum-read.png');
content: "";
margin-right: 4px;
padding-left: 12px;
}

.subForumList li .unread .nodeTitle:before {
background: @sectionMain.background-color url('@imagePath/xenforo/subforum-unread.png');
content: "";
margin-right: 4px;
padding-left: 12px;
}
... and this is how it looks on the home page:

View attachment 55313
That's looking sweet. I know who I'm coming for graphics to give my design brain a rest. :D seriously, nice work with that. (y)
 

CyclingTribe

Well-known member
#8
How do I replace that background png image by some webfont icon?
This is just guess-work, but presumably you would define your custom web icon font family first, then reference it in the CSS and put the letter/number/symbol into the content: "x"; element?

Code:
@font-face
{
font-family: myWebFont;
src: url('/fonts/myfontfile.ttf');
}

.subForumList li .nodeTitle:before {
font-family: myWebFont;
background: @sectionMain.background-color;
content: "<insert symbol here for your icon>";
margin-right: 4px;
padding-left: 12px;
}
Hopefully someone with more CSS experience will be able to correct it if I've got it all wrong ... (y)
 

Andy.N

Well-known member
#9
This is just guess-work, but presumably you would define your custom web icon font family first, then reference it in the CSS and put the letter/number/symbol into the content: "x"; element?

Code:
@font-face
{
font-family: myWebFont;
src: url('/fonts/myfontfile.ttf');
}

.subForumList li .nodeTitle:before {
font-family: myWebFont;
background: @sectionMain.background-color;
content: "<insert symbol here for your icon>";
margin-right: 4px;
padding-left: 12px;
}
Hopefully someone with more CSS experience will be able to correct it if I've got it all wrong ... (y)
Actually, I was referring to this kind of web icons which hopefully is much simplier
http://xenforo.com/community/resources/fontawesome-icons-in-visitor-tab-account-wrapper.1861/
 
#10
What is wrong with this code:

.node .subForumList {
margin: -4px 0 7px 54px !important;
}

.node .subForumList li {
margin: 2px 0 2px 0 !important;
}

.subForumList li .nodeTitle:before {
background: @sectionMain.background-color url('@imagePath/styles/default/xenforo/subforum-read.png');
content: "";
margin-right: 4px;
padding-left: 12px;
}

.subForumList li .unread .nodeTitle:before {
background: @sectionMain.background-color url('@imagePath/styles/default/xenforo/subforum-unread.png');
content: "";
margin-right: 4px;
padding-left: 12px;
}

I have added subforum-read.png and subforum-unread.png to the folder but nothing is showing up?
 

denisx04

Active member
#12
I use this:
Code:
.node .subForumList {
margin: -4px 0 1px 46px !important;
}

.node .subForumList li {
margin: 4px 0 8px 0 !important;
}

.subForumList li .nodeTitle:before {
background: @primaryLight url('@imagePath/images/node-icon-gradient.png') repeat-x top;
border: 1px solid @primaryLight;
content: "";
margin-right: 4px;
padding-left: 14px;
}

.subForumList li .unread .nodeTitle:before {
background: @secondaryMedium url('@imagePath/images/node-icon-gradient.png') repeat-x top;
border: 1px solid @secondaryMedium;
content: "";
margin-right: 4px;
padding-left: 14px;
}
You can edit that to suit your needs.

Brogan I love this, I'm a novice when it comes to html and coding but could you please let me know how I can remove the images completely so that it looks like regular subforums without any images. I tried just getting rid of the image paths but no luck.
 
#18
I'm afraid I'm getting nowhere, I start playing with margins but none of them to make the image look as it should.

An css expert is needed to tweak this. Anyone?