How to change color of the sign-up button

[hequaye (Henry Herbert)]

Hello everyone! I want to know how I can customize my signup button. I want to change the color of just my signup button to green and not all the header buttons.

I am on a discourse hosted forum, sorry if this is a beginner question I am very much a beginner and have been up all night trying to figure this out.

I am using the AIR theme.

[Steven]

Hi !

I’m not sure what range of options you have on hosted forums, but I assume you have the Customize section in the admin panel.

In your theme, edit CSS/html and in Common add this:

.d-header .sign-up-button {
    background: #48bb6a;
}

If it doesn’t work, you might need to add !important to make sure this color has the priority, like this:

.d-header .sign-up-button {
    background: #48bb6a !important;
}

[hequaye (Henry Herbert)]

Hi @Steven thank you it worked! The thing is I didn’t see any signup variable. I need to get familiar with the variables for css, and how to find them in html. Thank you!

[Steven]

Finding variables can be tricky. The thing that helped me a lot to progress was the Inspect feature in browsers, you can explore the code and the css and try some changes live.

In this case, Discours devs added a speicfic class for signup and login buttons which is helpful

But don’t hesitate to ask here, the community will always try to help

[hequaye (Henry Herbert)]

@Steven Man this is great!!! Thank you so much! go my signup button green!

So Im used the inspect tool and I was wondering if there was a way to change the name of the “All Tags” menu button to something like “LFX Tools” for my use case. understandably I may have to find this in HTML because of how tag based the whole forum is though, how complicated would you think changing the name of the tag functionality to tools would be?

[Steven]

This particular text can be edited in the admin panel : Customize > Texts

Type this in the search bar : js.tagging.selector_all_tags
And validate the text

But to answer your question in a general context, editing a text is doable but tricky with css. I generally use the content selector in a ::before or ::after class.

CSS ::before Selector

If we didn’t have the possibility to edit the text,I’m not an expert but I would do something like this.

First, I hide the all tags text:

summary.tag-drop-header .name {
    font-size: 0;
}

Then, I create a new css class, with content to add the text I want, and I need to specify the font-size to override the previous setting:

summary.tag-drop-header .name::after {
    content: "LFX Tools";
    font-size: 15px;
}