XF 2.2 How can I change format of forum titles only in forum list on main page?

gogo

Well-known member
For example, I would like to make these titles a bit larger and always keep bold even if it's marked read.

And it only applies on the forum titles in forum main page.

How do I do it? Thanks.

1599625198848.webp
 
Solution
In that case you will need to make the selector more specific.

You can do that using the page template, like so:
CSS:
[data-template="forum_list"]
.node-title
{
    font-size: 20px;
    font-weight: 700;
}
Add this to the extra.less template:
CSS:
.node-title
{
    font-size: 20px;
    font-weight: 700;
}

Adjust to suit.

But this also make changes to the forum titles (sub-forums) in inner pages, not as I wanted it only applies to forum titles on main page only.
 
In that case you will need to make the selector more specific.

You can do that using the page template, like so:
CSS:
[data-template="forum_list"]
.node-title
{
    font-size: 20px;
    font-weight: 700;
}

Oh the data-template tag! I got something like that in my extra.less actually. Why didn't I think of that. Thank you so much!
 
In that case you will need to make the selector more specific.

You can do that using the page template, like so:
CSS:
[data-template="forum_list"]
.node-title
{
    font-size: 20px;
    font-weight: 700;
}
Just tried. This actually doesn't work. The sub-forum titles on the parent forum page still follow the same format as defined in the code.
 
You're right. I just tried it in another version of my test server that works fine.

I'll take a look at the extra.less tomorrow when I'm around with my PC. Thanks.
 
In that case you will need to make the selector more specific.

You can do that using the page template, like so:
CSS:
[data-template="forum_list"]
.node-title
{
    font-size: 20px;
    font-weight: 700;
}

Thank you Brogan!

I need the code to disable the subforums from the forum list. And it works.
But on my mobile phone in portrait format, the subforums are always visible.

Here is my code:

[data-template="forum_list"]
.node-subNodesFlat
{
display: none;
}
 
My phone is android.

I tested it with a new server.

This is the only code I have in extra.less:

1600268845714.png

sub-forum test.gif


With the code deleted:

sub-forum test no code.gif

The default setting shouldn't have sub-forums shown in mobile view? Maybe you got some other codes that deliberately showed it?
 
Yes, but as written it depends on the display size or resolution. In landscape view on the phone ist the display wider and it works.

The code must be extended so that it also applies to the mobile style.
 
Top Bottom