I am struggling to find a way to give CSS to all placeholders in my application,
I have tried the following:
.customField input::-webkit-input-placeholder {
color: #2e4bc5;
}
.x-text-field input::webkit-input-placeholder{
color :#2e4bc5
}
Any help would be appreciated.
Try this:
.customField .x-input-el::-webkit-input-placeholder {
color: #2e4bc5;
}
Related
currently I am trying to "hack" my Atom-editor and I am stuck here: I want to change the color of whenever I call a function in python - just like it is in the basic setup of SublimeText3. I am using the following code in my styles.less:
atom-text-editor::shadow {
.meta.function-call.python {
color: red;
}
}
The Problem is that this code also changes the color of all instances & modules to red leaving me with this mess here: URL
atom-text-editor.editor {
.syntax--meta.syntax--function-call.syntax--generic {
color: #66D9EF;
}
}
This works for me using magicpython.
Screenshot
Try this:
atom-text-editor .syntax--function-call {
color: red;
}
Edit: Fixed as per first comment.
Honestly, I have no idea how to write this to work. I want a sass mixin that would remove that blue Bootstrap outline every button tends to have, so I can just add it to buttons I want as I go along.
Could someone possibly help me with this one?
I've tried a few approaches, but they basically do nothing.
You could set the SCSS variable like so:
$btn-focus-width: 0;
you would have something like this:
#mixin outline($value) {
outline: $value;
}
button {
#include outline(0);
}
which outputs:
button {
outline: 0;
}
see a demo here
According to this blog post, it should be possible to style the ToolbarSearch by customizing the UIIDs ToolbarSearch,TextFieldSearch and `TextHintSearch.
In my CSS File it looks like this:
ToolbarSearch {
color: white;
height:30mm;
width:30mm;
}
TextHintSearch {
color: white;
height:30mm;
width:30mm;
}
TextFieldSearch {
color: white;
height:30mm;
width:30mm;
}
The main thing I want to achieve is a white Search Button, Text, X-Button and Hint.
In the blog post above, it looks right, except the textfieldsearch and -hint:
But in my application it looks like this:
The buttons are in the wrong color. What am I doing wrong?
Notice:
This is how I add it
this.getToolbar().addSearchCommand(e -> {
//TODO search
});
(The algorythm is not implemented yet)
I don't use the CSS plugin so I'm not really sure how this maps there but you need to override the selected/pressed & unselected styles.
I am building a widget that will be displayed on a client's site. We cannot use an iFrame so I am forced to use an exhaustive CSS reset (https://github.com/premasagar/cleanslate) to avoid interference with their styles. To use that solution, I need to add !important to all of my styles and because there are a lot of them and I want to keep this code easy to maintain, I'm looking for a more dynamic solution.
I am able to add !important to the stylesheet via javascript but that's not ideal for a production environment. I am using CodeKit and LESS and wondering if either of these are able to help me easily add !important to all styles when the CSS file is generated.
Mixin?
CodeKit config?
Update: Yes, LESS Can Help
I hate using !important except in the most extreme circumstances. Most people use it like a chainsaw when they should be using a scalpal to do the job. Nevertheless, I understand the issues facing widget developers like yourself, and your choice to use https://github.com/premasagar/cleanslate leaves you with no option.
Marc's answer noted a good feature of LESS, but he failed to demonstrate how that can help in this matter.
If you wrap your entire LESS code in a namespaced mixin, then this feature does exactly what is needed. So assume your widget code looked like this (you mentioned you are already using some type of class for your widget):
.yourWidgetClass div > p {
prop: something;
&:hover {
prop: some-hover-style;
}
}
.yourWidgetClass .someClass {
prop: something;
}
Then you can do this (wrapping all your widget code in #makeImportant() then calling that mixin with the !important feature noted in Marc's answer):
#makeImportant() {
.yourWidgetClass div > p {
prop: something;
&:hover {
prop: some-hover-style;
}
}
.yourWidgetClass .someClass {
prop: something;
}
}
& {
#makeImportant() !important;
}
This produces the following CSS Output:
.yourWidgetClass div > p {
prop: something !important;
}
.yourWidgetClass div > p:hover {
prop: some-hover-style !important;
}
.yourWidgetClass .someClass {
prop: something !important;
}
For my original (accepted) answer that was way more manually intensive, see the edit history.
I found that LESS can mark all properties set by a mixin at once as !important when specify !important after the mix-in call.
.someMixin() {
background-color: #fff;
cursor: pointer;
}
.someUsages {
.someMixin() !important;
}
Results in:
.someUsages {
background-color: #fff !important;
cursor: pointer !important;
}
For more information on this topic see the LESS doc about "The !important keyword".
I've been trying to replace to current CSS class of the resizeable handles in Extjs, specifically the ones for the popup windows. I am trying to change the colour of it and it doesnt seem to be working. Here is my css code
.linkWindow .x-toolbar-footer,
.x-resizable-handle, .x-resizable-handle-west, .x-resizable-handle-east, .x-resizable- handle-south, .x-resizable-handle-over .x-resizable-handle-east, .x-resizable-handle-over .x-resizable-handle-west, .x-resizable-proxy, .x-resizable-overlay
{
color: #045BB3;
background-color: #045BB3;
background: #045BB3;
border-color: #045BB3;
}
I am not sure what to do anymore. Any help would be greatly appreciated!!
Also it should be noted I am developing for IE 7
I'm guessing Extjs css is overwriting your own. try to add !important at the end of your properties like this:
.linkWindow .x-toolbar-footer,
.x-resizable-handle, .x-resizable-handle-west, .x-resizable-handle-east, .x-resizable- handle-south, .x-resizable-handle-over .x-resizable-handle-east, .x-resizable-handle-over .x-resizable-handle-west, .x-resizable-proxy, .x-resizable-overlay
{
color: #045BB3 !important;
background: #045BB3 !important;
border-color: #045BB3 !important;
}
The handles are actually gif images. You'd need to edit the gifs for each piece of the splitter bar. For instance extjs4/resources/themes/images/default/sizer/s-handle.gif is one.