Custom CSS ['Start a Discussion'] Button Text?

User31

Does anyone know the necessary CSS/LESS code with which to customize the [Start a Discussion] buttons text label?

Ie: To change [Start a Discussion] to [INSERT CUSTOM TEXT]

This is for a concept fora project where starting discussions is not applicable.

Please note: I've already read through the relevant existing support threads, and with all due respect, I am not interested in resorting to the Linguist extension as a solution for this.
CSS will be adequate.

Cheers

BrodyStone21

User31 I used this for the main start discussion button, maybe try removing the --primary tag? If that doesn’t work, maybe try —secondary

.Button--primary { /* changes color of main start discussion button */
  color: #d6d6d6;
}

User31

BrodyStone21

Thanks mate.
You've actually given me an idea too.

I'm going to try using variations of> .Button--primary {//} <along with (I think it's) the> content: "*INSERT CUSTOM TEXT*"; <property.

User31

No luck so far with variations of:

.IndexPage-newDiscussion .StartDiscussionButton { 
    .Button--primary { 
        content: "*INSERT CUSTOM TEXT*" !important;
    }
}

.IndexPage-newDiscussion .StartDiscussionButton .Button--primary { 
        content: "*INSERT CUSTOM TEXT*" !important;
}

.Button--primary {
       content: "*INSERT CUSTOM TEXT*" !important;
}

.StartDiscussionButton .Button--primary { 
        content: "*INSERT CUSTOM TEXT" !important;
}

.IndexPage-newDiscussion .Button--primary { 
        content: "*INSERT CUSTOM TEXT*" !important;
}

I beseech thee mightiest Flarum™ code mages, take pity on this pitiful computeretard, teach me thou ways of the [Start a Discussion] text label customization spell craft...please.

User31

☝️😂 This bloody thing is a pushy little..."bastard sword with a 36" blade and a 10" handle would have to be a solid steel bar nearly an inch in diameter in order to weigh".

Barely a day and it's harrassin ya...🤣

ram0ng1

try:

.IndexPage-newDiscussion::after {
  content: "*INSERT CUSTOM TEXT*";
  text-indent: 0;
  display: block;
  line-height: initial;  
}

.IndexPage-newDiscussion {
text-indent: -9999px;
  line-height: 0;
}

Wellwisher

ram0ng1

Thank you. Nice tutorial. Made some amendments.
Didn't think this was possible with just CSS 😃

.IndexPage-newDiscussion::after {
  content: "INSERT CUSTOM TEXT";
  display:block;
  line-height: initial;
  text-indent: 0;
  bottom: 16px;
  position: relative;
}

.IndexPage-newDiscussion {
text-indent: -9999px;
  line-height: 0;
}
button.Button.Button--primary.IndexPage-newDiscussion.hasIcon {
    height: 40px;
}
```

User31

🤩Thank you so much @ram0ng1 & @Wellwisher!

Both versions of your Custom Style Sorcery proved far too powerful for the [Start a Discussion] button.

😄The [INSERT CUSTOM TEXT] resisted my amateurish authority at first. Bobbing upwards then downwards, refusing to adhere with the button background. But with a few minor repositioning tweaks I was eventually able to reassert dominance and the button submitted....😂👍

Cheers for sharing this cool code.
I'm sure it'll be quite helpful for a lot of others from this point onwards.

PS: I've added each of these to a new Flarum™ CSS/LESS cheat code resources @NicheFPF

Also...😅 I'm not sure who to award the 'Solved' thing to.
I'd award you both if we could do that.

However since @ram0ng1 was first, I think it's fair ram0ng1 takes this one.
Still, I appreciate each of you nonetheless.

🙂Thanks