Customize the New Topic button

Wiki Developers

AI-generated summary

In a Developers category discussion titled ‘Customize the New Topic button’, Don shares CSS code to style the New Topic and Open Draft buttons using color variables like --tertiary, --secondary, and --primary-medium, including hover effects. valsha reports no visible change, prompting Jagster to suggest the issue may be due to lack of hover interaction (e.g., on mobile). Don clarifies the CSS should target button#create-topic to override default styles and suggests using --success for a green variant. valsha confirms the button design comes from the Dracula Theme and thanks Don. Jagster humorously reflects on mis-tagging and praises the neon green button. Usman_Shahid asks how to change the button text from ‘New Topic’ to ‘Create a new Topic’; Don directs to /admin/customize/site_texts. Usman_Shahid later notes this can be done via theme by modifying I18n.translations 11. Finally, nathank introduces a Theme Component that simplifies text and icon customization, though not styling — which could be extended.

1

Hello,

I just want to share with you how I make our new topic button. Little CSS :slight_smile:

I use for this color variables. (tertiary, secondary and primary-medium)

New Topic button

new-topic

Open Draft button

draft-topic

#create-topic {
  color: var(--secondary);
  border: 2px solid var(--tertiary);
  background: var(--tertiary);
  transition: background .25s ease-out;
  .d-icon {
    color: var(--secondary);
  }
  &:hover,
  &:focus {
    background: var(--secondary);
    color: var(--tertiary);
    .d-icon {
      color: var(--tertiary);
    }
  }
  &.open-draft {
    background: var(--primary-medium);
    border: 2px solid var(--primary-medium);
    transition: background .25s ease-out;
    &:focus,
    &:hover {
      background: var(--secondary);
      color: var(--primary-medium);
      border: 2px solid var(--primary-medium);
      .d-icon {
        color: var(--primary-medium);
      }
    }
  }
}

Have a nice day! :slight_smile:

10 Likes
Developer Index
2021: The Year in Review
2

before

image
image303×115 2.82 KB

after
image
image294×106 2.54 KB

nothing changed :no_good_man:

3

@valsha I’m just guessing but perhaps because that CSS-trick is changing hoover and you aren’t hoovering?

In general and the most of you know this, but changing hoover (and many other things) shows up only in systems that are using mouse. Not in mobiles - because there a user just poke a button :wink:

2 Likes
4

I like the look of that button. How did you that?

And this is off topic big time… what tool are you using when recording/converting those gifs?

(Damn… did I push wrong reply button? So: @Don )

2 Likes
5

Hello,

It seems to this is the Dracula Theme. I checked the source.

You have to add button before #create-topic to override it.

So it should start :arrow_down:

button#create-topic {

If you want to keep the green success color then you should change the var(--tertiary) to var(--success). Like this :arrow_down:

button#create-topic {
  color: var(--secondary);
  border: 2px solid var(--success);
  background: var(--success);
  transition: background .25s ease-out;
  .d-icon {
    color: var(--secondary);
  }
  &:hover,
  &:focus {
    background: var(--secondary);
    color: var(--success);
    .d-icon {
      color: var(--success);
    }
  }
}
2 Likes
6

Yes, this button from Dracula Theme.
@Don as always, you are the savior :+1:

2 Likes
7

And ladies & gents, that was a demonstration what happends when someone doesn’t think a bit what he (it is always he…) is doing. This time tagging a person wrongly and questioning at wrong place can be confusing. Thank god this is only topic of CSS/theme - not world peace, 42 or something else important :rofl:

Actually I was wondering @Don’s button. But sure, that neon green is nice too :+1:

2 Likes
8

How are you changing the text from New Topic to Create a new Topic? @Don

9

Hello,

Visit /admin/customize/site_texts search for the text and change. :slightly_smiling_face:

10

Is this possible to do from within the theme itself?

11

The way to do this via theme is to add a script which changes I18n.translations object.

2 Likes
13

There is a Theme Component which allows you to customise the text, icon, and other related button behaviours easily now:

It doesn’t allow you to change the button styling, but that could potentially be added I think.

2 Likes