[XB] Forum Content List Tabs [Paid] 2.0.4 Patch Level 1

Painbaker · Nov 20, 2024

Painbaker submitted a new resource:

[XB] Forum Content List Tabs - Enhance your forum browsing experience with tabbed content lists

Enhance your forum browsing experience with tabbed content lists

Features:
Highly Customizable Content List Tabs
The addon allows you to create tabs with various content types and a bunch of filters and display options. Use a huge number of content filters and display style settings for detailed customisation to meet the needs of your community.

User criteria support
The tabs can be hidden from view with user criteria...

Read more about this resource...

Painbaker · Nov 29, 2024

Painbaker updated [XB] Forum Content List Tabs with a new update entry:

2.0.4

Added automatic tabs contents and counters refreshing

Added option to show all the latest activity for news feed handler

Fix: added missing phrase for rebuild job description

Thanks to @Gemma for sponsoring this update

Read the rest of this update entry...

ichpen · Dec 7, 2024

Hey @Painbaker I posted this on XF as a question / suggestion also:

1. Is there any way we can use tabs (this addon) to replace the what's new tab view? I'm looking to make what's new a bit more dynamic and until what's new tweak is released

by yours truly this maybe a good alternative.

2. Does the content counter show unread items i.e. posts/threads/media etc?

Thanks.

Painbaker · Dec 8, 2024

ichpen said:
1. Is there any way we can use tabs (this addon) to replace the what's new tab view? I'm looking to make what's new a bit more dynamic and until what's new tweak is released by yours truly this maybe a good alternative.

This add-on has a widget that you can use on the "What's new: Overview" position.
You just need to remove the other widgets from there and probably remove the standard tabs by modifying "whats_new" template.

ichpen said:
2. Does the content counter show unread items i.e. posts/threads/media etc?

Currently the counter shows the number of items matching the tab filters. If only unread content is displayed there - the counter will be about unread. I'll take a look if I can add an unread filter just for the counter.

ichpen · Dec 8, 2024

Painbaker said:
This add-on has a widget that you can use on the "What's new: Overview" position.
You just need to remove the other widgets from there and probably remove the standard tabs by modifying "whats_new" template.

Currently the counter shows the number of items matching the tab filters. If only unread content is displayed there - the counter will be about unread. I'll take a look if I can add an unread filter just for the counter.

Yes that would be the alterior aim of this mod in my case. An unread filter would be beneficial. How real time are the updates for the tabs?

Painbaker · Apr 7, 2025

Painbaker updated [XB] Forum Content List Tabs with a new update entry:

2.0.4 Patch Level 1

Fix: setup default permissions on first install
Fix: avoid passing "undefined" as tab auto refresh URL when the tab is not AJAX-loadable

Read the rest of this update entry...

Fatih · Wednesday at 9:14 AM

Good morning @Painbaker

If we select "Use as latest activity," no item shows up in the "News Tab." I think this is not usual, as it should show the Posts, Profile posts, Profile post comments, and Threads. Could you please have a look at this error?

Fatih · Wednesday at 9:31 AM

Additionally, is there any suggested way to change tabs' link structure?

/#forumListTabs-news

I want to have more user-friendly and shorter links. The following can be an option.
/#FLTabs-news

Fatih · Thursday at 11:16 AM

Hello, how can I add gaps between the rows at the News tab?

I have used the followıng code for XenForo default latest activity page.

Code:

/*** Gaps between lines in the Latest Activity list ***/
[data-template="latest_activity"]
{
    .block-container
    {
        background: none;
        border: none;
    }
    
    .block-body
    {
    
        li
        {
            margin-bottom: @xf-paddingMedium;
            background: @xf-contentBg;
            border-radius: @xf-borderRadiusMedium;
        }
    }
}
/*** Gaps between lines in the Latest Activity list ***/

Gemma · Thursday at 7:00 PM

Fatih said:
Hello, how can I add gaps between the rows at the News tab?

This might work for you. You may have to change the colours and the -news to correspond with your Tab ID

CSS:

#forumListTabTarget-news {
    background: @xf-contentBg;
    > li {
        margin-bottom: @xf-paddingMedium;
        background: #fff;
        border-radius: @xf-borderRadiusMedium;
    }
}

[aria-labelledby="forumListTabs-news"] {
    .block-container {
        border: none;
    }
}

I've used similar on my own site for both ForumListTabs and the What's New page. I've also extended it to the Following/Your News Feed sections

Fatih · Thursday at 8:43 PM

Gemma said:
This might work for you. You may have to change the colours and the -news to correspond with your Tab ID

CSS:

#forumListTabTarget-news { background: @xf-contentBg; > li { margin-bottom: @xf-paddingMedium; background: #fff; border-radius: @xf-borderRadiusMedium; } } [aria-labelledby="forumListTabs-news"] { .block-container { border: none; } }

I've used similar on my own site for both ForumListTabs and the What's New page. I've also extended it to the Following/Your News Feed sections

View attachment 2095 View attachment 2094

Thanks Gemma, I will try it. Could you please give me the other codes as well to extend it to other taba?

Fatih · Thursday at 8:55 PM

Gemma said:
This might work for you. You may have to change the colours and the -news to correspond with your Tab ID

CSS:

#forumListTabTarget-news { background: @xf-contentBg; > li { margin-bottom: @xf-paddingMedium; background: #fff; border-radius: @xf-borderRadiusMedium; } } [aria-labelledby="forumListTabs-news"] { .block-container { border: none; } }

I've used similar on my own site for both ForumListTabs and the What's New page. I've also extended it to the Following/Your News Feed sections

View attachment 2095 View attachment 2094

Unfortunately, the code hasn't worked for me.

Gemma · Thursday at 11:02 PM

Fatih said:
Unfortunately, the code hasn't worked for me.

Did you change this part to match your Tab ID?

#forumListTabTarget-news

Fatih · Thursday at 11:23 PM

It just worked with the following code.

Less:

/*** Gaps in news of forum list tabs ***/
#forumListTabTarget-gundem {
    background: #efefef;
    border: none;
    > li {
        margin: @xf-paddingMedium;
        margin-top: @xf-paddingMedium;
        background: linear-gradient(to top, rgba(255,255,255,0.9), rgba(255,255,255,0.9));
        border-radius: @xf-borderRadiusMedium;
    }
}

[aria-labelledby="forumListTabs-gundem"] {
    .block-container {
        border: none;
    }
}
/*** Gaps in news of forum list tabs ***/

Now I am struggling to work in the dark mode. How can the colour change for dark mode?

Gemma · Thursday at 11:35 PM

Fatih said:
Now I am struggling to work in the dark mode. How can the colour change for dark mode?

I can't help you with that, I've never used light & dark variations. I think it is a terrible idea.

It might be something like this (I might have the brackets wrong), changing the bits in bold to match the colours of your alternative mode but you would be better to ask on the xenForo support site for the correct way of doing it.

CSS:

/*** Gaps in news of forum list tabs ***/
#forumListTabTarget-gundem {
    background: #efefef;
    border: none;
        > li {
        margin: @xf-paddingMedium;
        margin-top: @xf-paddingMedium;
        background: linear-gradient(to top, rgba(255,255,255,0.9), rgba(255,255,255,0.9));
        border-radius: @xf-borderRadiusMedium;
    }
        :root[data-variation="alternate"] &
    {
    /*alternate rules (explicit alternate variation -- will not override based on system color scheme)*/
    #forumListTabTarget-gundem {
        background: #efefef;
        border: none;
            > li {
            margin: @xf-paddingMedium;
            margin-top: @xf-paddingMedium;
            background: linear-gradient(to top, rgba(255,255,255,0.9), rgba(255,255,255,0.9));
            border-radius: @xf-borderRadiusMedium;
            }
        }
    }

Fatih · Thursday at 11:50 PM

The following code works perfectly for both, light and dark mode.

Less:

/*** Gaps in news of forum list tabs ***/

/* LIGHT MODE */
#forumListTabTarget-gundem {
    background: rgba(239,239,239,0.9);
    border: none;

    > li {
        margin: @xf-paddingMedium;
        margin-top: @xf-paddingMedium;
        background: linear-gradient(to top, rgba(255,255,255,0.9), rgba(255,255,255,0.9));
        border-radius: @xf-borderRadiusMedium;
    }
}

[aria-labelledby="forumListTabs-gundem"] .block-container {
    border: none;
}

/* DARK MODE */
.m-colorScheme('dark', {
    #forumListTabTarget-gundem {
        background: rgba(34,37,47,0.9);
        border: none;

        > li {
            margin: @xf-paddingMedium;
            margin-top: @xf-paddingMedium;
            background: linear-gradient(to top, rgba(42,46,59,0.9), rgba(42,46,59,0.9));
            border-radius: @xf-borderRadiusMedium;
        }
    }

    [aria-labelledby="forumListTabs-gundem"] .block-container {
        border: none;
    }
});

/*** Gaps in news of forum list tabs ***/

Fatih · Thursday at 11:53 PM

@Gemma Have you add gap for profile posts tab as well?

Gemma · 2025-04-18T00:23:16+0100

Fatih said:
@Gemma Have you add gap for profile posts tab as well?

No, I haven't. You would only need a couple of code changes though.

Change the instances of gundem to match your TabID for profile posts (I think the default is social), then add

CSS:

> article {
        margin: @xf-paddingMedium;
        margin-top: @xf-paddingMedium;
        background: linear-gradient(to top, rgba(255,255,255,0.9), rgba(255,255,255,0.9));
        border-radius: @xf-borderRadiusMedium;
    }

and this

CSS:

> article {
            margin: @xf-paddingMedium;
            margin-top: @xf-paddingMedium;
            background: linear-gradient(to top, rgba(42,46,59,0.9), rgba(42,46,59,0.9));
            border-radius: @xf-borderRadiusMedium;
        }

So, you would have (changing TABID)

CSS:

/*** Gaps in news of forum list tabs ***/

/* LIGHT MODE */
#forumListTabTarget-gundem, #forumListTabTarget-TABID {
    background: rgba(239,239,239,0.9);
    border: none;
    > li {
        margin: @xf-paddingMedium;
        margin-top: @xf-paddingMedium;
        background: linear-gradient(to top, rgba(255,255,255,0.9), rgba(255,255,255,0.9));
        border-radius: @xf-borderRadiusMedium;
    }
   > article {
        margin: @xf-paddingMedium;
        margin-top: @xf-paddingMedium;
        background: linear-gradient(to top, rgba(255,255,255,0.9), rgba(255,255,255,0.9));
        border-radius: @xf-borderRadiusMedium;
    }
}

[aria-labelledby="forumListTabs-gundem"] .block-container, [aria-labelledby="forumListTabs-TABID"] .block-container {
    border: none;
}

/* DARK MODE */
.m-colorScheme('dark', {
    #forumListTabTarget-gundem, #forumListTabTarget-TABID {
        background: rgba(34,37,47,0.9);
        border: none;
        > li {
            margin: @xf-paddingMedium;
            margin-top: @xf-paddingMedium;
            background: linear-gradient(to top, rgba(42,46,59,0.9), rgba(42,46,59,0.9));
            border-radius: @xf-borderRadiusMedium;
        }
        > article {
            margin: @xf-paddingMedium;
            margin-top: @xf-paddingMedium;
            background: linear-gradient(to top, rgba(42,46,59,0.9), rgba(42,46,59,0.9));
            border-radius: @xf-borderRadiusMedium;
        }
    }
   [aria-labelledby="forumListTabs-gundem"] .block-container,  [aria-labelledby="forumListTabs-TABID"] .block-container {
        border: none;
    }
});

/*** Gaps in news of forum list tabs ***/

Fatih · 2025-04-18T16:47:51+0100

Thank you @Gemma

The following code worked for me with slight design errors. This is for those interested this change.

Less:

/*** Gaps in profile posts of forum list tabs ***/

/* LIGHT MODE */
#forumListTabTarget-durumlar {
    background: rgba(239,239,239,0.9);
    border: none;
    > li {
        margin: @xf-paddingMedium;
        margin-top: @xf-paddingMedium;
        background: linear-gradient(to top, rgba(255,255,255,0.9), rgba(255,255,255,0.9));
        border-radius: @xf-borderRadiusMedium;
    }
   > article {
        margin: @xf-paddingMedium;
        margin-top: @xf-paddingMedium;
        background: linear-gradient(to top, rgba(255,255,255,0.9), rgba(255,255,255,0.9));
        border-radius: @xf-borderRadiusMedium;
        border: 1px solid rgba(34,37,47,0.2); /* GÖRÜNÜR BORDER */
    }
}

[aria-labelledby="forumListTabs-durumlar"] .block-container {
    border: rgba(34,37,47,0.9);
}

/* DARK MODE */
.m-colorScheme('dark', {
    #forumListTabTarget-durumlar {
        background: rgba(34,37,47,0.9);
        border: none;
        > li {
            margin: @xf-paddingMedium;
            margin-top: @xf-paddingMedium;
            background: linear-gradient(to top, rgba(42,46,59,0.9), rgba(42,46,59,0.9));
            border-radius: @xf-borderRadiusMedium;
        }
        > article {
            margin: @xf-paddingMedium;
            margin-top: @xf-paddingMedium;
            background: linear-gradient(to top, rgba(42,46,59,0.9), rgba(42,46,59,0.9));
            border-radius: @xf-borderRadiusMedium;
               border: 1px solid rgba(239,239,239,0); /* Açık bir renkli border */
        }
    }
    [aria-labelledby="forumListTabs-durumlar"] .block-container {
        border: none;
    }
});

/*** Gaps in profile posts of forum list tabs ***/

Demo

Çevre Mühendisleri - CMNet

Çevre mühendisleri, öğrencileri ve stajyerlerinin çevre mühendisliğiyle ilgili çeşitli konuların paylaşıldığı ve tartışıldığı sosyal mecra.

www.cevremuhendisleri.net

Search

[XB] Forum Content List Tabs [Paid] 2.0.4 Patch Level 1

Painbaker

Features:

Highly Customizable Content List Tabs

User criteria support

Painbaker

ichpen

Validated license owner

Painbaker

ichpen

Validated license owner

Painbaker

Fatih

Active license owner

Fatih

Active license owner

Fatih

Active license owner

Gemma

Fatih

Active license owner

Fatih

Active license owner

Gemma

Fatih

Active license owner

Gemma

Fatih

Active license owner

Fatih

Active license owner

Gemma

Fatih

Active license owner

Çevre Mühendisleri - CMNet

[XB] Forum Content List Tabs [Paid] 2.0.4 Patch Level 1

Features:​

Highly Customizable Content List Tabs​

User criteria support​

Validated license owner

Validated license owner

Active license owner

Active license owner

Active license owner

Active license owner

Active license owner

Active license owner

Active license owner

Active license owner

Active license owner

Features:

Highly Customizable Content List Tabs

User criteria support