Customize the New Topic button

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

before
image
after
image

nothing changed :no_good_man:

@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

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

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

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

2 Likes

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

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

Hello,

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

Is this possible to do from within the theme itself?

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

2 Likes