How Do I Fully Customize Angular Material Subheader Component? - javascript

Hi I'm very confused about how to style angular material components (angular 1.4).
I basically took the source code from the material site here and dropped it in my project:
https://material.angularjs.org/latest/demo/subheader
I wanted a list with sticky headers so this component is perfect. However, I need the colors to be different- very different.
For example, I need the background to be transparent dark gray and the text to be light gray.
If possible, I'd like to change the scroller thumb color too. So, is this even possible? I tried using a custom theme, but it seems to only affect the header color.

If you downloaded the whole pack you will find in the /modules/closure a directory list of all the components. In the subheader folder you can find the subheader-default-theme.css file.
.md-subheader.md-THEME_NAME-theme {
color: '{{ foreground-2-0.23 }}';
background-color: '{{background-color}}'; }
.md-subheader.md-THEME_NAME-theme.md-primary {
color: '{{primary-color}}'; }
.md-subheader.md-THEME_NAME-theme.md-accent {
color: '{{accent-color}}'; }
.md-subheader.md-THEME_NAME-theme.md-warn {
color: '{{warn-color}}'; }
add it to your material_custom.css
set these to the values you prefer and then use the md-THEME_NAME_YOU_CHOOSE on the elements you need.
If you need further styling, inspect the element and add the style in the themes you already set.

Related

change standard background color

I have a calendar on my site where the user can select a time range. I'm using the react-advanced-datetimerange-picker library for this, but I'm changing the library's default styles and ran into a problem.
I would like to change the background color in the box that I marked with a red arrow in the photo below. I also took a screenshot of the developer panel so you can see the styles and markup.
It seems like an easy task, but I've tried many options with no success.
What do I need to write in my .css file so that I can change the background color?
https://codesandbox.io/s/hopeful-khorana-gbjuiz
Simply change the background from #FFFFFF to any color you want!
There are many methods to achieve that
As seen in the screenshot
The input has a class inputDate
First Method
**
Assuming u want to set the background color to orange.
.inputDate{
background: Orange;
}
Another method:
You can use inline styling by adding style="background: orange" to the input
<input style="background: orange" class="inputDate"..... />

Angular Material paginator hides the buttons and number of pages by the global background color

I implemented material paginator and the number of items per page and buttons(next and previous) are hided by the global backgroud color. I have attached 2 images and global background color of one of them is deactivated and can see the number of pages and buttons(next and previous).
I need to keep the background color and make visible the number of items per page and next and previous buttons.
I did read few releted articles and made few changes for example,
::ng-deep my-style-class {
background-color: unset;
}
All of them were not worked.
Can you please give me a suggestion to make visible number of pages and next, previous buttons without disabing the global background color.
The reason why it's not working is that this code is expecting a class called mat-paginator and mat-icon-button.
::ng-deep .mat-paginator .mat-icon-button
{
background-color: YourColor;
}

I need assistance using the WordPress storefront theme/woocommerce via styling specific page children

This problem could not be only for the WordPress cms, but also any other page.
I need assistance using the WordPress storefront theme/woocommerce via styling specific page children.
There are three categories in the navigation tab for someone to hover over where a dropdown list will occur for each tab with different pages/items related to the category being hovered over.
All the pages within each tab/category on the nav bar should have a different background.
Example: If I hover over a nav tab "shoes" a drop down list will show different several shoe brand: Nike, Adidas, Sketchers. All the pages that are on the Shoe tab should have the same background color of red.
Another nav tab might be Hats whereon after hovering a drop-down list of several hat brands show. All the pages in that hat tab should have the same background color of blue because it is of the hat tab.
I do not see any html tags in the DOM with specific classes to put css so all page elements will get the same effect.
Example:
.container .hats {
background: blue;
}
There are no elements where I can apply the styles to. if I just used .container, then all pages will get the same color.
Any help?
EDIT
My bad, I was not specific in my question.. It is not changing the nav background colors ex: but when the user clicks on a specific brand "nike" under the main tab "shoes", the page that that gets loaded into the browser will display products of nike in a red background.
I found another post which helped in changing the specific CSS.
Change CSS when the current URL contains a certain string
Using JavaScript, you are able to search for specific parts of the url.
If the URL contains the term or index you want, you can make changes the elements on the documents.
<script type="text/javascript">
$(document).ready(function () {
if (window.location.href.indexOf("hats") > -1) {
$(".site-content").css("background-color", "red");
} if (window.location.href.indexOf("shoes") > -1) {
$(".site-content").css("background-color", "green");
}});
</script>
The downside I noticed was that the page does not update the specified css immediately but a small delay is seen between the background color change.
Alternatively, you can use plain css targeting the product class in the body for each item. It will be tedious if you had a lot of pages, but the provides no delay in changing the background colors from default to the set value.

Configuring a dark theme for Angular Material

I'm working on a design for my webapp, and I'd like a dark theme similar to that seen here.
Sadly I've found the Angular Material Theming Docs very hard to get my head around; no mention of where each colour will be used, how to set a background color or a text color etc.
I'm currently using:
.config(function($mdThemingProvider) {
$mdThemingProvider.definePalette('coolpal', {"50":"#d9ddec","100":"#a6b1d2","200":"#8190bf","300":"#5468a5","400":"#495b90","500":"#252830","600":"#354168","700":"#2a3453","800":"#20283f","900":"#161b2b","A100":"#252830","A200":"#a6b1d2","A400":"#495b90","A700":"#2a3453"});
$mdThemingProvider.definePalette('accentpal', {"50":"#ffffff","100":"#bfe7f7","200":"#8dd5f1","300":"#4ebee9","400":"#32b4e5","500":"#1ca8dd","600":"#1993c2","700":"#157fa7","800":"#126a8c","900":"#0e5570","A100":"#ffffff","A200":"#bfe7f7","A400":"#32b4e5","A700":"#157fa7"});
$mdThemingProvider.definePalette('warnpal', {"50":"#f0fdf9","100":"#adf4dc","200":"#7bedc7","300":"#3ce5ac","400":"#21e1a0","500":"#1bc98e","600":"#17ae7b","700":"#149368","800":"#107855","900":"#0d5d42","A100":"#f0fdf9","A200":"#adf4dc","A400":"#21e1a0","A700":"#149368"});
$mdThemingProvider.theme('default')
.primaryPalette('coolpal').dark()
.accentPalette('accentpal')
.warnPalette('warnpal')
.backgroundPalette('coolpal')
})
With a bit of hacking of colours this works ok, but if I look at the colors in an md-toolbar, the text is set to rgba(0,0,0,0.87); and I have no idea how to change it; I assumed it would come from somewhere in my coolpal theme, but it's not. Here's how my text elements are being styled:
How can I alter $mdThemingProvider to ensure the text is a light color rather than opaque black?
I would suggest extending an existing palette, much easier.. such as;
var myPalette = $mdThemingProvider.extendPalette('indigo', {
'500': '183863'
});
$mdThemingProvider.definePalette('mine', myPalette);
$mdThemingProvider.theme('default')
.primaryPalette('mine').dark();

Disable CSS Styles in Google Maps (3.14) Infowindow

In google maps version 3.14 there are some new css rules added for the custom infowindow. I use the infobox plugin and now many of my elements styles are overwritten.
For example:
.gm-style div,.gm-style span,.gm-style label,.gm-style a {
font-family: Roboto,Arial,sans-serif;
font-size:11px;
font-weight:400
}
.gm-style div,.gm-style span,.gm-style label {
text-decoration:none
}
.gm-style a,.gm-style label {
display:inline
}
.gm-style div {
display:block
}
.gm-style img {
border: 0;
padding: 0;
margin: 0
}
Is there any way to change that except that I have to overwrite this google styles via "!important"?
EDIT:
The font "Roboto" will be also loaded. If you care about performance, then that is not really great.
EDIT2:
Ok, !important isn't necessary. Overwriting the google styles is also possible with increasing the specificity of the CSS selectors. But this doesn't change that I have to overwrite all google styles. And the roboto font will loaded too.
From what I can see the new css rules are guaranteed to break styling for all markers, controls and info windows web wide, so maybe this will not remain in the 3.exp version long enough become part of an official release. In the meantime to protect you self against breaking changes like this. You should probably do two things:
1 Set a version on your link to the maps api. Something like
<script src="http://maps.googleapis.com/maps/api/js?v=3&libraries=geometry&sensor=true" type="text/javascript"></script>
will make sure that you are always accessing the current release version of the maps API. If you want to be more conservative you can specify the major and minor releases as well. If you specify a major and minor version then you can test updates to the maps API as part of your regular release schedule. If you are accessing the maps API as part of a wrapped mobile application then you cant control when your users update your app, so you will probably want to just set v=3 and then try to insulate your app from changes in the maps css (see 2. below)
2 Style your markers, controls, or info windows so that you better control the styling. For example, if you have a marker with html like
<div class="my-marker">...</div>
You can prevent the maps API from setting you font size by a css rule like
div.my-marker {
font-size: 18px;
...
}
Note, given maps API styles like
.gm-style div {
font-size: 11px;
...
}
you will have to specify the absolute sizes of you elements, relative measurements, like em's wont protect you against potential changes to, for example, font-size: 11px;
I had the same problem and Emads answer worked well for me after I addet a event listener.
google.maps.event.addListener(map, 'idle', function()
{
jQuery('.gm-style').removeClass('gm-style');
});
The problem is I still can't see any way to stop google loading the Roboto font.
EDIT: Well... there is a pretty easy way, to stop that.
Just use GET to load an older version of the google API like this:
<script src="http://maps.google.com/maps/api/js?v=3.13&sensor=false"></script>
In this API verion, google won't change the gm-style at all. So you don't need to override any classes or styles.
jQuery('.gm-style').removeClass('gm-style');
OR
find this in file /wp-content/themes/rentbuy/js/scripts.js
<div class="overlay-simple-marker"
and replace it with
<span class="overlay-simple-marker"
InfoBox also provides style element in options
var labelOptions = {
content: label,
boxStyle: {
//Insert style here
},
.
.
}
For those following this issue, please see the post by google in this thread:
https://groups.google.com/forum/#!topic/google-maps-js-api-v3/zBQ-IL5nuWs
This is a breaking change in version 3.14, because the elements are now styled by CSS rather than inline.
The default fonts used in labels and UI elements has changed. UI
elements are styled with CSS by the API, which means that custom CSS
that targets DOM elements on the map may require some adjustments if
you would like these to apply instead of the new default styling.
See changes in visual refresh for further details.
This is not a very good move by Google maps, because of the use of descendant selectors (on a div child!), which are not at all efficient.
To fix this you will need something quite specific like the following:
Given HTML
<div class="gm-style">
<div class="myClass-parent">
<div class="myClass">Lorem ipsum dolor</div>
</div>
</div>
Try something like
.myClass-parent > div.myClass
{
font-weight:600;
}
Simply styling div.myClass may not work.
I too have been struggling with the added gm-styles and Roboto font loading since 3.14 was introduced.
Found this issue reported as a "bug" on the google maps API codebase. Please star and comment on it at http://code.google.com/p/gmaps-api-issues/issues/detail?can=2&start=0&num=100&q=font&colspec=ID%20Type%20Status%20Introduced%20Fixed%20Summary%20Stars%20ApiType%20Internal&groupby=&sort=&id=6078
In response to dorr Baums solution, for those using prototype js you can use the following to remove this class.
google.maps.event.addListener(map, 'idle', function() {
$$('.gm-style').invoke('removeClassName', 'gm-style');
});
Since Google changed the behavior of older versions it wont work anymore to load v1.13.
The new styles and roboto-font will always load. My new solution is to save every stylesheet into a separate file and include the following script:
google.maps.event.addListener(map, 'idle', function()
{
$('style').remove();
});
This will remove every style-tag written by googles api and keeps your own style save but the roboto font will still be loaded. I don't see any way to stop that.
I fixed this on my map by doing the following. Hope it helps
Create my own div inside the infowindow and set your own css.
<div class='iw'>infowindow content</div>
Set the link to the css file BEFORE! the google api in the page head.
Hold Ctrl & click refresh on your browser to force full refresh to load any css changes. I was using Firefox.
Instead of removing the class through DOM manipulations and instead of using an older Google Maps version which is obviously mostly unwanted, simple deactivate the style globally by resetting the font attribute:
.gm-style { font: initial !important; }
or put your Google Map into a container and style .gm-style inside your container:
<div class="MapContainer">
[google map component here]
</div>
and in your CSS style definitions:
.MapContainer .gm-style { font: initial; }

Categories

Resources