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

CTXMedia

CTXMedia

Well-known member
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
 
Sort by date Sort by votes
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.
 
Upvote 0 Downvote
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.webp
 
Upvote 0 Downvote
Clickfinity said:
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
Click to expand...

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. :thumbsup:
 
Upvote 0 Downvote
Andy.N said:
How do I replace that background png image by some webfont icon?
Click to expand...

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)
 
Upvote 0 Downvote
Clickfinity said:
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)
Click to expand...
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/
 
Upvote 0 Downvote
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?
 
Upvote 0 Downvote
Brogan said:
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.
Click to expand...


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.
 
Upvote 0 Downvote
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?
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

dtrumbower
  • Question Question
XF 2.2 How would I add an image in the Forum Description?
Replies
6
Views
631
dtrumbower
dtrumbower
Back
Top Bottom