Material Design Stock Theme

theme-full

(Uncle) #247

Many thanks. I found more areas where I could apply border-radius and now my site looks cool. see https://putput.in

(As of this moment, its giving me a 500 error after a plugin install. Site is up though)


(Bhanu Sharma) #248

Can You share Your custom CSS? it really looks nifty!


(Uncle) #249
@import url(https://fonts.googleapis.com/css?family=Nunito);
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

body input, body button, body select, body textarea {
    font-family: "Nunito", "Open Sans", sans-serif; }

html {
  font-family: "Nunito","Open Sans", sans-serif;
  font-weight: 400;
          line-height: 1.75;
          font-size: 15px;
 }
.topic-list {
    margin: 0 0 10px;
    border-radius: 8px;
}

.list-controls .category-breadcrumb li.bullet>.dropdown-header {
    background: #e9e9e9;
    color: #222;
    border-radius: 3px;
}

.menu-panel {
    border: 1px solid #e9e9e9;
    box-shadow: 0 2px 2px rgba(0,0,0,0.25);
    background-color: #fff;
    z-index: 1100;
    padding: 0.5em;
    width: 300px;
    border-radius: 5px;
}

.d-header-icons .icon {
    position: relative;
    display: block;
    padding: 3px;
    color: #999;
    text-decoration: none;
    cursor: pointer;
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    transition: all linear .15s;
    border-radius: 2px;
}

.badge-wrapper.bullet .badge-category-parent-bg, .badge-wrapper.bullet .badge-category-bg {
    width: 10px;
    height: 10px;
    margin-right: 5px;
    display: inline-block;
    line-height: 1;
    border-radius: 9px;
}

.modal-inner-container {
    max-width: 710px;
    margin: 0 auto;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 7px;
}

.bootbox.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1050;
    overflow: auto;
    width: 610px;
    height: auto;
    margin: -250px 0 0 -305px;
    background-color: #fff;
    border: 1px solid #e9e9e9;
    box-shadow: 0 3px 7px rgba(0,0,0,0.8);
    background-clip: padding-box;
    border-radius: 6px;
}

.user-main .about {
    background-position: center center;
    background-size: cover;
    border-radius: 5px;
}

.user-preferences .bio-composer {
    padding: 10px;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
}

.d-editor-textarea-wrapper {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    position: relative;
    border-radius: 4px;
}

.uploaded-image-preview {
    width: 400px;
    max-height: 150px;
    margin-bottom: 10px;
    border-radius: 4px;
}

div.ac-wrap {
    overflow: auto;
    max-height: 150px;
    background-color: #fff;
    border: 1px solid #e9e9e9;
    padding: 5px 4px 1px 4px;
    border-radius: 5px;
}

.select-box-kit.multi-select, .select-kit.multi-select {
    width: 300px;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 5px;
}

.large-notification {
    display: flex;
    align-items: center;
    border-radius: 5px;
}

.user-invite-controls {
    background-color: #e9e9e9;
    padding: 5px 10px 0px 0;
    height: 35px;
    border-radius: 4px;
}

.nav-pills>li.active>a, .nav-pills>li>a.active {
    color: #222;
    font-weight: 500;
    background-color: #fff;
    border-bottom: 3px solid #e45735;
    border-radius: 4px;
}

.alert.alert-info {
    background-color: #fbe6e1;
    color: #222;
    border-radius: 3px;
}

.admin-controls {
    background-color: #e9e9e9;
    padding: 10px 10px 3px 0;
    border-radius: 3px;
}

.alert.alert-info {

    border-radius: 6px;
}

aside.quote .title {
    
    border-radius: 3px;
}

button, select {
    text-transform: none;
    border-radius: 6px;
}

(Vincent) #250

Nunito looks great. Thanks for sharing.


(Coin-coin le Canapin) #251

Great theme. How can I change the reddish background color of highlighted posts (with the fadeout)?


(Daniela) #252

Hi @hanks, the code you are looking for is this one:

@keyframes background-fade-highlight {
  0% {
    background-color: $tertiary-low;
  }
  100% {
background-color: transparent; 
}
}

You need to change the tertiary color of your color scheme or change the code above in a custom stylesheet, e.g.:

@keyframes background-fade-highlight {
  0% {
    background-color: blue;
  }
  100% {
background-color: transparent;
}
}

Obviously do not use a full color (blue) like I did in the above code, but rather use a hexadecimal color that is not too intrusive, e.g. #a1b9ff (light blue)

EDIT : I had a doubt … you’re referring to the background of posts that appears when you open a topic, right?


Discourse Vincent theme
#253

Hello.

Can you retouch these pages? I’ll show you a nice example.

Summary


Thank you! :grinning:


(Daniela) #254

Hi Claus, you can do it locally, or even better you can do a PR on Github so that changes to static pages can be integrated globally into the theme.


#255

Hello Daniela.

Unfortunately, it is not my domain and I don’t know how to change, but I can give a helping hand through ideas. I used Discourse Vincent theme, and I liked what the page looked like, is more elegant.

Maybe someone can help to retouch the pages as in the picture above. It will be nice. :grinning:

Sorry for my bad english.


#256

This Theme seems to differ in the way it handles images on at least mobile, and I believe it’s handling it less well than the default theme:

(Great theme though!)


(François Douville) #257

Love the + button to create new topic. I used this code :

//New Topic Fab
#create-topic.btn-default {
  border-radius: 40px;
  position: fixed;
  bottom: 30px;
  right: 50px;
  z-index: 999;
  padding: 24px 20px 22px 5px;
  background-color: $tertiary;
  color: $tertiary;
  white-space: nowrap;
  text-indent: 10px;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  width: 63px;
  height: 63px;
  -webkit-transition: right .5s, bottom .5s, border-radius .5s, text-indent .2s, visibility 1s, width .2s ease, height .5s ease .4s, color .5s, background-color 2s, -webkit-transform .5s;
  transition: right .5s, bottom .5s, border-radius .5s, text-indent .2s, visibility 1s, width .2s ease, height .5s ease .4s, color .5s, background-color 2s, transform .5s;
}

#create-topic.btn-default .fa-plus {
  color: white;
}

#create-topic.btn-default:hover {
  text-indent: 8px;
  width: 190px;
  color: white;
}

In Chrome, it’s perfect. But in Safari, there is a bug :

bug

How to fix this?

Thanks


(Mindaugas Bartusevičius) #258


can you mande as defoult template ?
like this…
image


#262

looking through the theme’s CSS…

is there a reason for using:
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(0, 0, 0, 0.12);
or
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0), 0 2px 10px 0 rgba(0, 0, 0, 0);

instead of:
box-shadow: none;


#263

Does anybody know how to fix the clipped shadow on the orange button in the User Summary page?
it’s clipped on the right, unless a Profile Background is used.

without Profile Background:

20%20PM

with Profile Background:


(Kris) #264

Hmm looks like those buttons are overflowing a little more than they should be even in our default theme. I’ll fix that, but you might need to add some space to avoid clipping the shadow anyway (because we don’t have a shadow by default).

You could just add a little padding

.user-main .about .controls {
    padding-right: 10px; 
}

#265

thanks @awesomerobot. Actually, the top is slightly clipped as well.

//fix user preferences button position
.user-main .about .controls {
    padding-right: 15px;
    padding-top: 6px;
}

Can you advise on my previous post regarding CSS for shadows?
All those examples equal to hiding any shadows, so is this notation intentional or just a remainder of a CSS generator that you used?


(Kris) #266

I have no idea of the intention there. @rewphus built this theme, so they’d know better than I would.


#267

Pretty sure I just never got around to cleaning it up. @Johani is helping me manage this theme now, so once he has time to confirm we can address it.


(Joe) #268

@rewphus is correct :sunflower:

I’ll be helping out with the theme. I just had a couple of things I needed to arrange.

I’ve dedicated some time to look at all issues that have been raised here. I will update this theme some time before the end of next week. :ok_hand:


#269

this CSS doesn’t make the editor buttons flat:

//flatten editor buttons
.d-editor-button-bar .btn {
  border-radius: 0px;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0), 0 2px 10px 0 rgba(0, 0, 0, 0);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0), 0 2px 10px 0 rgba(0, 0, 0, 0);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0), 0 2px 10px 0 rgba(0, 0, 0, 0);
}

the selector needs to be more specific. I suggest changing to:

@mixin no-shadow() {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

//flatten editor buttons
.d-editor-button-bar button.btn.btn-icon {
  @include no-shadow();
}