I recently have a problem with my application after I add/edit the theme.css file. Some of angular material style is not applied anymore such as position and animations and background color.
What I have done to the Theme.css file:
The original theme.css
After edit, trying to acheive different theme for different user.
After I have modified the theme, so now I can acheive that the app can change the color base on what class is defined in enviornment.ts file.
in app.component.html
however, problem come after.
all dialog/dropdown/datepicker/popup's background became transparent, So I define a class and force them to have a white background.
everything inside a dialog become abnormal, as picture shown below, all input/select has no border, and no material animation when click/active on the input field.
From the picture above, you will see the button has no color style even I have define them.
however, there is no problem if the input field is not in a dialog, you can see the style and animation is still applied as the picture shown below.
Anyone have experienced this? I have been trying to solve this problem for 4 days and still no clue about it.? I would be really thankful if someone could help me.
regard
This problem is because after we adding custom theme class, we have to configure the Overlaycontainer.
This link will help to solve this issue.
https://material.angular.io/guide/theming#multiple-themes
Related
I'm trying to refine the Breeze Dark theme for konsole using custom CSS, but I cannot figure out the selector which gets picked when the konsole content changes and the tab get becomes highlighted (if you know what I mean; it merely means that the unselected tab text color gets changed when the content of the shell changes). Not hover though, as hovering works the over way.
Reading the official documentation doesn't clarify me (I suppose I'm using it wrong, but anyway). Does anyone know the name of the property/selector ?
Also, it would be nice if my custom CSS would be merged with teh default one, overriding only the things that I change, and leaving others intact. I expected this to be the default behavior, but seems like I'm wrong.
Here are some official examples for customizing QTabWidget.
Namely, you would need ::tab subcontrol and :selected pseudo state in your stylesheet. For example:
QTabBar::tab:selected {background: red;}
It's amazing how Angular can hide css, so I don't know how to change a certain color. I am using Angular with Prime ng, specifically I use <p-selectbutton> and I can't find how to change the background for the selected option. Where can I change this? I searched the whole project for the text 186ba0 which is the color for this background, and I couldn't find it! Anyway, this is the screenshot for the caught background CSS element:
Changing the original angular file's not a good practice. Did you try to override it using an !important statement?
If you did, try changing the original file, but beware, if you update your angular application, you'll lose this changes.
I'm working on a web in Wordpress and I have some trouble with the footer. I have three widgets and in the middle one I want to put some social icons. I have tried with different plugins and the problem is the same: first icon shows great but next are showing a weird border and I have no idea how to modify.
Could someone pitch in?
Thank you!
It might be a css style issue. If the first icon looks right, maybe the styles only apply to the first because the icon html elements aren't having the same class or the css selector is wrong (something like icon-class:first-child).
I would check your Browser Dev Tools:
Check if the icon html elements are all having the same class.
If they do, maybe the icon file itself is just ugly. You can check the file in the dev tools by hovering the file URL. If that is the case, the plugin provider should updates the icons.
If the don't have the same css class, you should customize your css, maybe there is a way in the widget plugin.
I got an image, and I want to add a border when I hover the mouse. If it has a fadein animation even better.
But I have no idea how to link a class to my image. where should I define it?. And if I update the Wordpress version, it is deleted?.
You are asking quite a few question in this one issue.
Your first question is how you create a class in CSS. You can read about that here.
The next 'question' is about fading (well, you more alluded to the idea of wanting a transition) - you can read about that here or here.
Your last question is about updating Wordpress; will it affect your custom css. That is completely dependent on how you went about adding the custom css. If the theme gets updated, it might override your changes, if you used some sort of theme customizer, backend custom css module; that also might get overridden, but it is completely dependent on how you go about adding your custom css.
Sorry I didn't get into specifics, that's because I am unsure about your current code.
I'm using the Sencha ExtJS Framework in Version 4.05 and i have the following problem. I am displaying Ext.Grids which have a pagination toolbar at the bottom of the Grid. On the Sencha Sample Page the Grids will display some buttons (first-page, prev-page, next-page, last-page, refresh) with icons on it.
Unfortunately the icons are not displayed in my Grids:
As you can see, the buttons are actually there, and they're working correcrly, only the icons are not displayed.
The references to the images are correct and the images are there and accessible for the browser. (If i view the css of the button in Firebug and hover the imageurl it will display the correct icon).
One thing i noticed is, that for some reason the <span> Element which should display the icon is "grayed out" in the firebug view. (On the Sencha example page it is not).
The CSS of that element looks fine for me:
Note: The complete CSS File used can be found HERE
A short note on the Theme: i made this grey theme (named "documents") just by changing the main colour of the .sass template and compiling the ext-all.css to a new one for my theme. So i didn't change anything with the icons.
Any suggestions what could cause this problem?
Hard to debug without access to the actual code. However, I noticed that both in the CSS you copied above as well as the css link you posted (which was supposedly the whole css), that neither set of css (that I could find) had any reference to the x-btn-icon class by itself, and yet that is the class (along with x-tbar-loading) that is on your grayed out span element. So, what is that class doing? Where is it defined? There may reside your issue.
EDIT: I went to the Sencha website and firebugged an icon on the grid sample. When I deleted the x-btn-icon class from the element, I believe I duplicated your problem. So it seems that the necessary definition of that class is missing from your css. On their site it is defined in the ext-all.css.