How can I change the borders of Mask div ?, I am using 3.0.6 gxt.
final Portlet portlet = new Portlet();
portlet.mask("Loading Requests ....");
I want to add the style to say not to show any borders in the mask div, how to do that ?
I tried to override ext-all.js with my css, but didn't work (hoping x-mask & x-mask-msg are the css class names )
.x-mask {
border: 0px solid #a3bad9 !important;
}
.x-mask div {
border: 0px solid #a3bad9 !important;
}
.x-mask-msg {
border: 0px solid #a3bad9 !important;
}
.x-mask-msg div {
border: 0px solid #a3bad9 !important;
}
I think you are going to have to create an appearance. Here is Sencha's guide to doing that in gxt 3: https://docs.sencha.com/gxt-guides/3/concepts/appearance/Appearance_3.html
The appearance that you'll want to override should be Css3MaskAppearance. I'm not sure which part of the .css it will go in, I'm guessing .mask or .box but you should be able to add borders: 0px; and they should disappear.
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
Let's say I have a Button with the following CSS style:
Button {
border:2px #eee solid;
border-top-width: 5px;
}
This will generate a button that has a 2px border in color #eee, except the top border will be 5px in thickness.
Now, let's say I have another button that inherits this style, but for this new Button I would like to remove the border-top-width property.
So my question is, how can I set border-top-width to null or to listen to the default border style? The following doesn't work but shows what I'm trying to do:
Button.class-name {
border-top-width: auto;
}
Note that in my situation, I can't just set the value to "2px". I need to remove the value entirely. I've tried "auto", "inherit", "initial", etc... and nothing seems to remove the "border-top-width" property...
Any ideas?
CSS proposes an initial value which would reset it to the default value for the browser.
There is no way (and no proposed way) to set it to the value set by the previous but one rule that set it.
If you want it to take the value from border:2px #eee solid; then you must explicitly set it to 2px.
If you were using a CSS preprocessor, such as SASS, you could use a variable:
$defaultBorderWidth: 2px;
Button {
border:$defaultBorderWidth #eee solid;
border-top-width: 5px;
}
Button.class-name {
border-top-width: $defaultBorderWidth;
}
You could also use this technique with native CSS variables.
You can just use the class to set the width of the button that should be 5px on top:
button {
border:2px #eee solid;
}
button.class-name {
border-top-width: 5px;
}
You can, also, use the :not() CSS selector:
button{
border:2px #eee solid;
}
button:not(.normal) {
border-top-width: 5px;
}
Fiddle
You can use like this if you want your top border-top-width is null;
HTML code
<button>Press me</button>
<button>Hit me</button>
<button class="leave-me">Leave me</button>
CSS code:
button{
border:2px #eee solid;
border-top-width: 5px;
}
button.leave-me{
border-top-width:initial;
}
JSFIDDLE
Eighter you put the border-top-width on your
button.class-name
Or instead of calling that property on the css, try calling it directly on your html.
Or, you can also, on the second button, call
border-top-width:2px;
I know select boxes are a bit of a pain to style with css, but without resorting to advanced techniques is there anyway I can add some padding to push down the text a bit without it also adding padding to the arrow on the right hand side?
add this to your CSS class. Maybe this helps?
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
Since select boxes appear differently on different browsers and especially operating systems, you cannot guarantee a consistency.
For example, the minimal amount of formatting I can do on a mac is this:
select { height:40px; background:transparent; }
And it looks like this:
#Demilio's answer is great for hiding the default selectbox. With custom styling you can then change the appearance of the selectbox as you wish.
The only remaining problem is the arrows/caret which are also gone, as mentioned by #romainnm.
Unfortunately pseudo elements (e.g. :after) don't work on a select element, so the only way around it is to create an actual element after the select, something like <div class="Caret"></div>.
Add some stylying:
.Caret {
display: block;
position: absolute;
cursor: pointer;
right: 1rem;
top: 50%;
margin-top: -1px;
width: 0;
height: 0;
border-top: 5px solid #000;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
And this should result in a custom styled select box with arrows:
Unfortunately the only downside is clicking on the arrow won't open the selectbox, and that also doesn't appear to be possible to tackle with JavaScript.
Interesting test here
http://cssdeck.com/labs/styling-select-box-with-css3
The author covered the arrow on the right hand side and created its own, using vendor prefixed css to target different browsers. after doing that, your padding is all free.
You can use border to add padding to your select element and outline for adding the border itself
.select {
border: 12px solid #FFF;
outline: 1px solid #000;
}
taking that you have a white background, this will work as 12px padding but it also adds padding to the arrow
select {
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
-webkit-appearance: none;
background-position-x: 97%;
}
I'm using Adam Shaw's fullcalendar jquery plugin and it works really well, after speaking to the graphic designer he wishes to use images instead of fullcalendar's prev,next,today and the three view icons (month, week, day).
Using firebug I've isolated that the "prev" icon, for instance, is using the span class
fc-button-prev
However, when I go to the css and create the class applying a background image:
.fc-button-prev {
background-image: url('../images/prev.png');
}
Nothing happens.
Any ideas would be appreciated
May be you have to define display:block in your class like this:
.fc-button-prev {
background-image: url('../images/prev.png');
display:block;
width:50px;
height:50px;
}
because span is an inline element. So, inline element is not take width , height, vertical margin & padding in it.
In fullcalendar 2.x I had to use the following CSS to change "previous" button image:
.fc-prev-button {
background-image: url(../img/icon_arrow_left.png) !important;
background-size: 100% 100%;
width: 50px !important;
height: 50px !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
.fc-prev-button span {
display: none;
}