Customize the New Topic button

documentation theme developers
,
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
2

before
image
after
image

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