Right now I am using the default maps ui: http://js.api.here.com/v3/3.0/mapsjs-ui.css.
But I am not completely happy with the black controle buttons (mapsetting, zoom).
On js api start page here maps is using white buttons without round corners, exactly what I want.
Is there a secound css file I did not found or will it be replace current black style in near future?
It is not the problem to change style by my own, but I would prefer a other way.
There is only one CSS file with the black color scheme. My guess is, the developer.here.com color scheme is a custom override of the styles. But then again, the mapsjs-ui.css file uncompressed making your own color overrides relatively simple.
I agree that if they change CSS rules it's your issue. However, that doesn't seem to have happened, like... ever until now.
Related
1) I know I can use a font icon using , pseudo selectors (before, after) and "content", but it is not a scalable solution, because I need to make many changes to padding, left, top etc in different situations
2) Using Data URI an svg is ok, but I need to change the fill/color of the svg
based on different actions. I tried the fill property but it is not really working.
I can change/edit the color external but I have a lot of variations and again doesn't scale
The icon fonts(ex: FontAwesome) come with SVG files for the browsers. It is possible to use somehow that file in css (like image sprites) ?
If you want to modify properties of SVG's it will have to be placed inline. So using an SVG as a background and modifying properties won't work.
Libraries like FontAwesome give you a font, not svg's which you can't set as a background either.
I don't see the problem of using the psuedo-selectors :before and :after for this. They are very scalable in my opinion.
If you really want to do it differently you should share some of your code with us so we can get a better understanding of what you're trying to do.
Based on my research and the many posts on this subject, I understand that I cannot alter the CSS in the iframe based on the domain tree security policy. However, I am sure (or hope) there has to be a developer out there that has implemented a way to run the iframe locally on their domain and therefor gain access to alter the CSS attributes.
All I need to do is change the calendar grid (array) background and border colors. Please do not tell me you can change the bg-color in the tool, because all that does is change the header. The border is blue and the bg-color of the grid is defaulted to white.
Any direction would be much appreciated.
Look at this:
http://www.webdesignerdepot.com/2012/04/integrating-google-calendar-with-your-website/
It is described there how to change google calendar css.
I am creating a template for my company that will be used down the road on a variety of different clients sites, and they will all range in color. I have created icons for this template that are currently black (or white) and I want to be able to control the color of these icons via css. They are one simple color and in photoshop if you do a blending option of color overlay and choose 1 color, they look great. Is this possible to do in css so when someone is editing this template for future clients that they can control the icon colors in css instead of having to edit every icon in photoshop every time?
It's possible to change the color of a logo in CSS, but not to solve the problem you are talking about. To make a changeable logo you would make a PNG with transparency where the logo is and background color (of the webpage) in the negative space. Then put it over a P or div that has the logo color you want as its background color.
Trouble is, you have just exchanged having a flexible logo color for an inflexible "background" color.
Better to just include both colors of logo, white and black, as part of a "package" that is put up with all websites. Just call the one you want in CSS where you want it.
If your icon is a shape you can make in css, it could work, but I have never heard of anybody doing what you are talking about before.
Its not possible to change the color of icon using css. You can shape it,you can give transparency,opacity etc
Not possible via CSS. You can use some dynamic technologies like Canvas, but it's not good way. I would rather create tool to create icon sets in desired color. You can do it with PHP (phpGD or ImageMagick here is example of similiar problem).
You can do this with images (as long as the background colour is consistent) but it requires thinking outside the box a bit. Open the icon's image file in Photoshop (or similar). Edit it so that the "icon" part (i.e. the bit that is currently black) is transparent, and the background (i.e. the bit that isn't what the icon depicts) is filled white (or whatever the background colour of the site is). Essentially you've "reversed the polarity" of the image. Put the image in the web page, then use CSS to specify it's background-color. Your icon should appear in that colour. Edit: Something like this: http://coding.smashingmagazine.com/2010/10/31/transparent-css-sprites/
A [potentially] much simpler approach would be to use an icon font like http://pictos.cc/. That's just text really, so you can colour it with CSS as usual.
You can do this with CSS pseudo elements and translucent overlays. You can follow the instructions here: http://www.impressivewebs.com/image-tint-blend-css/
If you have a vector logo, you can do this with SVG logos even easier (by altering your SVG colors).
If you make the icon images into a font, then you have full control over both size and color via CSS. Check out the very popular Font-Awesome font, designed to compliment Twitter Bootstrap.
I'm no font expert, but if this approach sounds like a fit, you'll do something like:
create vector graphics from your icons
load them into a font editor, like FontLab Studio
add the new font to your favorite web application. If you need a guide for this, FontSquirrel.com generates great #font-face markup to include their library of free fonts.
It can be done and works well with Firefox and Chrome as far as I know. Example below.
http://demosthenes.info/blog/532/Convert-Images-To-Black-And-White-With-CSS
img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
I would say the best/easiest answer is to use SVG. The logo should probably be in a vector format to start with so that it can be scaled without detail loss from business cards to billboards.
SVG 'images' are based on shapes. Give the shape you want to change a name, and then address it in CSS to change it's colour.
This article:
http://css-tricks.com/using-svg/
and this example:
http://codepen.io/chriscoyier/pen/evcBu
Do an excellent job of explaining how to achieve this and also show off other possibilities.
SVG at least the basics are now widely supported, ie8 is the only browser holding it back and even so there are ways around this via rendering SVG as an image on the fly.
I want to style some fonts in my css using the style- sharp found in Photoshop. Does anyone know the way?
Photoshop uses a custom font rendering engine which you won't be able to emulate using CSS. Furthermore, each platform has its own rendering engine which CSS cannot control.
For WebKit there is -webkit-font-smoothing but what it does is a far cry from what you're looking for.
No luck I'm afraid. The only way I know of (perhaps someone knows otherwise) to achieve this is to save the text in question as an image. Fine for headings etc., but not for body text.
The "sharpness" of a font is usually a thing of the font renderer which is part of the operating system. You should check the font settings. In Windows, for example, try turning off ClearType.
I'm afraid it's a browser/os combination that decides how your fonts are anti-aliased. Nothing you can do about it, except save the Photoshop output as an image, set it as a background for whichever container your text appears in and apply a negative text indent on it via css.
There is solution for font smoothing.
You can use cufon.js to render your font sharply & smoothly. This js renders your text as a cufon and if you right click on it it shows image. You can use this for heading.
I have a web app that I've recently applied a jQuery ThemeRoller theme to. Now I want to have a simple <h2> element have the same rounded-rectangular look as the dialog titlebar or datepicker title. How can I best apply these to my elements that aren't part of larger jQuery UI constructs?
I started down the path of just setting css class values manually based on what I could see inside Chrome's inspector tool, and I got part of the way there before I got nervous that this wasn't going to necessarily be the best way since I'm bypassing any css class assignment logic that might occur inside jQuery UI.
So, is there an easier way of applying those styles, or should I just go down the road of explicitly setting css styles on my headers?
There isn't any magic to the jQuery ThemeRoller CSS styles, if you look through the CSS files that it generates, you will find that they are generally clear and concise and easy enough to read.
The rounded corners in the ThemeRoller CSS will not work in IE, so you might not want to depend on them too much, but if you do, just apply the CSS using style='blah'.
stevedbrown's answer is quite correct.
You can apply rounded corners to any containing element by using the ui-corner- prefix. For example, to apply rounded corners to all four corners of a div element, you'd use ui-corner-all.
To only style the top corners of that same element, you'd apply ui-corner-tr ui-corner-tl for the TopLeft and TopRight corners.
Another possibility to the above is, if you know the CSS attributes you want to copy, you can do it programmatically like:
var defaultColor = $(".ui-state-default").css("color");
var defaultMargin = $(".ui-state-default").css("margin");
and apply these to your elements
$(".your-css-class").css("color",color);
$(".another-css-class").css("margin",margin);
etc
Kind of clunky, but it does allow your CSS developers to update the themerolled themes and you don't have to worry about updating any of your code anymore.