I would like to ask you for a help.
I am using Word press 4.2.2 and inserting videos on my pages. But when i click on it it makes blue border around it.
I tried to change theme style.css, bootstrap.css and even wp-mediaelements.css where i tried border: none and border:0px option. Nothing works.
in IE it is all right, but FF, Chrome, Safari and Opera are still showing that border.
Can somebody make suggestions how to fix this?
Thanks all for help.
set outline to none in your CSS.
#video {
outline: none;
}
This problem was solved by
*:focus{
background: none;
border: 0px;
outline: none;
}
When I used this, the blue border dissapeared. More info about Focus: http://www.w3schools.com/cssref/sel_focus.asp
Thanks all for help.
try to this on style.css file on that particular class :
border: none !important ;
OR
border: 0px !important;
I found it on:
/wp-includes/css/media-views.min.css
.mejs-container:focus {
outline:1px solid #5b9dd9;
box-shadow:0 0 2px 1px rgba(30, 140, 190, .8)
}
Related
Hello I am trying to remove the default background of toolbar icons when hover in firefox using userChrome.css
.toolbarbutton-icon
{
border-radius: 5px !important;
box-shadow: 0px 1px 1px 1px black, 0 -0.01em 1px 0px #D0D0D0 !important;
background-color: var(--uc-regular-colour) !important;
width: 26px !important;
height: 26px !important;
padding: 5px !important;
}
This block of code changes the size and color of all toolbar buttons including extension icons
Then I used this block of code to change its color when hover over them
*:hover > .toolbarbutton-icon{
background-color: green !important;
}
Which changes color of buttons when hover but the extension buttons stays the same.
How can I change it without having to define each extension name or property
Below are some screenshots to demonstrate the issue
As you can see except extension button all buttons change color
*:hover .toolbarbutton-icon {
background-color: green !important;
}
Tried this block as well as suggested below, but it hovers on all icons by default, I want each button to change color when hovered over them also when I hover over the extension button It still has the gray color
It will be a problem when you use >.
The > notation applies only to the immediate children of that element.
Try use:
*:hover .toolbarbutton-icon {
background-color: green !important;
}
Hope this helps.
.webextension-browser-action:hover > .toolbarbutton-badge-stack .toolbarbutton-icon { background-color: var(--uc-hover-colour) !important;}
Apparently after doing some research. Finally found a way to fix it.
The block of codes only works with extensions installed on firefox
I need to change a button on my website's homepage from a curved edge to sharp.
It is a WordPress website and I am trying to add this code via Additional CSS window.
I tried to perform the below code, but it did not work.
wobble-horizontal.shop-button.arrow-right.style2.black.bg-white
{
border:3px solid #bada55;
}
Any suggestion on how to make the button sharp-edged?
Edit: I have just realised I haven't mentioned "a" class at the beginning. It should be a.wobble. Sorry for the confusion.
Assuming that's just a div, it's as simple as setting the border-radius to 0px
Also, the library you're using could be high up in specificity, so you can also try border-radius: 0px !important; to try and force it.
Based on your border: 3px solid #bada55 line, I think you may have the wrong selector as that should be setting the border of that button a lime green and not gray.
#sharp {
border-radius: 0px;
}
#not-sharp {
border-radius: 10px;
}
div { background: red; margin: 10px; }
<div id="sharp">My Sharp Button</div>
<div id="not-sharp">My Not Sharp Button</div>
There seems to be another CSS script that is manipulating the border-radius property.
To have sharp borders, use:
border-radius: 0;
The code you were using just sets the border's thickness (3px), style (solid fill), and color(#bada55), not the radius.
If this does not do it, try tracing down what other CSS script is manipulating the border radius, or just use the !important directive to override:
border-radius: 0 !important;
border-radius: 0;
or border-radius: 0 !important; if your CSS is being overridden.
Setting border-radius to 0px should give you straight edges on the button
I am having some custom css issues, that I would really appreciate some feedback on.
Here is the link to where I am experiencing the issue:
http://bookemcreative.com/testsite/regal-pocket-cards/
You will notice there is a drop shadow under the "View Products" button/link, which I do not want. I have tried to apply some custom css to this using the firebug inspector, but can't figure out what I am doing wrong. I am still learning css, so would appreciate any feedback. Here is the css I tried:
a.button.product_type_grouped {
text-shadow: 0px !important;
}
Have you tried
a.button.product_type_grouped {
text-shadow:none !important;
}
As 0px is not a value that text-shadow property will be looking, so use none instead of 0px, You can see full documentation of text-shadow here
use instead text-shadow: none with a more specific rule (since it's better to avoid an unnecessary use of !important)
#wrapper .button.product_type_grouped {
text-shadow: none
}
which is more specific than the rule you have previously defined
#wrapper .button {
text-shadow: 1px 1px 1px #c72c34;
}
0px isn't a valid value.
Try this:
a.button.product_type_grouped {
text-shadow: none !important;
}
http://i55.tinypic.com/3325gyo.png
This grey border appears when you focus on the text field. I've tried outline: 0 which doesn't remove it. Any suggestions? Thanks
You can do like this:
input:focus {outline: none;}
There is a grey border that is automatic in chrome but it is just a regular border. Get the class or Id of the input and just put border:none; The input:focus as someone else has said is the selector to remove the border on focus. Hope this helps someone, automattic styles can be a nuisance sometimes.
I managed to fix this by styling the tag:
<fieldset>
to border: 0;
As said by allanb in the comments of this answer, the culprit is the css property 'box-shadow':
:focus {
outline: 0;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
I am designing home page of my domain registration website and I am stuck at one place. Please go through the website at http://a2host.in/
In Firefox and Google Chrome the Search and Go Button are in same alignment with the text and select box but in Opera and IE8, they are falling down a bit.
I have tried out all the things but I am not able to figure out the actual problem.
I see a lot of unneccesary styling. In essence, this is what you want:
Basic form without floats
You can tweak the font-sizes and colors here, until you have what you want. But this is a good starting point, because it is cross browser identical.
Also, think about using the <button> element instead of the <input type="button">. It gives you more freedom in styling.
Form-controls are a pain to get them look good in all browsers, especially buttons and select-boxes.
Please comment out the following CSS3 properties (please see below) in the .regbutton class of your stylesheet and then try
.regbutton, .regbutton:visited {
background: #222 url(/getImage.php?src=myUploadedImages/overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
/*-moz-border-radius: 6px;*/ /*comment out all CSS3 properties*/
/*-webkit-border-radius: 6px;*/
/*-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*text-shadow: 0 -1px 1px rgba(0,0,0,0.25);*/
/*border-bottom: 1px solid rgba(0,0,0,0.25);*/
position: relative;
cursor: pointer;
}
try to set border:none for your buttons