I am testing the Ace Editor in their Kitchen Sink demo using the Mono Industrial theme and when I select text, it only highlights part of the line I selected. Here is a screenshot showing what I mean:
https://www.screencast.com/t/SnkUrwMql3J
Is there a setting or CSS hack that might fix it?
I was able to fix the issue with this bit of css:
.ace-mono-industrial .ace_string {
background-color: transparent !important;
}
This looks like a bug in mono industrial theme of ace. It sets background to the text which covers the selection.
You may be able to use a css hack like
.ace_line>span {
background-color: transparent!important;
}
or make a more specific selector to match only classes that actually define a background-color
Related
I am trying to make the back button icon white in the toolbar of my Ionic 4 app. I have added:
ion-back-button {
--color: white;
}
in my global.scss, but the icon persists in being grey. I have managed to make my toolbar title white.
This is my template:
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Title</ion-title>
</ion-toolbar>
I'd like to be able to simply define a global style to change the colour of all back buttons globally without having to add additional markup to every page with a back button.
Try it in the global.scss with important
ion-back-button{
--color: white !important;
}
Placing it within :root works as well per the docs:
https://ionicframework.com/docs/theming/css-variables#setting-values
:root {
ion-back-button {
--color: red;
}
}
Add the following styles in the global.scss
ion-icon.sc-ion-back-button-md , ion-icon.sc-ion-back-button-ios
{
color: #fff !important;
}
I had this problem just now, the --color variable just doesn't seem to work, however setting color instead with the !important flag did.
Here is what I did, note the focused and hover variables do seem to work if you need to change these.
ion-back-button {
color: #fff !important;
--color-focused: #fff;
--color-hover: #fff;
}
I had this same problem. No matter what I tried, I could not change the color of the ion-back-button from gray. So, I used the Chrome developer tools to inspect the element and learned that a theme for a third-party module that I had loaded was applying that gray color to all span tags. Fortunately, I no longer needed that module, so the answer for me was to simply remove the reference to the theme.
The module that was causing this problem was AWS Amplify.
I am posting this "answer" here to help you or anyone else take a "next step" in resolving this "maddening" problem: use Chrome developer tools to inspect the back button element in the DOM to identify the CSS rule that is being applied.
Check your variables.css file there is should be #media (prefers-color-scheme: dark) section that relates to dark theme colors. Also you need set color light to ion-back-button.
I would like to customize the background color of the browser canvas to black as per instructions from here but it doesn't seem to work for me, I'm using ChromEdit to edit the css config.
I would like to change it to black instead of white.
UserChrome.css:
browser { background-color: #000 !important; }
Anyone every tried to do that?
This question is more suitable for superuser.com but since you already got a reply I'll give in.
If my memory serves well about:blank used to be a chrome page. Now it a content page, though one with special treatment. But for the purpose of tweaking its css we can consider it no different than example.com
So edit userContent.css with the following code
#-moz-document url("about:blank") {
body {
background-image:
linear-gradient(
to right,
red,
orange,
yellow
);
}
}
The error appears to be that you are using the file name UserChrome.css. The file should be userChrome.css. Note the lowercase "u". When using userChrome.css the code:
browser { background-color: #000 !important; }
works for me.
However, under normal conditions, this is only displayed for a very brief amount of time. In some configurations, it may not be visible.
How can I prevent the reset.css from clearing out the bold or italic style formats in the kendo editor? since, I need reset.css for other parts of the applications.
I'm not really sure why reset.css wants to change "font" to "inherit" on strong elements but it is not very logic. Kendo editor uses to make text bold so it creates a conflict.
Add this CSS
strong { font-weight: bold }
or
strong { font-weight: bold!important }
or use another reset css like normalize.css
For more information, take a look at this SO question: YUI Reset CSS Makes <strong><em>this not work</em></strong>
So in order to change Jsbin's theme one can go to console and write
jsbin.settings.editor.theme = "theme-you-want";
as I read here.
I like monokai theme but unfortunately there is a big drawback about dark themes. When you get your cursor on a line, whole line turnes white (like marking the whole line). The problem is that text is also white and I can't see text! Does anyone else have this problem and a possible workaround?
Go to the Console of the Browser and put this...
jsbin.settings.editor.styleActiveLine=false
...and then refresh the page. That will turn off the styling for the active line.
Or, if you want it to be highlighted and are cool with playing with the UserStyle sheet of your browser you can add this....
.focus div.CodeMirror-activeline-background {
background-color: #eee !important;
}
.focus div.CodeMirror-activeline .CodeMirror-linenumber {
background-color: #ccc !important;
color: #2c3dad !important;
}
...and adjust the colours to your liking.
If your on windows and use Chrome you can use my tool to get to the style sheet easily...
http://forum.valorsolo.com/viewtopic.php?f=35&t=269&hilit=extension+opener
...one cool thing about the userstyle sheet in Chrome is the page will update as soon as you save the file.
I am using Ckeditor 4. Setting the property uiColor makes it always gradient. Is there a way to setup a solid ui color?
Using the inline editor with the 'sharedspace' plugin:
CKEDITOR.on('instanceReady', function (e) {
$('.cke_top').css('background','#eee');
})
You have to edit skin.js in /ckeditor_path/skins/skin_name/skin.js and modify CKEDITOR.skin.chameleon part that controls uiColor management to get rid of gradients. No other clean & easy way.
I have found that doing things like this in CKEditor are extremely frustrating. I tried finding a way to do this for a long time and changed the skin.js file, and several other things. In the end, I fixed it by changing the property with jquery after the editor loaded.
$('.cke_inner').css('background','transparent');
You can substitute '#012345' for 'transparent' and it will be a solid color.