Change "+ New Topic" button to match styling of "Reply" button

Support
1

I like the styling of the “Reply” button, which is the “Tertiary” color as defined in /admin/customize/colors (Color Palettes/selection)

image
image694×920 133 KB

I would like to have our “New Topic” button match the styling of the “Reply” button as illustrated in this video:

2

You can try taking the CSS of the reply button and transferring these properties to the add post button:

css
css1465×827 114 KB

background: #00a3cc;
color: #fff;

Try adding this:

 .header-buttons .btn.btn-default {
      background: #00a3cc;
      color: #fff;
  }

  .header-buttons .btn.btn-default svg {
      color: #fff !important;
  }

Next, you need to add css for :hover (hover)


  .header-buttons .btn.btn-default:hover {
      background: #***;
  }

Select the necessary colors more accurately. Replace *** with the color you want.

How to add css to Discourse:

You can do this with any part of css.

3

Fantastic answer!!! Thank you so much!

I could use one more bit of CSS advice… how could I best minify these two bits of code?:

Change color of [+ New Topic] button in header

This header button exists because of (+ New topic) button on all pages Theme

.header-buttons .btn.btn-default {
      background: #00ccff;
      color: #fff;
      font-weight: 600;
  }
.header-buttons .btn.btn-default svg {
      color: #fff !important;
  }
.header-buttons .btn.btn-default:hover {
      background: #00a3cc;
  }

Change color of [+ New Topic] button in on category and tag pages

button#create-topic {
      background: #00ccff;
      color: #fff;
      font-weight: 600;
  }
button#create-topic svg {
      color: #fff !important;
  }
button#create-topic:hover {
      background: #00a3cc;
  }
4

Minimize? I’m not sure about the translation, I apologize. Try combining this:

.header-buttons .btn.btn-default, .header-buttons .btn.btn-default svg {
      background: #00ccff;
      color: #fff !important;
      font-weight: 600;
  }
.header-buttons .btn.btn-default:hover {
      background: #00a3cc;
}

Or

#new-create-topic, #new-create-topic svg {
    background: #00ccff;
    color: #fff !important;
    font-weight: 600;
}

#new-create-topic:hover {
    background: #00a3cc;
}

I look there is id (new-create-topic), I do not know how unique it is. Try using this (I did not check).

There are actually many options.

Use:

  • .header-buttons
  • button
  • #new-create-topic

css
css868×120 14.7 KB

Any combination of them…

5

Thanks for trying to help make the code shorter. When I tried several combinations like the ones you suggested, this is what I would get… (notice the plus sign)

hoverstate

For now I just decided to keep the two code snippets and everything is perfect!! Thanks again @Stranik

6

We did not set css for the icon on hover:

#new-create-topic:hover, #new-create-topic:hover > svg {
    background: #00a3cc;
}

Perhaps so. Sometimes it’s easier to do locally and see. :slightly_smiling_face:

You can safely try different options, combine them. There is a big field for creativity. Good luck!