Custom 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


I just made this demo with the default button design. You can make whatever you want. On my site the create button is pretty different but use the same technic.

#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);
    }
  }
}
      
.navigation-controls {
// If your Draft button has different text (aria-label) change the next line
  button[aria-label="Open Draft"] {
    background: var(--primary-medium) !important;
    color: var(--secondary) !important;
    border: 2px solid var(--primary-medium) !important;
    .d-icon {
      color: var(--secondary) !important;
    }
    &:hover,
    &:focus {
      background: var(--secondary) !important;
      color: var(--primary-medium) !important;
      .d-icon {
        color: var(--primary-medium) !important;
      }
    }
  }
}

The Draft button use aria-label for target so if your button text (aria label) different then you need to change the Open Draft aria-label above in css.


On my site it looks like this :arrow_down:

New Topic :arrow_down:

newtopicmy

Open Draft :arrow_down:

draft-continue

Have a nice day! :slight_smile:

8 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: @dodesz )

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);
    }
  }
}
1 Like

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

1 Like

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 @dodesz’s button. But sure, that neon green is nice too :+1:

1 Like

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

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.

1 Like