What's new
[XB] Content Feeds

[XB] Content Feeds [Paid] 2.1.0 Patch Level 5

You must log in or register to purchase ($15.00)
Overview Updates (17) History Discussion
P

Painbaker

Administrator
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...
Click to expand...

Read more about this resource...
 
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.
 
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.
Click to expand...
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?
Click to expand...
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.
 
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.
Click to expand...

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

1744791010605.png
 
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
 
Hello, how can I add gaps between the rows at the News tab?

1744884831634.png

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 ***/

1744884727763.png
 
Fatih said:
Hello, how can I add gaps between the rows at the News tab?
Click to expand...
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

flt_latest.png flt_following.png
 
Last edited:
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
Click to expand...
Thanks Gemma, I will try it. Could you please give me the other codes as well to extend it to other taba?
 
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
Click to expand...
Unfortunately, the code hasn't worked for me.
 
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?
 
Fatih said:
Now I am struggling to work in the dark mode. How can the colour change for dark mode?
Click to expand...
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;
            }
        }
    }
 
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 ***/

1744930211294.png

1744930235728.png
 
Fatih said:
@Gemma Have you add gap for profile posts tab as well?
Click to expand...
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 ***/
 
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
www.cevremuhendisleri.net

Ç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 www.cevremuhendisleri.net
 
@Painbaker

I want to propose some changes to this add-on. Would you mind evolving it into a Feed add-on? There are pretty similarities so I think it is woth to evolve it.

I can sponsor for this changes if it is acceptable. I will message you in my first opportunity.
 
@Painbaker, would it be possible to add filtering options to the Latest Activity/News Feed tab?

Something like my naff mock-up, I think it would be one more positive step towards better content delivery (along with a true real-time feed).

Obviously, will fund this.
 

Attachments

  • latest_activity.png
    169.7 KB · Views: 14
Last edited:
Fatih said:
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?
Click to expand...
Can I see your tab settings? Maybe you have enabled some filters that exclude everything.

Fatih said:
I want to propose some changes to this add-on. Would you mind evolving it into a Feed add-on? There are pretty similarities so I think it is woth to evolve it.
Click to expand...
If you mean infinite scroll feeds - this add-on was not designed to have such a thing. This addon was intended to be a page element/widget with other content below it.

Gemma said:
@Painbaker, would it be possible to add filtering options to the Latest Activity/News Feed tab?

Something like my naff mock-up, I think it would be one more positive step towards better content delivery (along with a true real-time feed).

Obviously, will fund this.
Click to expand...
Yes, but not all of the filters from your example.


There are many different types of content in the news feed and the “Unread content” and "Watched content" filter cannot be implemented here, as XF does not have any standard or Finder interface for filtering on Unread/Watched content.

Also there is no parent container standard for NewsFeed items to somehow play around with manual filtering with items that have deeply nested entity relations for parent container Unread/Watched entity.

But we can make checkboxes for each supported content type and you will have:

Unread threads
Unread resources
Watched forums
Watched threads

But again, there is no standard, and the supported content will be limited.
 
Painbaker said:
Yes, but not all of the filters from your example.
Click to expand...
Yes, that was using some options available in the Themehouse Feeds addon.

So, could we filter by thread types?

content_types.png

There are options for admin to select what is available in the feed. Could this be an end-user option?

content.png
 
Hi,
We've talked before about how XenForo users are increasingly looking for ways to see more of what's happening, more easily. While XenForo's traditional forum structure works great for organized discussions, it sometimes struggles to keep up with what people expect from online experiences today.

Think about it: we're all used to getting information in bite-sized, personalized feeds. People have shorter attention spans, and they want to quickly find the content that matters most to them. A good feed feature could really help with this by:
  • Making sure the best stuff doesn't get lost.
  • Giving the forum a more 'live' feel, so people see new activity and updates as they happen.
  • Helping users discover interesting things they might otherwise miss.
  • Bringing XenForo more in line with the kind of experience people expect from modern platforms.
The bottom line is that relying just on chronological lists and static layouts isn't always the best way to keep people engaged these days. A well-designed feed, perhaps with some smart features to show the most relevant content, could make a big difference in how active and vibrant XenForo communities are.

I truly believe that developing a comprehensive Feed addon would be a huge improvement for XenForo. It would address a real need from users and make the whole experience feel much more modern and engaging. You might be renaming it as [XB] Social Feed as well.

Thanks for considering this! I'm really excited about the possibilities here.

Menu, view and filter options. There will be 4 menu options as List, and 3 different designs. Allowing admins to design their menu can be advantageous. The menu choice will be selected by the Admin. Addon will support the items in the List menu (we can remove some items with similar functionality).
Slide1.JPG
Slide2.JPG


Card view, all action buttons such as like, share, reply and follow will be active in this view.
Slide3.JPG

Comfortable, all action buttons such as like, share, reply and follow will be active in this view.
Slide4.JPG

Compact
Slide5.JPG
 
If this idea is being considered, I hope it is in the form of a new addon.

I don't really like the idea of replying to content via the feed as it is almost impossible to know the whole context of the thread and previous posts in the discussion.
 
Gemma said:
If this idea is being considered, I hope it is in the form of a new addon.

I don't really like the idea of replying to content via the feed as it is almost impossible to know the whole context of the thread and previous posts in the discussion.
Click to expand...
It will not reply directly. If someone presses Reply, it will open the thread.
 
Fatih said:
Hi,
We've talked before about how XenForo users are increasingly looking for ways to see more of what's happening, more easily. While XenForo's traditional forum structure works great for organized discussions, it sometimes struggles to keep up with what people expect from online experiences today.

Think about it: we're all used to getting information in bite-sized, personalized feeds. People have shorter attention spans, and they want to quickly find the content that matters most to them. A good feed feature could really help with this by:
  • Making sure the best stuff doesn't get lost.
  • Giving the forum a more 'live' feel, so people see new activity and updates as they happen.
  • Helping users discover interesting things they might otherwise miss.
  • Bringing XenForo more in line with the kind of experience people expect from modern platforms.
The bottom line is that relying just on chronological lists and static layouts isn't always the best way to keep people engaged these days. A well-designed feed, perhaps with some smart features to show the most relevant content, could make a big difference in how active and vibrant XenForo communities are.

I truly believe that developing a comprehensive Feed addon would be a huge improvement for XenForo. It would address a real need from users and make the whole experience feel much more modern and engaging. You might be renaming it as [XB] Social Feed as well.

Thanks for considering this! I'm really excited about the possibilities here.

Menu, view and filter options. There will be 4 menu options as List, and 3 different designs. Allowing admins to design their menu can be advantageous. The menu choice will be selected by the Admin. Addon will support the items in the List menu (we can remove some items with similar functionality).
View attachment 2338
View attachment 2339


Card view, all action buttons such as like, share, reply and follow will be active in this view.
View attachment 2340

Comfortable, all action buttons such as like, share, reply and follow will be active in this view.
View attachment 2341

Compact
View attachment 2342
Click to expand...
@Painbaker Could you please consider this request? I would appreciate it if you let us know if you are not keen to implement.
 
You must log in or register to reply here.
Back
Top