Signup button on mobile

Development

AI-generated summary

In a discussion titled “Signup button on mobile” under the Dev category, Paublio_Martinez requested help changing the mobile Login button to Signup/Login. tshenry provided a CSS snippet to achieve this by hiding the span inside .login-button and appending “Signup/Login” via :after. Paublio_Martinez confirmed it worked and asked how to view Discourse’s HTML source code to better understand CSS styling. tshenry recommended using browser developer tools — specifically inspecting elements via right-click — to view and interact with the HTML and CSS in real time, highlighting how hovering over elements in the inspector reveals them on the page. This approach helps users familiarize themselves with the structure and styling without needing direct access to source files.

1

would like to change the Login button on mobile to Signup/Login
Is there any way I can do this

Screenshot_20180410_105651.png720Ă—1280 127 KB

2

Try adding this to your Mobile CSS:

.login-button {
    span {display: none}
    &:after {content: "Signup/Login"}
}
3

Thanks it worked.
Do you know how i can get discourse html source code.
I just want to check it out and get familiar with these basic CSS styling

4

No problem :slightly_smiling_face:

Using the developer tools on your preferred web browser should be all you need to find the relevant CSS for a given HTML element.

I would look up how to enable the developer tools on your web browser of choice. Once enabled, you should be able to right-click on any element on the page and see some option alluding to “inspecting” the element. Clicking that should open a window or panel that takes you right to the relevant HTML and CSS. If you hover over an HTML element in the listed code, it should highlight it on the page to confirm you have the right thing selected. Hopefully that makes sense. It should be fairly clear once you have the inspector open and play around with it a bit.