I need to hide Google translate toolbar that appears after the user selects a language.
I did my research and most answers point use the following code to hide the popup:
.skiptranslate {
display: none !important;
}
body {
top: 0px !important;
}
However, on my project, the solution is working partially: if I use display none on the .skiptranslate class, the translation dropdown will stop working entirely.
I think google changed the structure of the popup recently as legacy solutions are not working for me.
I also tried to inspect the element and find a custom solution without success, any tips?
These are my current overwrite to the Google Translate dropdown:
.goog-te-gadget-icon {
display: none;
}
.goog-te-gadget-simple {
background-color: #ecebf0 !important;
border: 0 !important;
outline: 1px solid black;
font-size: 10pt;
font-weight: 800;
display: inline-block;
padding: 10px 10px !important;
cursor: pointer;
zoom: 1;
}
.goog-te-gadget-simple span {
color: #000 !important;
}
body {
top: 0px !important;
}
Related
I am using huerotate to change colors of my text links in my div, the problem is, it is also applying to my image links. I have tried removing them from images only(what I want) but I just can't figure it out. Any ideas? (I have made a JS to have a button to change colors on my design, and I want the text links to change when it is pressed, but not have the images change.)
.scontent {
max-width: 100%;
margin: 20px 0px;
padding: 5px 5px 5px 10px;
}
.scontent a {
color: var(--links);
filter: hue-rotate(var(--hue-rotate));
}
.scontent a:hover {
color: var(--links-hover);
filter: hue-rotate(var(--hue-rotate));
}
.scontent a img {
filter: none !important;
}
The thing is, you are applying filter to a, but clearing the filter on img. This is the case for :has pseudo-selector, but its currently in draft, so there is no Pure CSS Solution. You need to take help of JavaScript, to reset the hue-rotate filter on all a that has img inside it.
let imgArr = document.querySelectorAll('.scontent a img');
[...imgArr].forEach((img)=>{
img.parentNode.style.filter = "hue-rotate(0deg)";
})
:root{
--links: #ff0000;
--hue-rotate: 90deg;
}
.scontent {
max-width: 100%;
margin: 20px 0px;
padding: 5px 5px 5px 10px;
}
.scontent a {
color: var(--links);
filter: hue-rotate(var(--hue-rotate));
}
.scontent a:hover {
color: var(--links-hover);
filter: hue-rotate(var(--hue-rotate));
}
<div class="scontent">
Text Link
<img src="https://picsum.photos/200/200" />
</div>
I've been wracking my brain about this problem for a few days now. I'm working on a wordpress site that uses Contact Form 7 (CF7). Basically, I'm trying to change have each list item change color when the checkbox is selected.
This topic has been my main inspiration so far: https://www.sitepoint.com/community/t/on-click-of-check-box-my-div-border-and-text-color-should-be-in-blue/276230/3
But I'm unsure of how to get the code to work within the CF7 editor (I've tried the support forums in that plugin, but no one answered me there haha).
Relevant code in CF7:
<span onclick="UpdateFeatures(this,false);"> [checkbox* InterestsAndGoals id:getStartedInterestsAndGoals use_label_element "Growth" "Marketing Exposure" "Increase in overall traffic" "Edge over your competition" "Increase in low season traffic"]</span>
Javascript used in CF7:
<script>
function UpdateFeatures(checkbox) {
console.log(document.querySelector(".wpcf7-list-item"));
document.querySelector(".wpcf7-list-item").classList.remove("changeColor");
if (checkbox.checked) {
document.querySelector(".wpcf7-list-item").classList.add("changeColor");
}
}
</script>
CSS:
#getStartedInterestsAndGoals input[type=checkbox] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
span.wpcf7-list-item {
display: inline-block;
margin: 0 0 15px 0;
}
.wpcf7-list-item {
margin: 0 0 20px 1em;
border: 1px solid #f26922;
border-radius: 40px;
text-transform: uppercase;
font-size: 16px;
padding: 10px;
width: 100%;
}
.wpcf7-list-item:hover {
background-color: #f26922;
border-color: #333333;
color: #ffffff;
}
.changeColor {
background-color: #f26922;
border-color: #333333;
color: #ffffff;
}
JSFiddle to demonstrate code made from CF7:
https://jsfiddle.net/p9wrdsmo/1/
Any help with this would be greatly appreciated! I'm not very good at JavaScript and would have preferred pure HTML/CSS, but I don't believe it's possible.
Thank you!!
I have a button with javascript attached. When you click the button a hidden box will appear, when you click another one, the first box gets replaced with the second and so on. When my button is active, when the box is visible, it gets a shadow around. And i don´t want that! I tried to use the following css codes:
.nav > button{
width: auto;
font-family: 'OpenSansBold';
color: #000;
padding: 3px;
border: none;
margin-right: 10px;
margin-top: 5px;
font-size: 15px;
text-align: left;
background-color: #fff;
}
button:hover{
cursor: pointer;
border: none;
color: #7b1a2c;
}
button:visited{
font-family: 'OpenSansBold';
box-shadow: none;
}
button:active{
box-shadow: none;
}
But with no luck. Is there another CSS code for buttons when its active?
I have no clue about javascript, just copy pasted this thing. Maybe this is something that can be fixed in the js code? Just in case, I can show you guys:
$('div.box').slice(1).addClass('hidden');
$('.nav').children('button').on('click', function(){
// console.log('klikk');
$(this).data('content');
$('.box').not('hidden').addClass('hidden');
$( $(this).data('content')).removeClass('hidden');
});
Maybe you talk about outline property or :focus pseudo-class?
Try this one:
button:active, button:focus {
box-shadow: none;
outline: 0;
}
To give you a working example, play around with the following snippet, I think this behaves like you would want it to.
To completely remove the shadow, just remove the second JS rule.
// :active rules
$('button').on('mousedown', function () {
$(this).css('box-shadow', 'none');
});
// :visited rules
$('button').on('mouseup', function () {
$(this).css('box-shadow', '10px 10px 5px #888888');
});
button {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 10px 10px 5px #888888;
}
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<body>
<button>test</button>
</body>
Adding what seems to be an innocuous class to an element having a class containing :first-letter causes the first letter, under some circumstances, to be rendered incorrectly. An element originally has class "unindent", and then class "menuitemon" is added. The fiddle http://jsfiddle.net/pgf3reyt/4/ shows this working on one element, and not working on another. Works OK in Firefox.
p.unindent {
color: #555555;
background-color: #e6e6e6;
border-bottom: 1px solid #d3d3d3;
border-left: 1px solid rgba(0,0,0,0); /* so things are the same size so we don't develop scroll bars*/
border-right: 1px solid rgba(0,0,0,0);
border-top: 1px solid rgba(0,0,0,0);
padding-top: 2px;
padding-bottom: 2px;
padding-left: 25px;
padding-right: 5px;
margin-top: 0;
margin-bottom: 0;
}
p.unindent:first-letter {
margin-left: -20px;
}
p.unindent.menuitemon {
color: #e6e6e6;
background: #555555;
border: 1px solid #222222;
border-radius: 4px;
}
Can someone point out what I might be doing wrong that's causing this?
You've done nothing wrong. Apparently Chrome has decided that for version 41, it'll screw up repainting the :first-letter pseudo-element (incidentally, Chrome is notorious for repaint bugs). If you declare the "menuitemon" class in the markup, it has no trouble rendering the pseudo-element with the negative margin. It's only when you add it dynamically that it screws up.
Fortunately, unlike the cascade resolution bug that affected Chrome 39 -> 40, I was able to work around this very trivially by using a negative text-indent on the element instead of a negative margin on :first-letter:
p.unindent {
text-indent: -20px;
/* ... */
}
/*
p.unindent:first-letter {
margin-left: -20px;
}
*/
The pseudo element (:first-letter) only works if the parent element is a block container box (in other words, it doesn't work on the first letter of display: inline; elements.)
You must set pseudo's parent to
.parent {display:block}
.menutitle {
/* font-size: 1.2em; */
font-weight: bold;
/* font-style: italic; */
margin-left: 0;
}
the moment i commented those two lines it worked properly
EDIT
nop it only solved half the problem
Codepen
In my firefox extension I created a div element and added to it a paragraph with id named myP.
In the css file I wrote:
#myP
{
color: red;
text-align: center;
font-size: 16px;
font-weight: 900;
margin: 7px 7px;
}
but only the first two properties applied to the paragraph.
I tried to set the three others properties in my js code:
myP.style.fontSize = "16px";
myP.style.fontWeight = "900";
myP.style.margin = "7px 7px";
and it worked perfectly.
how can it be?
Maybe there is something else that is overriding your styles, can you inspect it in any way?
Have you tried:
#myP
{
color: red;
text-align: center;
font-size: 16px !important;
font-weight: 900 !important;
margin: 7px 7px !important;
}