Share your custom CSS?


(DjCyry) #63

I will share my custom css , with many modifications like feverbee . Enjoy !

css_merkador.txt (221.3 KB)


(Mitchell Krog) #64

Very nice @djcyry I will tweak it a bit and see. I looked at GitHub - circleci/discourse-styles: Less styles for https://discuss.circleci.com/ mentioned by @levlaz but can not make sense of how to import that into Discourse. There’s a build folder mentioned but not there, anyone managed to install the CSS from circleci and can give some clearer instructions?


(Chris Beach) #65

Making private message threads look less like regular topics (after several user complaints):

Before

After

.archetype-private_message .d-header {
  background-color: #d6f0d6 
}
.archetype-private_message #topic-title h1 a, 
.archetype-private_message .extra-info-wrapper h1 a,
.archetype-private_message .private-message-map h3,
.user-menu .notifications .fa-envelope-o,
.private-message-glyph {
  color: #306f30 
}
.private-message-glyph {
  font-size: 30px; margin-right: 10px; margin-left: 10px;
}
.archetype-private_message #topic-footer-buttons button.create,
.archetype-private_message #reply-control .btn-primary {
color: white; background-color: #306f30
}
#main-outlet > .private_message #topic { 
  background-color: #f0fff0;
}
.archetype-private_message .private-message-map h3:after {
  content: " (Private)";
} 
.archetype-private_message .topic-post button.create:after,
.archetype-private_message #topic-footer-buttons button.create:after,
.archetype-private_message #reply-control .btn-primary:after {
  content: " Privately";
}
.archetype-private_message #suggested-topics,
.archetype-private_message .topic-map ul:first-child,
.archetype-private_message .topic-map nav.buttons { 
    display: none; 
}

Change Text on a Button (Reply Privately)
Change color of private messages
#66

I see some requests regarding the about page. If you want to customize your about page, there are some tricks already available, here are my example :

I added a background on each part of this page and used a little icon on the titles. It’s light and easy and it adds some style to this page.

I use a dark theme, so for a light one, you just have to change the color on the background-color with anything else.

section.about.admins {
    border-top: 1px solid #5294e2;
    padding: 10px;
    background-color: #3b4252;
    margin-top: 30px;
}
section.about.admins h3::before, section.about.moderators h3::before {
    font-family: "FontAwesome";
    content: "\f0c0";
    margin-right: 8px;
}

section.about.moderators {
    padding: 10px;
    background-color: #434c5e;
}


section.about.stats {
    padding: 10px;
    background-color: #3b4252;
}
section.about.stats h3::before {
    font-family: "FontAwesome";
    content: "\f080";
    margin-right: 8px;
}

section.about.contact {
    padding: 10px;
    background-color: #434c5e;
}
section.about.contact h3::before {
    font-family: "FontAwesome";
    content: "\f003";
    margin-right: 8px;
}

(DjCyry) #67

You have it here :


(DjCyry) #68

I think that style have some bugs , i dont remember .
If you install it and fix it , can you please share it with me ? thanks .


(Mitchell Krog) #69

I used that as a base and customised it quite a bit (not 100% perfect yet though)
see here - Custom CSS for Discourse


(Arpit Jalan) #70

That is neat! This change is now included in core via:

We want to include this change in core as well but not sure which background color/shade to use so that it looks good on all themes (dark/light). I am looking into it.


(Daniel Rangga) #71

Hello Everyone

Can you tell me where i can put css rules ? i can’t find the area for add css rule

Regards


(Barry van Oudtshoorn) #72

You’ll need to:

  1. Click on the hamburger menu
  2. Click on “Admin”
  3. Select “Customize”
  4. Add a new theme
  5. Edit the CSS/HTML
  6. Enable it

You’ll probably also want to edit the theme’s name. :wink:


(Daniel Rangga) #73

Thank you @barryvan, finally.

do you know If we want to call google fonts script and font awesome script inside the head or footer, where is the section to put script ?


(Sam Saffron) split this topic #74

A post was split to a new topic: Add a custom fontawesome icon to your tag


(DjCyry) #75

Anyone from tekinvestor.no for share their css design ? :grin: its awesome .


(Joe) #76

New spinner

Default spinner:

default discourse loading spinner

New spinner:

new loading spinner design

CSS:

.spinner {
    height: 35px;
    width: 35px;
    border: none;
    box-shadow: inset 0 1px 1px #009688 /* change the color to your liking */;
}

How do I change the html and css code of the loader?
#77

As my theme is space related i did want a more spacy spinner.

This is the result:
spinner

$spinner-size: 100px;
.loading-container {
    position: relative;
    .spinner{
        width: $spinner-size;
        height: $spinner-size;
        margin: auto;
        position: absolute;
        left: calc(50% - #{$spinner-size / 2});
        top: $spinner-size;
        color: $tertiary;
        border: none;
        // iam based on vincent theme, with default you dont need this line
        box-shadow: none !important; 
        animation: color-bubble 2s linear 0s infinite;
        &:after, &:before{
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            border-radius: 100%;
            box-shadow: 0 0 0 3px;
            animation: spinner-bubble 1.3s linear 0s infinite;
            margin: auto;
            width: $spinner-size;
            height: $spinner-size;
            opacity: 0;
        }
        &:before{
            animation: spinner-bubble 1.3s linear 2s infinite;
        }
    }
}


@keyframes spinner-bubble{
    from{
        width: 10px;
        height: 10px;
        opacity: .8;
    }
    to{
        width: $spinner-size;
        height: $spinner-size;
        opacity: 0;
    }
}

@keyframes color-bubble{
    0%{color: $primary;}
    33%{color: $secondary;}
    66%{color: $tertiary;}
    100%{color: $quaternary;}
}

How do I change the html and css code of the loader?
(Josh) #78

Useful for new communities without a lot of posts:

/* hide cateogies see https://meta.discourse.org/t/disabling-categories/12350/7 */

span.category-name,a.badge-wrapper.bullet,ol.category-breadcrumb,.topic-list .category.sortable, .topic-list .category, .category-links.clearfix,.select-box .select-box-header,.list-controls .category-breadcrumb .has-drop.box {
    display: none;
}
div.category-input {
    display: none !important;
}

Now I’m trying to show categories for .staff using :not


(Emilio F Castillo) #79

what are the stops needed to take in order to get this set up? where would we paste the code etc…?


(Robert McIntosh) #80

You would paste this into your Admin > Customize > Themes

You need to find your Custom CSS and then decide whether it is for Desktop, Mobile or Both (Common)

(see above)


(Coin-coin le Canapin) #82

Hi,
I wanted to create a custom loader so I made this animation:

I couldn’t figure out how to change the html code from the loader, so I made a gif from the css animation which I loaded into the regular loader css.

You can see it in action here:

I would have prefered a html/css solution but this does the trick.


(Joe) #83

To change the html of the spinner, you’d need to edit the template here

Once you compile the slim in the pen, you can override the template like so:

in the </head> section:

<script type="text/x-handlebars" data-template-name="components/conditional-loading-spinner">
{{#if condition}}
  <div class="loader">
  <div class="saddle"></div>
  <div class="frame">
    <div class="hub"></div>
  </div>
  <div class="wheel">
    <div class="crank left">
      <div class="pedal"></div>
    </div>
    <div class="spokes">
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
      <div class="spoke"></div>
    </div>
    <div class="crank">
      <div class="pedal"></div>
    </div>
  </div>
</div>
{{else}}
  {{yield}}
{{/if}}
</script>

And this in the CSS section:

.loader {
  display: inline-block;
}

.saddle {
  width: 50px;
  height: 15px;
  background-color: black;
  margin-left: 30px;
  position: relative;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 20px;
  transform: rotate(-5deg);
  &:before {
    content: "";
    display: block;
    width: 30px;
    height: 20px;
    background-color: black;
    border-radius: 50%;
    position: absolute;
    left: -5px;
    top: -5px;
  }
  &:after {
    content: "";
    display: block;
    width: 20px;
    height: 10px;
    background-color: black;
    border-radius: 50%;
    position: absolute;
    right: -12px;
    top: 1px;
    transform: rotate(20deg);
  }
}

.frame {
  width: 5px;
  height: 45px;
  background: black;
  margin-left: 51px;
  position: relative;
  z-index: 1;
  margin-bottom: 15px;
  &:before {
    content: "";
    height: 75px;
    width: 7px;
    background: black;
    display: block;
    position: relative;
    top: 100%;
    margin-left: -1px;
  }
}

.hub {
  position: absolute;
  bottom: calc(-100% - 30px);
  left: calc(50% - 0.5px);
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: white;
  border: 3px solid #000;
  z-index: 2;
}

.loader * {
  box-sizing: border-box;
}

.wheel {
  width: 110px;
  height: 110px;
  border: 5px solid #000;
  border-radius: 50%;
  position: relative;
  animation: 2s rotate360 infinite linear;
  &:before {
    content: "";
    width: 100%;
    height: 100%;
    border: 7px dotted #000;
    border-radius: 50%;
    margin-left: -7px;
    margin-top: -7px;
    position: absolute;
  }
  &:after {
    content: "";
    width: 100%;
    height: 100%;
    border: 7px dotted #000;
    border-radius: 50%;
    margin-left: -7px;
    margin-top: -7px;
    position: absolute;
    transform: rotate(7deg);
  }
}

.spoke {
  top: 50%;
  transform: translateY(-50%);
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  &:before {
    left: 0;
    content: "";
    height: 1px;
    width: 50px;
    transform-origin: 20px center;
    background: grey;
    position: absolute;
    transform: rotate(10deg);
  }
  &:after {
    left: 0;
    content: "";
    height: 1px;
    width: 50px;
    transform-origin: 20px center;
    background: grey;
    position: absolute;
    transform: rotate(10deg);
    transform: rotate(-10deg);
  }
  &:nth-child(1) {
    transform: rotate(30deg);
  }
  &:nth-child(2) {
    transform: rotate(60deg);
  }
  &:nth-child(3) {
    transform: rotate(90deg);
  }
  &:nth-child(4) {
    transform: rotate(120deg);
  }
  &:nth-child(5) {
    transform: rotate(150deg);
  }
  &:nth-child(6) {
    transform: rotate(180deg);
  }
  &:nth-child(7) {
    transform: rotate(210deg);
  }
  &:nth-child(8) {
    transform: rotate(240deg);
  }
  &:nth-child(9) {
    transform: rotate(270deg);
  }
  &:nth-child(10) {
    transform: rotate(300deg);
  }
  &:nth-child(11) {
    transform: rotate(330deg);
  }
  &:nth-child(12) {
    transform: rotate(360deg);
  }
}

.crank {
  height: 4px;
  width: 30%;
  background: black;
  transform-origin: left 1px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%);
  .pedal {
    width: 20px;
    height: 6px;
    background: black;
    position: absolute;
    right: -10px;
    margin-top: -1px;
    animation: 2s rotate360pedal infinite linear;
  }
  &.left {
    transform: rotate(180deg);
  }
}

@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate360pedal {
  0% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

I copy / pasted the code, you still need to adjust the CSS a little bit since it looks like this now: