Sam's personal "minimal" topic list design

theme-full

(Jacob Chapel) #182

After looking at it a while, it did always feel off.

Thinking of adding the table header back, as that adds some visual continuity from top down.


#183

That becomes nice now as well. :+1: One suggestion: I think the avatars need a little bit more margin on the right.


(Jacob Chapel) #184

Still playing around with it. I think the last post is good, and adding the header I feel grounds the columns better.

Still torn on the color bar and/or the category column.

Honestly the default meta category bar, or even the square just don’t look great to me. Not sure what to do otherwise though.


(Ronteras) #185

Personally I like this version the most. But it’s just me.


(Anton) #186

So, after all, how do I apply the theme - i.e. where is the final version maintained?


(Jacob Chapel) #187

I will post my latest style later today. I’ll put it in a Github gist so that it is easier to track, that and it will have better versioning.


(Jacob Chapel) #188

Here it is:


(Anton) #189

Thanks, and what about Sam’s original theme? Where is the latest version held?

UPD. Tried to apply CSS and SCRIPT from the very first post of this topic, but the topics list and the categories page seem broken:



(Jacob Chapel) #190

So I had to fix those in mine before it diverged.

You can remove the colspan from main-link.

<td class='main-link clearfix' colspan="{{titleColSpan}}">

into

<td class='main-link clearfix'>

For category page, if you notice in mine, I surrounded all topic list styles with .topic-list:not(.categories) to make sure it didn’t affect the category page.


(Sam Saffron) #191

heads up, we just made some structure changes to categories, @chapel your theme may need some adjustments as is mine


(Jacob Chapel) #192

Do you have commits or details on what has changed?


(Sam Saffron) #193

https://github.com/discourse/discourse/commit/2ee201b67f6f606b4e4936233859401e878d1e56


(Michael Downey) #194

@awesomerobot changing the header category color from $header-primary color to $primary made our categories invisible. :frowning: had to put this back manually in customizations for now:

header .title-wrapper .bar .badge-category { color: $header-primary !important; }

(Sam Saffron) #195

Quick update, we rolled this back and @awesomerobot will be revisiting it soon.


(Kris) #196

ah, yes! I forgot that the header has its own primary/secondary variables :dizzy_face:

https://github.com/discourse/discourse/pull/3256


(Kris) #197

I made some more changes and resubmitted the whole thing, some customizations using the box style of category will have to edit a few lines of CSS, but the structure/organization of category styles is much better.


(David García-Navas) #198

Thanks to @chapel for sharing his customizations :sunny:

Is there a way to isolate the code that make the category bars coloured?

The css part would be something like this:

$color1: #30A92A;
$category-opacity: 0.3;

.category-bar {
    margin: 0 !important;
    padding: 0 !important;
    width: 2px;
    
    .category-meta & {
        background-color: rgba($color1, $category-opacity);
    }
}

…but i tried different combinations on the header part and i can’t get this to work…


(Jacob Chapel) #199

Not sure what you mean?


(Sam Saffron) #201

I just updated my theme to allow for the structure changes made when we added the bullet category style, it also made CSS smaller.


(Jacob Chapel) #202

Cool. I’ll take a look and see if any of it will fit with my work.

I had already done quite a bit of changes, so I’m thinking we need to figure out the future of custom themes and how they can be consumed/managed.

How much interest is there in supporting something in core for this, including a way to keep them up to date? It could work as a plugin now that most of the plugin hooks exist to create it.