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

CTXMedia

Formerly CyclingTribe
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
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.
 

CTXMedia

Formerly CyclingTribe
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
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)
 

CTXMedia

Formerly CyclingTribe
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?

Rich (BB 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
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?

Rich (BB 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/
 

Andre Daub

Member
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?
 

Brogan

XenForo moderator
Staff member
Probably an incorrect path or uploaded to the wrong location.

Impossible to debug without a link.
 

denisx04

Active member
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.
 

I. C. Daniel

Active member
Hi everyone,

It shows okay code given by @Clickfinity with Internet Explorer but with Chrome don't show as it should.

My forum is http://ypayz.com/ As you can see sub forums are Introductions, Suggestions, Announcements.

I'm waiting your advice to fix these bullets. Thanks in advance.
 

I. C. Daniel

Active member
You need to add

background-repeat: no-repeat;

to your code (before margin-right)
Thank you. I added and does not show anymore, however on top is cutted. How to fix it?
When I un-tick the "overflow: hidden;" via Inspect Element it shows correct.
 

Martok

Well-known member
Thank you. I added and does not show anymore, however on top is cutted. How to fix it?
When I un-tick the "overflow: hidden;" via Inspect Element it shows correct.
I think you'll need to fiddle with the subforum list margins in the added code.
 

I. C. Daniel

Active member
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?
 
Top