I'm trying to refine the Breeze Dark theme for konsole using custom CSS, but I cannot figure out the selector which gets picked when the konsole content changes and the tab get becomes highlighted (if you know what I mean; it merely means that the unselected tab text color gets changed when the content of the shell changes). Not hover though, as hovering works the over way.
Reading the official documentation doesn't clarify me (I suppose I'm using it wrong, but anyway). Does anyone know the name of the property/selector ?
Also, it would be nice if my custom CSS would be merged with teh default one, overriding only the things that I change, and leaving others intact. I expected this to be the default behavior, but seems like I'm wrong.
Here are some official examples for customizing QTabWidget.
Namely, you would need ::tab subcontrol and :selected pseudo state in your stylesheet. For example:
QTabBar::tab:selected {background: red;}
Related
I am aware there are other similar topics on this, but I was wondering how to make my situation work. I have not been able to make it work with available information so far.
I am trying to modify the background color of a Text button when the mouse hovers.
If I change my backgroundColor style inline of the button, it changes the appropriate area entirely. It seems there are no way to add an :hover functionality inline (I am using TS, shows up as an error. Even though it compiles, it has no effect).
If I use a SCSS module, I can change again the whole background color. But if I change the same property with the :hover functionality, it only affects the text part (see screenshot).
I've tried targeting more specifically the ant-btn-text, but to no effect still.
Would someone have an idea? I would like to avoid creating a state variable for this.
Edit: added portion of code and CSS as requested in comment
AntD classes generally override your own css stying. You can use !important to override that.
Ok so I found it (only post it now as it was getting late local time).
So compared to my original post, the & parent selector was necessary, and also adding !important made the trick.
So in my case, having:
.updateButton {
&:hover:{
background-color: red !important;
}
}
overrode the default styling.
Thank you!
Issue:
image.png
The drop-down menu is showing "Choose an option" like a box that comes out of the text area. I did my little research and it is a CSS issue and followed the instructions.
I right-click on the "Choose an option" and click on "inspect" as shown below:
The highlighted code is where the error is and if I change the "width" in the code to "150px" or "Auto" then the option appears accurately as below
This needs to be added to the Custom CSS code in my WordPress Custom CSS tab which I did as below
But it does not change after I hit Publish. That is my glitch. I am not sure what I am doing wrong. Maybe I am not choosing the CSS Class correctly.
You should have inspected the element to be sure, but my guess is that, for some reason, wordpress is initialing the inline style of the element to 36px.
That overwrites the class styling (you can read more about css priorities here).
As an easy fix you could just use important! rule. You should be carefully to use it only when is really necessary (you can read more about here).
I really recomand to only use important when you really need it, since it can easily backfire otherwise.
I'm writing a website that uses a rich Material Design theme on top of Bootstrap 4. So far I have been able to make all the browser chrome match the site at least somewhat (Chrome's autofill indicator being the most difficult to date), but ever since I started developing in Firefox Quantum, I'm running into difficulties hiding the focus ring around input fields:
According to the MDN docs, I should be able to apply the outline: none property to input:focus or input:-moz-focusring, however none of these seem to work. I can see the property showing up in the style inspector, and Firefox doesn't show that it's being overridden by anything, but the focus ring still shows up.
I understand it's important to have indication of focus, however seeing as I already have my own clear indication of focus, I would prefer to hide the browser-provided one as it interferes with my styling.
Okay, so, I solved this while trying to reproduce it in JSFiddle (which I wouldn't have been able to do). It's ridiculous.
On my site, I'm compiling Bootstrap and Material Design from source along with my own SCSS so that I can override the colors and options for the two. It turns out that Material Design overrides the enable-shadows option for Bootstrap, but only if the SCSS is referenced for both, so it's impossible to reproduce in JSFiddle (where the SCSS has already been compiled to CSS).
The offending rule is in Bootstrap's mixins/_forms.scss file under form-control-focus. It's new in the latest minor version of Bootstrap, apparently, because I've tested in Chrome since updating and the rectangle shows up there, too (whereas it did not before updating Bootstrap). The rule won't show up in the inspector because opening the inspector unfocuses the control, and the :focus state doesn't trigger the JS event to let Bootstrap know it's focused, which led me to believe it was browser chrome highlighting the control.
I got an image, and I want to add a border when I hover the mouse. If it has a fadein animation even better.
But I have no idea how to link a class to my image. where should I define it?. And if I update the Wordpress version, it is deleted?.
You are asking quite a few question in this one issue.
Your first question is how you create a class in CSS. You can read about that here.
The next 'question' is about fading (well, you more alluded to the idea of wanting a transition) - you can read about that here or here.
Your last question is about updating Wordpress; will it affect your custom css. That is completely dependent on how you went about adding the custom css. If the theme gets updated, it might override your changes, if you used some sort of theme customizer, backend custom css module; that also might get overridden, but it is completely dependent on how you go about adding your custom css.
Sorry I didn't get into specifics, that's because I am unsure about your current code.
Think I know the answer to this one, but just thought there may be some genius out there whos know of a way to do this...
Basically I am making a site editor kind of thing and it would be amazingly handy if I could replicate the way Firebug and the Chrome console highlights elements when you hover over their code in the html/elements tabs of those inspectors...
Its not something I can do with background effects because that does not highlight the whole Div (the contents show above the highlight) and I don't think there is anyway of making a div overlay over the top of all the content but have it not block mouseovers on underlying elements...
Anyone any ideas? Is there any browser specific code that achieves this kind of thing?
In general, Firefox extensions are mostly JavaScript. Since Firebug is BSD licensed, you can browse its source code on its project site. Maybe you'll find the relevant code and get an idea how to solve your specific task.
You could add an outline in CSS on mouseover - that would highlight the element without changing its position, as outline does not effect layout. A box-shadow would also work similarly.
In fact, it looks to me like Firebug adds a dark bluish box-shadow to elements to highlight them.