We Keep Coding

Apply css style to all primeng dialogs in my angular app

I am using prime ng dialog all over my angular application. I can change each specific dialog style by using ng-deep. For eg I have contact us page for which I have these files:
contact.html
contact.component.ts
contact.css
So I place the below css in contact.css and it changes the contact us dialog title bar color.
:host ::ng-deep .ui-dialog .ui-dialog-titlebar{
background-color: red
}
I want to do this for all the dialogs in my application, how can I do this? I placed the same css in style.css file in src folder and it didn't work.

So angular components by default employ a very handy strategy of Style Encapsulation which makes it so that styles don't bleed out into other components and cause unwanted effects.
You can utilize ng-deep like you have to allow styles defined within it to be inherited by child components of where it's specified.
However for things to be globally inherited you'll want to define them highest up in the order of inception so those styles cascade down to selectors below. In a default angular application that's not using SCSS or another pre-processor one of the easiest ways to do this is to add them to one of the first files initialized that hosts the child components such as index.html or app.component to allow components initialized afterwards to inherit them when they're rendered.
Hope this helps, cheers!

Does the indigo pink theme get completely initialized when running ng add #angular/material and scss?

When running ng add #angular/material it asks what css framework and theme we want. I selected indigo-pink and scss. Do we need to do anything else, or do the material components just get the theme applied automatically?
With normal css (No CSS framework) we add this to styles.css:
#import “~#angular/material/prebuilt-themes/indigo-pink.css”;
I'm assumed would Angular just does this automatically now since the CSS theme is included in angular.json, however I'm not seeing styles being rendered automatically. Here's a screenshot of the stepper:
Tried adding the below to styles.scss but the error is still there:
/* You can add global styles to this file, and also import other style files */
#import '~#angular/material/theming';
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
#include mat-core();
Update
I generated a brand new project and tried the minimal setup I have above with the same choices and now it works, so I probably made a small mistake somewhere. I'll leave this up in case anyone comes across a similar issue.

If it were an scss file there might be a difference because there might be variables in it that you would want to reference in your styles file. Since it is a css file the only difference could possibly be the order.
If you have rules in styles.scss they could be overridden by the indigo pink styles but this would happen only if indigo pink comes after your style sheet in angular.json.

How to remove wordpress theme to override plugin css and js

guys!
I have a wordpress website that has installed Kalixo Magazine theme. I tried to install several widget menu plugins with interesting designs, but always the design( i think the css and js/jquery) is the default one from the theme.
How can I stop my theme to override the css of widget menu plugin so I can have a unique menu on my sidebar ?
Thank you in advance!

I think the problem has anything to do with your theme, rather it is with the plugins. I suspect that the plugin authors has not set a priority when they registered/hooked the stylesheets to wp_enqueue_scripts hook. This will cause the plugin style to load to early, and all styles later gets overridden by the themes' stylesheet
I would suggest, create a child theme, and then copy the complete stylesheet from the plugin to your child themes' stylesheet. The child themes' stylesheet will be loaded lastn so give this a try

The Best way to do this is de_register that plugin CSS from your WordPress site and then add the CSS of that plugin into your main style.css file. This way it will take only a single css file to render all the styling and will not overload your website.
add_action( 'wp_print_styles', 'my_deregister_javascript', 100 );
function my_deregister_javascript() {
wp_deregister_style( 'contact-form-7' );
//wp_deregister_style( 'digg-digg' );
wp_deregister_style( 'wp125style' );
}
and then load your style.css file using script_enque method for better result

you can fix this problem customize by your plugin style sheet. if you don't know your plugin, you can find it in this path wordpress\wp-content\plugins ....

use twitter bootstrap under a class

I have website built with many custom css styles in some css style files.I want to use twitter bootstrap in the website.but if i include it in my pages like -
<link type="text/css" rel="Stylesheet" href="assets/css/bootstrap.css />
so as you can guess because of this many styles and classes overwritten by bootstrap class and styles and so is lot of problems.so if there is way i can use twitter bootstrap css and js under a class?
I just can add my class name before every class in bootstrap.css file but that is time consuming or i go for it?? from web research i found -
.tw-bs {
#import "less/bootstrap.less";
}
by using lesscss.org.but i did not get yet how do i compile things in my windows pc so i can use twitter bootstrap under .tw-bs class only in my site.if anyone know step by step, save my time.

The best thing we have found is to use a separate CSS file where you deliberately overwrite some of the Bootstrap styles with what you want/need. For example, the default buttons in Bootstrap have rounded corners with a 4px radius. We decided that we wanted a more rounded look, so we put the following into a CSS file:
.btn{border-radius: 10px;}
When you reference your file AFTER the Bootstrap file it will overwrite the default Bootstrap values with yours. Sometimes the Bootstrap specificity is very hard to over-ride, in which case you'll need to style by referencing the ID of the element directly (which is more specific than classes.)

jQuery UI and using/not using themes

We're using jQuery UI Tabs at the top of the page (with no themes, using our own styles in the screen.css file) and using jQuery UI Datepicker later on down the page.
We want to use a jQuery Theme for the Datepicker, but we want to use our own styles for the Tabs. But as soon as we include the Themes, it (obviously) styles both completely in a particular style.
Is there anyway of setting a jQuery UI component to have a theme or not? Some sort of configurable? Or is it purely about the style class names and doing what you need there? ... It's just having blank (no themes) is easier to style from, then trying to undo what the Theme stylesheets are setting...

jQueryUI completely relies on the class names currently imported to the html page. They all of start with ui-
Since it's just plain CSS you can do one of two things:
cut and paste the classes you want from the theme's css into your own css file.
import the theme's css file and overwrite the classes you are interested in with your own css.

Check out the Advanced Theme Settings link on the right side of this download page, right under the theme dropdown box. There you can define a CSS scope to limit your theme to a particular portion of a page.
Then you just need to put that css scope class on a parent of the datepicker.