XF 2.2 How to remove forum description from a single forum?

[Luke247]

On the main page where I list the forums, I have the forum descriptions "inline". However, I want to remove the forum description from a single forum only on the main page that lists all the forums. How can I do this?

 

[Kruzya]

Via extra.less, for example:

.node.node--id13 .node-description {
    display: none;
}

Where 13 - your node id.

Before:


After:

 

[Luke247]

Thanks for taking the time to help me with this. I really appreciate it.

 

[Luke247]

Via extra.less, for example:

.node.node--id13 .node-description {
    display: none;
}

Where 13 - your node id.

Before:
View attachment 257682

After:
View attachment 257683

This only works in desktop. Please, how can I make it work in mobile too?

 

[bzcomputers]

This only works in desktop. Please, how can I make it work in mobile too?

The node description is targeted differently by default for different sized screens within XenForo. Currently you are missing device sizes smaller than 650px wide.

To apply the new css to all device sizes just surround the css with a media query...

@media (min-width: 1px) {
    .node.node--id13 .node-description {
        display: none;
    }
}

This is basically saying apply this css to all device sizes greater than 1px wide. Writing it this way will cover you in case XenForo in the future decides to target additional devices sizes.

 

[Luke247]

The node description is targeted differently by default for different sized screens within XenForo. Currently you are missing device sizes smaller than 650px wide.

To apply the new css to all device sizes just surround the css with a media query...

@media (min-width: 1px) {
    .node.node--id13 .node-description {
        display: none;
    }
}

This is basically saying apply this css to all device sizes greater than 1px wide. Writing it this way will cover you in case XenForo in the future decides to target additional devices sizes.

Thank you for your help with this. Is there a way to do this for multiple forums without have to write the entire code for each forum?

For example, rather than this:

@media (min-width: 1px) {
    .node.node--id13 .node-description {
        display: none;
    }
}
@media (min-width: 1px) {
    .node.node--id45 .node-description {
        display: none;
    }
}
@media (min-width: 1px) {
    .node.node--id75 .node-description {
        display: none;
    }
}

Can I combine the node id numbers somehow to make it shorter?

 

[Paul B]

@media (min-width: 1px) {
    .node.node--id13 .node-description,
    .node.node--id45 .node-description,
    .node.node--id75 .node-description
    {
        display: none;
    }
}

 

[Luke247]

The node description is targeted differently by default for different sized screens within XenForo. Currently you are missing device sizes smaller than 650px wide.

To apply the new css to all device sizes just surround the css with a media query...

@media (min-width: 1px) {
    .node.node--id13 .node-description {
        display: none;
    }
}

This is basically saying apply this css to all device sizes greater than 1px wide. Writing it this way will cover you in case XenForo in the future decides to target additional devices sizes.

I just tried this code and it still displays in mobile... is there something else that might work?

 

[bzcomputers]

I just tried this code and it still displays in mobile... is there something else that might work?

Just looked a the code and for some reason XenForo is using an "!important" property on the node description css for mobile. The way to override this is just to add the "!important" property to your new css.

@media (min-width: 1px) {
    .node.node--id13 .node-description {
        display: none !important;
    }
}

I did a quick check and it doesn't appear to cause any issues with the page layout.