I need to style a material date range picker with custom colors, I'm not able to find which class corresponds to the selected range
I've found the selected and changed with
::ng-deep .mat-calendar-body-selected {
background-color: #368EA1;
}
anyone can help me please?
I also need to change the background color when passing over the items
Thanks
There is a new handy browser feature in Chrome called Css Overview. It gives you an overview of the styling properties used in the page components and native html elements. Among these properties it extracts the colors. From the list of the colors extracted there, pick the mat-calender-range color you want to change and it will give you the name of the classes associated with this color. Here is a screenshot of how this can be used with mat-calender.
Related
this is my first question here, hope I am doing this right :)
I am trying to change the colours of the calendar on this page:
https://realsailing3.vanbruben.de/dehler-41-shelter.
But the classes are as long as
.monthly-fluid .ext_month_day_nox, .monthly-fluid .ext_month_day_nox_r, .ext_month_day_nox.morning_occ_nox
or
ext_month_day_nox no_start nocuscol
or
.monthly-fluid .cur_month_day_nox.arrival_day
I have tried to separate them with a dot but i get the message "dont use adjoining classes"
Any idea of how I can change these colours?
Thank you very much!!
code picture
try to add !important with that property.
.monthly-fluid td.reserved_nox {
background-color: #f0c2c2 !important;
}
It shouldn't matter how long the classes are. If you've used an email client such as Outlook before, classes act the same way as tags do in Outlook. You can "categorize" each element as cur_month_day_nox or no_start or nocuscol, or any combination of them. Then when the element is styled using CSS, the file will describe how elements will appear based on their categorizations. Each description is called a "rule."
We want to look for a rule which modifies the background-color, since our objective is to change it the color of the day. While the element is selected in the Inspector, If you look on the right pane called Styles and scroll enough, you'll find the following CSS rule:
.monthly-fluid .cur_month_day_nox {
background-color: #c2dfd0;
}
This style "selects" any elements which have the class .cur_month_day_nox, which is all the green days with the exception of today (at the time of writing, that's February 1st). So, you can double click the color value and change it. You should see all the green days change instantly.
Edit: For a weird reason, the class names are different on your end, but regardless the approach is the same.
I've never used bootstrap or reactstrap and i'm having a hard time understand the documentation.
For exemple i'm trying to change Navbar color and background opacity but since they have reserved keywords to pass as props i don't know where to find them or how does it work! the only thing that worked with Color was color = " white".
I tried to change it using css but it doesn't work i even tried to use the !important but nothing too.
Here's their documentation:
They are using Bootsrap 4
The color attribute you mention here comes from bootstrap conventions. They try to limit the use of some attributes using enums. For instance, the color attribute accepts values such as "primary", "secondary", "warning", "danger" etc.
See here for more details: https://reactstrap.github.io/components/alerts/
I suspect "white" didn't actually work, but rather appeared so. "white" is not in the enum list as far as I know.
The way to customize colors is to change what the "primary", "success", etc colors are.
This helps us to theme a website rather than using random colors all over the website. Using themes help us a lot during the latter part of the website journey.
color property is a className.
Create a class pink-color, for example, set background-color:
.pink-color {
background-color: #f7009d !important;
}
Use this pink-color class as a value for color property.
<Navbar color='pink-color' dark expand="md" fixed='top'>
I'm trying to set an specific CSS just for a certain item on my form. I would like to make it bold and in a different color. I used the following statement. Why is it not working?
myStaticTextItem.setCellStyle("color:#FF0000; font-weight: bold;");
You can use setTextBoxStyle to assign CSS class to your input box of that element.
There are additional methods for assigning CSS classes for special parts of element like title, hover, hint and picker icon. More here.
Where can I find the aspNetDisabled class default properties system color values? A ddl/select control background property is not "grayed" out when ddl.Enabled=false. For aesthetic purposes I want it to look similar to other disabled controls.
I can change the background of a DDL in the css with:
Select.aspNetDisabled
{
background-color:ScrollBar;
}
Setting all background colors to the same value like this:
.aspNetDisabled
{
background-color:ScrollBar;
}
[surprisingly but makes sense now] is not a solution. Radio buttons and checkboxes have more than its "input area" grayed since the background for them consists of more than an input area. A rb becomes a grayed out square with a grayed out circle. I have tried ever possible SYSTEM COLOR that is available in VS2010 style builder color picker and none of them match. I can view the source and get the color there, but a hard coded value will not necessarily be identical on different machines. I like the default functionality of the aspNetDisabled class and only need to override the background for ddl's.
The aspNetDisabled deafult grayed out system color is "ButtonFace [in .css and buttonface from source]! I wrote a Javascript function to get the background color of a disabled TextBox. I tried the same code yesterday, but failed because of browser specific Javascript functions.
Chrome did not like the property string I was passing to currentStyle[] - received an undefined property error:
var txtBx = $get('<%=txtBx.ClientID %>');
var prop = "background-color"; //also tried backColor and many other variations
strValue = txtBx.currentStyle[prop];
alert("strValue" + strValue);
The getComputedStyle method worked, but of course that is not what I wanted. I ran the same Javascript using ie and was able to get the currentStyle[prop] value.
aspNetDisabled is simply a variable for a class/.css. It would be nice to be able to see its values. I searched the Framework and the "net" yesterday for any related .css files/classes and for the string "aspNetDisabled". The only matches I encountered were aspNetDisabled in WebControls.cs and a WebAdminStyle.css under the 4.0 dir. I also tried to use the debugger, but could not find the style properties for "txtBX" as I expanded each layer.
I guess writing Javascript a function to loop through all properties for each type of "disabled" control would accomplish that. There is probably a way to write a .net class to find all properties and their values of a .css class too.
It is unclear to me why the background color of a DDL does not get modified when disabled...
I hope this helps someone!
I have few questions on styles (Themes). Presently i get a blue colored theme in all my window and panels. I want to change this to Pink. How can i do that ?
I read about swapStyleSheet( String id, String url) : Void but, i am not sure how to use it.
2.) I also need to know how to change the colors of labels/form panels etc, I want all the styles to be on 1 page, rather than adding it as an attribute in labels/form panels. (eg: fieldStyle: 'background-color: #ddd; background-image: none;')
Although I have not created a custom theme, there is a themeing guide located here: http://www.sencha.com/learn/theming/ that will give you very powerful tools to create your theme instead of styling individual components.