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.
Related
How might I make the reCaptcha badge transparent? I don't want to hide it, I just want to make the white background transparent. I can do it by changing the code in the inspect pane, but can't figure out how to add additional css to make it permanent. Running Wordpress 5.8.3.
I've tried adding the info from the inspect in Additional CSS, but it doesn't work:
.rc-anchor-light {
background: #f9f9f900;
color: #000;
}
Have also tried adding the .grecaptcha-badge:
.grecaptcha-badge .rc-anchor-light {
background: #f9f9f900;
color: #000;
}
Here's a screenshot of what I'm hoping to do:
recaptcha transparent screenshot
Many thanks for any help.
you can add to your css file the following:
.grecaptcha-badge
{
opacity: 0.3;
}
The range between 0 and 1 makes it fully transparent, or 100% visible.
This configuration shows the badge with 30% opacity.
Hope this help you, cheers!
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 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
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.
I have a simple textarea in a page with a placeholder for when it is empty. I have styled the textarea in css to be white text and a transparent background. The body of my document is very dark so black text shows up poorly. This all works fine in Chrome, IE, etc. However in firefox when the box is empty the placeholder text appears colored correctly, but when you click in the box (focus) the cursor starts out black until you start typing. If you delete what you typed, the placeholder text comes back and the cursor is black again. If you are not looking closely, it appears as if you clicked a control that is non-functional.
How are people working around this?
My CSS:
.statementInput {
width: 500px;
height: 50px;
background-color: transparent;
color:white;
border:none;
}
The text area line:
<textarea class="statementInput" id="st1" placeholder="Type something here"></textarea>
If I'm not mistaken, this is a bug that has appeared in Firefox recently and has been marked as a bug, too.
I have encountered this bug in my own work as well and I must say it's very frustrating. Unless somebody finds a workaround, I think we will just have to wait for the developers to release a new version of Firefox that fixes it.
This is fixed in at least Firefox ESR 31 and 36.
The following css snippet causes a white cursor on a dark background.
.textInput:focus {
color: white;
}
Bug 830608 states it has been fixed since 19.