Why is my GWT DialogBox Transparent - css

I want to use a DialogBox within my GWT Application but it is transparent! What do i need to do ?

You can set the Style in your CSS to be not Transparent, the class shout be gwt-DialogBox.
.gwt-DialogBox {
background-color: #FFFFFF //White
}

Have you included a default gwt theme in your module?. Default gwt theme includes some default css-ing for certain widgets.
<inherits name="com.google.gwt.user.theme.standard.Standard"/>

Is it really transparent or are those fields that appear to be seen through it actually in the foreground? I.e. can you click those other fields?
Then it may have to do with the z-index of the dialog box. As a quick and dirty fix, try setting the z-index in the css file or with code like this:
mydialog.getElement().getStyle().setZIndex(1000);

Related

PrimeNG styling/theming

Looking for some advice on how to change the styling/theming for the background of the primeNG panel component.
I tried to overwrite using the names below in my scss file for the component. However that did not work. Inline I tried
<p-panel header="Test" [style]="{'background': '#20A8D8 '}" [toggleable]="true">
It just changed the background of the component, not the title header. Wondering if anyone has stlyed/skinned any of the components and can help explain to me how to do it.
These are available for the Panel - just not sure how to access/overwrite them:
ui-panel Container element.
ui-panel-titlebar Header section.
ui-panel-title Title text of panel.
ui-panel-titlebar-toggler Toggle icon.
ui-panel-content Content of panel.
Thanks
I used :host::ng-deep before my style class to overwrite primeng styles.
:host::ng-deep .styleClassName{ background-color:#005DAA; }
Override PrimeNG components' styles with styleClass property and you have to put your style in the root styles.css or styles.scss (if you're using SCSS).
My style overrides PrimeNG Panel Footer style:
.editClientPanel .ui-panel-footer {
background: linear-gradient(to bottom, #f6f7f9 0%, #ebedf0 100%);
}
Hope it helps or if you're way past the issue, hope you learned something you didn't.
It's simple, use them as classes in your css file like the following:
.ui-panel-title {
// Your css code for Title text of the panel.
}
Hope it helped

Trying forever. Can't change CSS font color

I seriously have worked on this FOR-EVER!!!
Why the heck isn't my menu color change via the CSS?
I don't know if it's the Wordpress theme interfering or what, but I need a fresh pair of eyes on this website: http://rivercityhopestreet.org/
Help!!!
GoingBananas
You should learn how to use web debugging tools. For chrome it's right click -> inspect element. Then you can find Your menu element and see what's setting the styles.
In added image You can see that Your style is accepted, but overridden by style in index file. Either it's style in php file itself or some Javascript.
You can either change the setting in the index file or (not the best way) set it to background: #40c2a6; !important` in your style.min.css
Also if You cannot figure something out, in Developer Tools click on the Html element, then click on "Computed" on the right side and then click on the specific style - it will show you where that real value is set at.
Hope this helps You in the future!
#menu-primary-items>li a {
color: #888;
}
search this and change the color..
Edit this in custom css.
#menu-primary-items>li a{
color : #000;
}
if it not works then put !important in color attribute.

Make Default Buttons Look Like Normal Buttons

I have a JavaFX button that has been set as Default Button so the user can select it with the Enter key. Currently, it has a blue background:
But I'd like to make it look like a normal button:
I took a look at the JavaFX CSS Guide and it looks like there's only one feature to override (-fx-base).
But changing this feature has unpredictable effects—sometimes it eliminates the button's gradient; sometimes it makes the button transparent.
Is there a simple way to just get rid of the Default Button styling?
My guess is that you are looking in the wrong style sheet. The old default style sheet caspian.css was replaced with modena.css. So setting default value for -fx-base from modena.css should fix the issue:
.button:default {
-fx-base: #ececec;
}

Change background of Input

I start from this default theme (blucristal)
https://openui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.InputAssisted/preview
Now I want change the background of the editable input from white to (for example) yellow. How Can I do?
I would like use Ui theme designer but I can't find the correct property to change
Any visual customization of standard controls can be done with help of CSS.
Redefine property of standard class
.sapMInputBaseInner{
background-color: yellow !important;
};
It will change background color for every intup. Or you can create your own CSS class
.UserClass .sapMInputBaseInner{
background-color: yellow !important;
};
And using method addStyleClass() add "UserClass" only to specific elements.
You may use CSS pseudo class for this purpose. Like this
form input[type=text]:focus{
background-color:red;
}
It will change the background-color of textbox from white to red whenever you click on it.
Here is the example http://jsfiddle.net/e284q9fv/

jQuery UI button: How do I override the classes used for a single button?

I am using the jQuery UI library out of the box, based on a theme.
Having links rendered as buttons is great, however I need to override some buttons with different colours.
How do I specify an specific class for a particular button to use?
I recommend looking at the CSS for the jQuery UI buttons and duplicating the structure of the CSS which specifies the buttons, but with your own class instead of the jQuery UI classes. Make the overrides that you need in this CSS and include it after the jQuery UI CSS. CSS uses a combination of the most specific selector and ordering to determine which values to apply. By doing this you will make sure that you have the same specificity for each of the CSS selectors used by jQuery so that your CSS takes precedence based on order.
Smashing Magazine has an article that probably has more information than you care to know about the specificity issue.
You can also:
Use Developer Tools in the browser (Chrome has great ones).
See what class from jQuery UI defines the button color.
Override it in your CSS file with the "!important" attribute.
For example, when I needed to override jQuery UI spinner control and remove the borders, I found the class that defines the borders using Chrome Dev Tools. Then in CSS: I added something like that:
.<jquery-ui-class-that-i-found> { border: 0px !important; }
Works great!
I would say, give the particular button or buttons an id, and:
$("#buttonId").removeClass().addClass("myClass");
If you want to apply it to multiple buttons each with its own id:
$("#buttonId, #anotherButton").removeClass().addClass("myClass");
I think the button API should include a configuration like this where you can change color etc. by passing parameters
$("button").button({background:"FFFFFF",hover:"FFFFF"});
this is just an idea where you can change some of its visual attributes.
I found this worked for me:
$(".btnSave").removeClass("ui-state-default").addClass("SaveButtonStyling");
Basically needed to remove the ui-state-default class and then add my own for the background colour etc.
Thsi meant that the rounded corner class etc stayed put and I was able to amend the background colour etc.
If you simply wish to have some additional/different for particular buttons, simply give the buttons some classes like class="mybuttonclass otherbuttonclass" - multiple classes are allowed. Then, just add css rules for your class(es)
.mybuttonclass
{
background-color: red;
}
.otherbuttonclass
{
color:white;
}
thus the background is red with white text - or whatever combination you wish, which would override items in the cascade (CSS) above it. (assumption is that your .CSS file is linked in AFTER the jquery UI css file, or is in-line on the page, both of which would override the jQuery UI css.

Resources