Are there alternative vector styles available for the Javascript API or all that we have is the default "normal" style? I know that the Tile API does have several styles available - I like the "reduced" one, but I'd prefer to work with vectors. I suppose I could use the style editor and make my own yaml file, but that's a lot of variables to tweak.
I'd like to style the map in very light colours or in grayscale so that my markers are more visible. Is there a global style I could change for that?
JS 3.1 API gives you all flexibility in terms of map styles. You can use the Map Customization Tool https://enterprise.here.com/map-style-editor/. However, for now only normal.day is currently offered from HERE.
To have an idea, we have also published an example on GitHub how to have a dark theme on the map. Here is the link:
https://github.com/heremaps/maps-api-for-javascript-examples/tree/master/change-style-at-load
Style looks like this: https://github.com/heremaps/maps-api-for-javascript-examples/blob/master/change-style-at-load/data/dark.yaml
Related
I currently use MkDocs together with the Material Theme, to create nice looking wiki and documentation pages.
However, I would like to customize the Theme to make it generally darker, as I'm not a big fan of bright white backgrounds. But sadly am I not good at all with customizing stuff through CSS (which seems to be the only way here) so I was wondering if there is a place/site, where I can find pre-defined CSS files to alter the theme of Material/MkDocs, to something I like.
I guess there are not so many of them if at all (unlike the original MkDocs).
But if you are looking for a dark theme, you can quickstart with the MkDocs-Material-Dark-Theme.
For more advanced customizations, you do have to proceed with a custom CSS.
There are many tutorials on how to start with basic styling so you may find them useful doing your first steps. You can check CSS selectors in the main CSS file of the Material theme or use Developer tools in your browser. To play around with color combinations you can use coolors.co or flatuicolors.com.
I am working with a freelance client on the side that wants to utilize Angular Material throughout the project. However, they do not like the way that the underline looks in the angular material input. I have tried a variety of approaches to change this, but I haven't found any success yet.
To be honest, I haven't even been able to find the tag in the DOM that would let me alter that border.
Here are the Angular Material docs, as you can see all of the available options have at least some form of a bottom border.
Some approaches I've tried:
This one is from the old angular material and no longer works for the new angular material
The accepted answer here is for the new angular material, but I was not able to get it to work. I implemented exactly as described and no styling changed.
This approach looked like it would work. Unfortunately, I could not get it to work either.
Any help or input on this topic would be appreciated.
For reference, the client said that any changes that deviated from the desired design would be denied. So I have to get this to work. I believe I could maybe, possibly lobby to build a custom input component as a solution, but I know that they are dead set on Angular Material.
Edit. Added a pic of desired look:
this little code did it for me. I didn't want to display it and just set height and width to 0.
::ng-deep .mat-form-field-underline{
height:0 !important;
width:0 !important;
}
However I think its kinda hard to style the Angular Material Components and for me its sometimes better to built my own.
First of all, you'll need a .scss to be imported either within the default theme.scss or after the import of the material stylesheet in main.scss.
Now, Material offers you the option of customising colours and some of the styles by overriding their #mixins found somewhere in the Material folder ( I don't have the folder in front of me.. very sorry for the vague pointing... ).
Back to the newly added file; You can override material's default styling by checking the DOM for certain classes and then adding them in said file with the desired changes. Because the file is loaded after Material's, the default styling in overridden. Same thing applies for the #mixin you chose to override. Just have a look in the file, copy-paste the whole #mixin and change accordingly.
Now if you wish to go even further, my colleagues and I have a custom library that uses Material BUT the whole styling is stripped off leaving you with the bear input within the mat-form-group and then using a <input disabled/> with a position:absolute over it. That way you get to benefit from material without using their style.
I'm using office-ui-fabric-react for my app, and I'm using the loadTheme to customize the color palette of my app.
Using loadTheme does change how my components behave but it doesn't affect the page's global CSS, like page background etc...
Given the fact that I also import the office-ui-fabric dist CSS, I would expect the CSS to be changed too, maybe through some CSS3 variables.
Is this not how it's supposed to work? should I set CSS manually on every loadTheme call?
I answered this on our Github page, but wanted to toss it in here too:
https://github.com/OfficeDev/office-ui-fabric-react/issues/5713
loadTheme only updates the theme object passed down to each component. It doesn't add any css to the page. This is very intentional.
I am using Primefaces 5.0.I want to use or bootstrap css to Primefaces custom components like List, table, selectOneListbox.
I am to apply css to normal component like button, link etc.
It's possible, but due to reason that a internal structure of Primefaces's components are different from a plain HTML components with which Bootstrap supposed to work you will need to make hard job to accomplish that. You will need to debug every Primefaces component to see its internal structure and change Bootstrap's css file that it will correspond to internal classes of Primefaces's component.
Actually you have three alternatives (maybe more):
Like BalusC mentioned, Primefaces has its own implementation of Bootstrap theme: you can see it here: http://www.primefaces.org/themes IMHO, best option
Use Bootfaces JSF library: http://www.bootsfaces.net/ Pay attention that it's pretty new library and possible buggy. There isn't big community support like for Primefaces library.
Make you own Composite (or Custom) Components with desired structure and styling.
If I want style sheets for different color themes, how can I keep canvas font and line colors in an external CSS file?
I could make hidden dom elements and use them as varaibles.
I could just use javascript to read the current theme and set the colors using javascript variables but then it defeats the purpose of css files. I also want someone else to edit the styles and colors without having to do javascript.
Is there no way to store a setting in a css file and easily read it with javascript (no ajax or jquery)?
The line color, etc. in a canvas element are not affected by CSS, so there is no way to directly do this. The best you can do is use a data file of some sort that stores an object in JSON format containing appropriate canvas variable values for each theme.
Canvas drawing is independent of CSS. You set fonts and colors using Canvas API methods, not by CSS styling. The best I can think of as a counterpart to an external CSS file is an external JavaScript file where you just assign values to variables used in your code for drawing on canvas. That file could be made very simple, just assignments, so it would not require any substantial understanding of JavaScript to edit it.