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!
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.
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 have a site running joomla 3.0, and I'm trying to customize the menu bar.
The template is protostar and Im using the nav-pills style to make the menu bar run horizontal on the top.
The problem that I have is that I cannot find where I need to change or include css to CHANGE the rollover BLUE color on the submenu.
Also I would like to know how to change the color on that white little arrow on the submenu.
Image of the menu I want to edit
The overall tip worked for me as well. Joomla 3.x must use the .navigation .nav-child:hover section as above.
I also had to change the gradient lines section as one of them was being invoked.
Just changing the background lines did not show up.
I though about deleting them but instead made the start/stop the same.
Guessing that what gets used is a browser based choice if an option fits.
Just went on the Bootstrap site and inspected the element and it appears to be on lines 2927 to 2934 of bootstrap.css:
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
color: #ffffff;
text-decoration: none;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
background-color: #0081c2; is for non CSS3 compatible browsers and everything below is for CSS3 compatible.
Do bare in mind that Joomla may have changed things around in the bootstrap.css file so it may be on a different line, however you can simply search for the following:
.dropdown-submenu:hover > a
Hope this helps
Thankx for the Help Lodder! Saddly it did not worked. I found that I had to change not the .dropdown-submenu:hover > a { but instead .navigation .nav-child:hover > a {
Still thankx for taking to time on trying to help me!
Had the same problem. You can use this selector:
.navigation .nav-child li a:hover{
The KEY THING though is to set
background-image:none;
as the default style uses a gradient, not just a background colour!
I need use a modal plugin and colorbox looks great.
How do I load it w/o the rounded borders?
Given my page size, the thick border taking too much space.
Anyway to hide it or make it thinner and hide the border if needed on some calls?
You can hide the borders in easy way:
$("#cboxTopLeft").hide();
$("#cboxTopRight").hide();
$("#cboxBottomLeft").hide();
$("#cboxBottomRight").hide();
$("#cboxMiddleLeft").hide();
$("#cboxMiddleRight").hide();
$("#cboxTopCenter").hide();
$("#cboxBottomCenter").hide();
and add class with border style if you want with this way :
.thin_border {
border: 10px solid blue;
border-radius: 10px;
margin: 10px;
box-shadow: 0 0 25px blue;
}
and then add it with jquery
$("#cboxContent").addClass("thin_border");
I think colorbox isn't actually using the property "border" to get that huge black border going around. It seems like its being incased in a 3 x 3 div which uses images to create that border. Im sure you could remove it but its going to require messing with the actual colorbox javascript. You could try messing with the CSS as well.
You consider looking into a diffrent plugin like lightbox2 or shadowbox? I personally use slimbox (nice little clone of lightbox). If you want to mess with the code go for it. Otherwise I would just pick a diffrent plugin.