jord8on
(Jordan)
April 10, 2020, 3:08am
1
I like the styling of the “Reply” button, which is the “Tertiary” color as defined in /admin/customize/colors (Color Palettes/selection)
I would like to have our “New Topic” button match the styling of the “Reply” button as illustrated in this video:
Stranik
(Evgeny)
April 10, 2020, 4:47am
2
You can try taking the CSS of the reply button and transferring these properties to the add post button:
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:
So, you want to create Discourse themes? Not sure where to start? Or maybe you have created Discourse themes before, but want to learn how to do even more cool things. Well, you’ve come to the right place
Developer’s guide to Discourse Themes
Subjects include a general overview of Discourse themes, creating and sharing Discourse themes, theme development examples, searching for and finding information / examples in the Discourse repository, and best practices.
Prerequisites:
…
You can do this with any part of css.
2 Likes
jord8on
(Jordan)
April 10, 2020, 6:10am
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;
}
1 Like
Stranik
(Evgeny)
April 10, 2020, 6:24am
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
Any combination of them…
2 Likes
jord8on
(Jordan)
April 10, 2020, 6:51am
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)
For now I just decided to keep the two code snippets and everything is perfect!! Thanks again @Stranik
1 Like
Stranik
(Evgeny)
April 10, 2020, 6:58am
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.
You can safely try different options, combine them. There is a big field for creativity. Good luck!
2 Likes
system
(system)
Closed
May 10, 2020, 6:58am
7
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.