Don
July 22, 2021, 11:34am
1
Hello,
I just want to share with you how I make our new topic button. Little CSS
I use for this color variables. (tertiary
, secondary
and primary-medium
)
New Topic button
Open Draft button
#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!
10 Likes
Jagster
(Jakke Lehtonen)
September 9, 2021, 7:52am
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
2 Likes
Jagster
(Jakke Lehtonen)
September 9, 2021, 7:54am
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
Don
September 9, 2021, 8:38am
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
button#create-topic {
If you want to keep the green success
color then you should change the var(--tertiary)
to var(--success)
. Like this
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
valsha
(KingPin)
September 9, 2021, 8:46am
6
Yes, this button from Dracula Theme .
@Don as always, you are the savior
2 Likes
Jagster
(Jakke Lehtonen)
September 9, 2021, 9:01am
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
Actually I was wondering @Don ’s button. But sure, that neon green is nice too
2 Likes
How are you changing the text from New Topic to Create a new Topic? @Don
Don
September 15, 2021, 7:08am
9
Hello,
Visit /admin/customize/site_texts
search for the text and change.
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