Thanks for this Don, I have been wanting to do this for years! I took your idea one step further for my needs. Since my site is a bit different and each category is different and not just straight discussions, I choose to change the reply button text completely. So for my image critique category I changed it to “Give Critique or Reply”, by adding the ‘or Reply’ I believe it gets around Jakke’s concern. Thanks for bringing that up Jakke, I initially had it set to only “Give Critique”, but you’re right that it doesn’t work for all situations.
I don’t love the font-size: 0 trick, but I couldn’t get the visibility:hidden trick to work with this for some reason. Also, I tried to set the font-size to 1em rather than px, but that didn’t seem to work either. I ended up going with a slightly larger font to make that button stand out, but I would prefer to use em so the font will scale.
// Image Critique
body.category-image-critiques-abstract-critiques,
body.category-image-critiques-avian-critiques,
body.category-image-critiques-flora-critiques,
body.category-image-critiques-human-fauna-critiques,
body.category-image-critiques-landscape-critiques,
body.category-image-critiques-macro-critiques,
body.category-image-critiques-night-critiques,
body.category-image-critiques-non-nature-critiques,
body.category-image-critiques-wildlife-critiques,
body.category-image-critiques-weekly-challenge {
#topic-footer-buttons {
.topic-footer-main-buttons {
button.btn-primary.create {
span.d-button-label {
//hide reply text
font-size: 0;
}
}
}
}
#topic-footer-buttons {
.topic-footer-main-buttons {
button.btn-primary.create {
span.d-button-label:after {
// New text
font-size: 18px;
content: "Critique Image or Reply";
}
}
}
}
}
This is especially great for my AMA category where I changed the reply button to “Ask Question”, perfect! It also helps the person doing the AMA understand that they need to use the little reply button.
// AMA
body.category-learning-ama {
#topic-footer-buttons {
.topic-footer-main-buttons {
button.btn-primary.create {
span.d-button-label {
//hide reply text
font-size: 0;
}
}
}
}
#topic-footer-buttons {
.topic-footer-main-buttons {
button.btn-primary.create {
span.d-button-label:after {
// New text
font-size: 18px;
content: "Ask a question";
}
}
}
}
}
I also set a background color for the reply button so it stands out a bit more. I haven’t figured out how to make it transition properly for hovering, any ideas there would be helpful…
.discourse-no-touch .topic-body .actions .fade-out {
background: var(--primary-low);
}
Anyway, hopefully my rambling will help others!