Persona Theme - Subcategory view on main page



  • Hi,

    I have two things to ask...

    • is there any setting or CSS suggestions to make these subcategories (red box below) look tidier? such as more tidy look with two sub-categories in one raw...

    alt text

    or maybe something similar to opera forum https://forums.opera.com/
    Also, it would be great to decide which subcategories should look on main page (because some are rarely visited, it worths not to add them on main page for the sake of simplicity)

    • Additionally, previously on home page, at the last messages viewed on the right side, mentioned users were clickable with blue color. Is it possible to activate that again? Or is it something frowned upon for technical reasons?

    Thanks a lot.



  • I've done some work playing around with this because it's too chaotic, in fact visually it's bad, very bad but I digress - I found it tricky to achieve but I got it to a point that it was workable, almost to my spec of 3 column, I managed 2 column that appear to be stable enough in an responsive context.

    For example:

    sub-categories.png

    This is the CSS I used to achieve the above result 2 column layout:

    .category-children .pull-left {
        column-width: 15em;
    }
    

    I'd like to post the entire custom CSS as I'd like to make it a theme for everyone but I'm not at a theme dev and upload to GitHub level yet, so if anyone would like to help me out, please message me. 🙂

    I may post entire CSS set sometime, to catch any tips for tidy up - it would be nice to see it reviewed by the pro-pros 😉



  • @omega Thanks, somehow your code was always flexing the icon only... But I managed to get two column view with this CSS addition on persona theme: (on 1.12.2)

    .category-children .category-children-item {
        float: left ;
        width: 20em ;
    }
    
    

    Thanks a lot, I got the em idea from you 🙂 until then I was unsuccessfully trying with %

    here is how it looks:
    alt text



  • @crazycells said in Persona Theme - Subcategory view on main page:

    @omega Thanks, somehow your code was always flexing the icon only... But I managed to get two column view with this CSS addition on persona theme: (on 1.12.2)

    .category-children .category-children-item {
        float: left ;
        width: 20em ;
    }
    
    

    Thanks a lot, I got the em idea from you 🙂 until then I was unsuccessfully trying with %

    here is how it looks:
    alt text

    That looks great and cool to see if a heavily sub-category setup!

    I picked up the em from somewhere leek overstock not specifically relating ot node. I can't remember exactly but it was the thing that worked.

    I'll try your variation to see how it works. Maybe more stable.

    I'd be very happy to see this adopted by community nodeBB hey @julian? Well, hmm hmm??? 🙂

    Further note: I would like to pin down a stable 3 column option too - maybe less used but still applicable ot some deployments and case uses.

    I couldn't pull it off, very strange thing were happing with the icons, not just the positioning stability. I didn't spend any more time once I got 2 columns, it was the HUGE improvement I was looking for.



  • @omega this was working when I hide last post in each category but it failed when I turn it on. I tried little bit, but could not do it... I will work on it more when I have time, if I figure out a way to make them in better look I will post it here...

    I tried with different size of screen, but it did not work; here is the code I was using in case someone wants to fix or add more on top

    @media (min-width: 480px) {
    .category>ul>li .category-children .category-children-item  {
        width: 45%;
        margin-right: 5%;
    }}
    
    @media (min-width: 992px) {
    .category-children .category-children-item {
        width: 30%;
        margin-right: 3%;
    }}
    

    Here are some website examples:

    I think this makes everything in one column... it still looks ok, but in our case since the titles are short in blue category, two column works better for that.

    .categories .category-children {
        display: flex;
        flex-direction: column;
    }
    

    ( @julian @baris )
    I am not sure if it is going against your ideas but I think this can be added in the future so we can make one column or two column orders for sub-categories, if possible... It does not look good if we have a lot of sub-categories...

    Additionally, it would be cool to reveal only some of the sub-categories on the homepage. Because adding everything makes it look complicated but we like the simple appearance of nodebb. Also some sub-categories are more important and heavily used than others, we could use that option for sure.


  • GNU/Linux Admin

    From a design point of view it makes sense to have the subcategories aligned in columns instead of inline like they are now.

    Would be a project that is up to @psychobunny to take on 😄



  • @julian said in Persona Theme - Subcategory view on main page:

    From a design point of view it makes sense to have the subcategories aligned in columns instead of inline like they are now.

    Would be a project that is up to @psychobunny to take on 😄

    Hey! @psychobunny 🕵


Log in to reply
 

Suggested Topics

| |