Material Design Stock Theme

theme-full
#270

I also found this CSS that doesn’t seem to be adding shadows to anything.

//Shadows for categories
.topic-list.categories>tbody>tr td.category,
.topic-list.categories>tbody>tr td.stats,
.topic-list.categories>tbody>tr td.latest {
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(0, 0, 0, 0.12);
}
1 Like
(Denis Heraud) #271

I have to say the new reply button seems a little out of place, and to a new forum user it’s not immediately apparent that it’s a reply button. If you’re going to leave it as is (though I think it should match the theme more closely as it’s definitely not “material design” material), it should at least be centre aligned with the Tracking button.

5 Likes
(Denis Heraud) #272

I wanted to shade the header for the Categories list and the Latest posts lists. For the latter, the following worked just fine (see screenshot):

.table-heading { background-color: #F5F5F5; }

However, for the categories one, there is no class assigned to that row (see screenshot), so how would I go about targeting it with CSS?

1 Like
#273

this should work:
table.category-list thead .category { background-color: #F5F5F5; }

2 Likes
(Denis Heraud) #274

Yes thank you!

Although in order to have the whole row shaded (including the “Topics” portion), I also added:

table.category-list thead .topics {
  background-color: #F5F5F5;
}

Thanks for showing me the right class!

1 Like
(Denis Heraud) #275

@BlackKnob What about the Top posts header? I’ve been trying a few things but can’t seem to hit the right one. I figured it has something to do with:

table.topic-list thead

#276

try

table.topic-list thead tr {background-color: #F5F5F5; }

or

table.topic-list thead tr th {background-color: #F5F5F5; }

2 Likes
(Denis Heraud) #277

Already tried both… no dice…

#278

are you sure? both work on my end.

1 Like
(Denis Heraud) #279

Weird! Just tried and it worked, maybe I made a typo yesterday. Thanks again!

1 Like
(Denis Heraud) #280

Just to share the code I came up with, which IMHO improves on the theme (I use this as a theme component):

//CHANGE TABLE HEADING COLOR - MATERIAL THEME
.table-heading {background-color: #F5F5F5 !important;}
table.category-list thead .category {background-color: #F5F5F5 !important;}
table.category-list thead .topics {background-color: #F5F5F5 !important;}
table.topic-list thead tr {background-color: #F5F5F5 !important;}
table.topic-list thead tr th {background-color: #F5F5F5 !important;}

//CHANGE BUTTON COLOR TO MATCH - MATERIAL THEME
.category-drop-header {background-color: #F5F5F5 !important;}
.category-drop-header.select-kit-header.btn {background-color: #F5F5F5 !important;}
1 Like
(Joe) #281

There’s a new version of the theme, please update.

Here’s a few things that were fixed:

This should not happen any more. Images will display at full width now.


Due to the large number of people that have this theme installed, I cannot make any drastic design changes. However, I’m very happy to assist with the CSS if you have samples / mockups

For now If you just want to restore the default button try something like this:

.widget-button.btn.create {
  color: #222; // change color
  background: #e9e9e9; // change background
  position: static;
  border-radius: 0;
  height: auto;
  width: auto;

  &:hover {
    background: #919191; // hover background
    color: #fff; // hover color
  }

 .fa-reply {
    color: inherit;
    font-size: inherit;
  }
}

I also fixed the z-index values in the theme. So the button now goes under the watch-status popup


I did a bit of cleaning up for box-shadow properties.


I added @awesomerobot’s fix to stop this from happening

but I am not able to see any cropping on the top side, is this still the case @BlackKnob?


Editor buttons now have no shadow:


I went through the CSS, while I did not add anything visually, I removed a few rules that were rendered obsolete (ongoing) by the quick nature of how things change in Discourse.


Is this still an issue @Francois_Douville? Please let me know.


Finally, if you’re using this theme, please take a second and let me know what branch of Discourse you use.

  • Stable branch
  • Beta branch

0 voters


Thank you for all the feedback.

9 Likes
(François Douville) #282

Yes I test it on Chrome, it’s fine but with Safari, it still a bug.

1 Like
(Denis Heraud) #283

Thank you for your hard work!

1 Like
#284

Tested and confirmed.

Very much appreciated, thank you Joe!

1 Like
#285

I don’t see any cropping. Thanks for revising the theme @Johani.
The CSS is much easier to follow as well :smile:

3 Likes
(François Douville) #286

Thanks @Johani

To see replies to an answer, I like that the answer is IN the post

But in this view, it is OUT the post, could it be like the one above?

3 Likes
(Marco) #287

Dear all,
I´m currently testing a new discourse installation for my community and I think this theme is fantastic. Therefore first and foremost, kudos to the author(s).

Here is my question: I´d like to offer my users the choice between one of the several colours available in the theme, so that they by themselves can pick their preferred combo.

At the moment, it seems to me impossible for a user to set the colour combo in the profile´s preferences. One can choose a theme (if more than one is installed and enabled), but not a color combo once Material Design Stock is selected (the colour combo selection is up to the Admins, basically).

Am I missing something?

#288

I had the same problem. Here’s my solution (which works well enough): How to use theme color scheme

3 Likes
(Marco) #289

Many thanks!
This is a great solution/workariund that I just tried, and did the trick.