In WebUI in the Map widget I can change the outline of the label, but not the color of the label. Notice what my font looks like with the following css:
Here’s the result:
I recall having a similar issue with the labels on the Gantt chart, for which the solution was to use the selector .label. I have tried this with the map widget with no success. Can you please tell me what css I need to style this?
Best answer by mohansx
View original
+5
.olMap rect {
stroke: brown;
fill: cadetblue;
}
.olMap text {
fill: red;
}
+3
Indeed, the labels are <text> elements within a map. And a change of text-color is achieved by setting the fill attribute. That’s because the map and other charts are made up of SVG-elements, which differ in styling options from regular HTML-elements.
The reason why your initial attempt did amount to something, is because the stroke was being ‘inherited’ from your map styling, all the way down to the text. But that’s not very reliable, since other elements might inherit the stroke too. And stroke is not the way to set text color in SVG either. Better keep stroke at 0 and set fill instead.
Thanks for the info, y'all.
How about the arrows on the map?
This is happening when I try to adjust the CSS on the example map with [data-widget\.uri="w_map_example"], but I’m not sure where to attach that part (the CSS for the map is SO inconsistent).
I want the pink arrows on the example and only blue on the default. But the pink is showing up on the blue one. I can’t seem to isolate the CSS for the arrows.
(I’m having trouble uploading the image. I’m going to send this text then try to upload on a reply.)
Here is the screenshot for the above comment
+3
I have to admit: the arrows of the lines on the map are not the most obvious parts of the map. That’s because they partially live as references to elements outside the map too.
But that’s not the point. Point is that they should still be consistent: line arrows are polyline elements within marker elements within the map of your choice and they should have an id that reflects the name of the layer they live in. But those marker ids all start with “connections-end-marker”
So I’d expect your styling rule to look something like:
[data-widget\.uri="w_map_example"] marker[id^=connections-end-marker] polyline {
stroke: magenta;
}Your current end result look like your styling something within .tag-map in general?
Does my attempt improve it?
Yes, I’m trying to use .tag-mapv2 (and I’ve tried .olMap, and others).
Alas, your code doesn’t change anything.
I’m not sure where to attach the [data-widget\.uri="w_map_example"]. And all I can find for the marker selector is this:
Regardless of permutation, I can’t even change the arrows on the maps independently - with or without specifying which widget.
Got any other suggestions?
+3
In my turn, I guess I’m not sure what you mean when you ask: “where to attach the [data-widget\.uri="w_map_example"] ?” Lets try and make this as explicit as possible.
You highlight/screenshot the correct part of the element-structure, so you are clearly already looking at the right things: we need to style the stroke color of the polyline within the marker definition.
The marker definitions occur per widget, which is why I added the selector that limits it to a specific widget-uri.
So if you want one widget, with uri “map1” to have red arrow endings and another, “map2” to have yellow ones, I’d expect the following css to be part of one of your css files in the resources folder.
[data-widget\.uri="map1"] marker[id^=connections-end-marker] polyline {
stroke: red;
}
[data-widget\.uri="map2"] marker[id^=connections-end-marker] polyline {
stroke: yellow;
}That’s per layer (mapv2), although the selectors above apply to all markers in all layers within those two example map widgets.
If you’re looking for different marker colors per layer, extend the “connections-end-marker” part to be more specific, like “connections-end-marker-factories1”.
Where do we end up now? Any clearer?
+6
We are working on adjustments of the map, including coloring them through annotations (currently not yet supported). This might greatly help removing the custom code above. Expected to release this over the next month or so.
Can I suggest to wait? Also as it might create compatibility issues since above is custom styling and we are moving from OpenLayer to Leaflet as back-end technology where e.g. labels are handled differently.
+6
To give you more insight into the exact details of what is being build (our January update shared ‘just’ some highlights),
Already have an account? Login
Please use your business or academic e-mail address to register
No account yet? Create an account
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.
Didn't find what you were looking for? Try searching on our documentation pages: