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
Related
I'm using the pre-built purple-green angular material pre-built theme with .css. I'd like to use a white background but can't seem to change from the dark grey background. I've tried removing class="mat-app-background" in the body tag of my index.html, but no impact. Do I need to move to .scss to make this change?
Thanks
Pete
element {
background: white !important;
}
If nothing else you have tried works, maybe try this one. It will override all previous styling rules for the specific property.
I'm a new user of GWT and I'm looking for some advice concerning "theme management".
I have to make a website that can handle theme changes. What I mean is that a user can make is own theme by filling a form, then the website will automatically and dynamically changes its color to display the new ones.
I thought using a CSS sheet for all the static properties and using some GWT lines (e.g. label.getElement.getStyle.setColor(...)) to change color. But I have many "hover" properties and I think creating many MouseOverHandler is not a good idea ...
Is there a way to edit CSS sheet dynamically or a magic trick to do that ?
Thanks.
You have many options - the most straight forward (to me) is to make use of the existing CSS classes that GWT introduces. If you look at javadocs for any of the widgets GWT provides, you'll notice the CSS Style Rules section. For example, Button:
.gwt-Button
the outer element
That means that every Button you add to the page has a .gwt-Button style applied to it. If you inject a CSS stylesheet with a rule that overrides this style:
.gwtButton {
background: red;
}
All your buttons will turn red. You can inject stylesheets using StyleInjector. Creating the stylesheet's content dynamically is up to you - but it's just text, it shouldn't be hard (but make sure the generated CSS rules are valid!).
To get you started, try hooking up this code to some button and see if clicking it triggers changing all the Buttons on the page red:
StyleInjector.inject(".gwt-Button { background: red; }");
If you have custom widgets that you want styled differently, just add an individual class to them (.customWidgetWhatever, like Button has .gwt-Button, etc.) that you will include in your custom stylesheet.
Make sure you understand how CSS works and what it can do for you. For example, if you want to style each button the same, you don't have to change each button's style individually, just use:
button {
background: green;
}
And all the <button>s will turn green.
The easiest way to change themes without reloading the whole application is to assign a theme class to the body element.
You'd want to prepend each CSS class in your app with a particular theme, e.g.:
.theme1 .myClass {
color: red;
}
.theme2 .myClass {
color: blue;
}
Then you'll apply a particular theme to the body element:
<body class="theme1">
When you want to change themes, you'll have to change the body class so it will become:
<body class="theme2">
this way, each element that has class myClass will have its color changed from red to blue.
You cannot edit a CSS file dynamically, but you can inject CSS style either as a new CSS file, or directly into your document.
For example, you can define all key CSS rules in your "main.css" file, and add your user-defined rules directly into the host HTML page with a style tag.
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);
I have been trying to change the background image of the wordpress theme but i am unable to change it.
I tried:
body {
background : url('images/squad.jpg');
}
I placed this code under design-settings in custom css styles. But i do not see any changes
in wordperss stylesheet file, search for body and html selectors and check if any background applied to them.
in html selector add this property:
backbround: #fff url(imagePath) no-repaet top left;
you can change #fff to the color that is more related to your background image. it's not necessary, but it's best practice.
if your background image is a pattern and you want it to be repeated, change no-repeat to repeat this should work.
Is your css file is in separate folder?
try this
body {background : url('../images/squad.jpg');}
I'm using jquerys autocomplete widget but I'm having a few issues trying to style the box that drop down when you search for something.
I'm trying to move the box down a bit and change the border/bg color but some JS is adding in some embedded styles which are overriding my .css styles. But I can't find it.
I'v based mine off this one.
<ul class="ui-autocomplete ui-menu ui-widget-content" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 11; display: block; width: 139px; top: 44px; left: 1101px; "><li class="ui-menu-item" role="menuitem">
In order to avoid using !important you could add your styles with jQuery and override them in that way.
$('ul.ui-autocomplete').css({
color: 'red'
});
Another solution would be to remove the style attribute from the ul.
$('ul.ui-autocomplete').removeAttr('style');
Without seeing your css styles, or the order you are loading the .css files, you could override the styles by using Firebug to inspect which classes are applied, and adding !important; to your main css styles.
Ex.
ul.ui-autocomplete {
color: red !important;
}
The best way you can combat this is to properly track down if your jQuery plugin has any parameters to help you, or strip the JS yourself and add your own CSS styles.
The above !important; rule can be a nightmare, it is a hack in a sense - but it may work for you.
Try to add margin-top and margin-left in your css
Overriding the top and left value is no good, because it is calculated in regard to the text field it derives from.
I'm really not a pro in jquery but I take a look around in the example you sent and the style of the menu is all givent by a menu style sheet (jquery.ui.menu.css). Look at the link below and there is some info that can help you I think.
http://docs.jquery.com/UI/Menu#theming
You will be able to customize the look and feel of your dropdown in these class.
«If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.menu.css stylesheet that can be modified.» From jquery website.
try using position or append to option...
you can refer here...
http://jqueryui.com/demos/autocomplete/#option-position
Check out the file jquery.ui.theme.css,
the class .ui-widget-content near the top can be used to put a background colour on the autocomplete search results box, borders and positioning can also be tweaked through this class.