Here in the WordPress documentation about new block theme They have said about overriding theme.json. I did something like that, but I don't know how o use it? Currently I have a theme.json file in the theme root (and it is working like a charm). I have this:
{
"version": 2,
"settings": {
"appearanceTools": true,
"color": {
"custom": false,
"defaultPalette": false,
"palette": [
...
]
}
}
}
Also, I have two separate files (dark.json and light.json inside styles directory). Both dark.json and light.json are something like this:
{
"version": 2,
"settings": {
"appearanceTools": true,
"color": {
"custom": false,
"defaultPalette": false,
"palette": [
...
]
}
}
}
But what I get is the original palette in theme.json when using the Gutenberg editor. How can I choose two customized palettes?
I've found it! You can go to Dashboard -> Appearance -> theme Customize.
Then in the top right corner of this page, You can see a black and white icon titled "styles". It does show the list of style variants.
BTW, when I was searching I found this article about new block theme style variations. Hope this helps someone else.
So on the website, the PayPal checkout page is implemented by using this iframe documentation, where it offers the customization on css of iframe with given css key:value pairs in JSON string. you can see that here
Now, can someone help me if I am passing the JSON string correctly, because it doesnt work for some reason. i need to make the labels white in color
<script type="application/javascript">
var styles = {
"pppLabel": {
"color": "#fff"
},
"pppCheckboxLabel": {
"color": "#fff"
}
};
var ppp = PAYPAL.apps.PPP({
"approvalUrl": "<?=$approvalUrl?>",
"placeholder": "ppplusDiv",
"payerEmail": "<?=$_POST['email']?>",
"payerFirstName": "<?=$_POST['name']?>",
"payerLastName": "<?=$_POST['surnamename']?>",
"payerPhone": "<?=$_POST['telephone']?>",
"payerTaxId": "<?=$_POST['cpf']?>",
"miniBrowser":false,
"merchantInstallmentSelection":12,
"merchantInstallmentSelectionOptional":true,
"mode": "live",
"payerTaxIdType": "BR_CPF",
"language": "pt_BR",
"country": "BR",
"css": styles,
});
I have made changes like
"css": JSON.stringify(styles)
but it doesnt work and give this in console
screenshot
code pic
web page pic
doesn't work and show some messages in console, i am adding a screenshot as an answer to my question screenshot
I am trying to style the map which shows the directions of all roads without the road numbers on them.
{
featureType: "road.highway",
elementType: "labels.icon",
stylers: [
{color:"#979897"},
{ lightness: 50 },
{ visibility: "off" }
]
},
But this removes the directions on the road as well the numbers.I want to show only the directions without the highway numbers.
This code removes all icons as well as labels. I am not sure what you mean by directional arrows, is this an additional layer you have?
[
{
"featureType": "road",
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
}
]
There's a very useful styling tool which allows you to visually tweak map settings, which then spits out the JSON you need for your settings:
https://mapstyle.withgoogle.com/
Jeremy's answer will remove labels from all roads, including highways, arterial roads and local roads. I suspect you only want to hide highway numbers, so use:
[
{
"featureType": "road.highway",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
}
]
(This will also hide highway labels though).
You can also remove labels for arterial and local roads separately, if desired, by adding additional JSON objects using the following as the "featureType":
road.arterial
road.local
i searched enough and didn't find any way to remove the sea routes from a port to another, what featureType should i use on map options?
This seems to remove ferry lines; are those your concern?
[
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{ "visibility": "off" }
]
}
]
It also removes other "transit lines" on the ground. which may be undesirable.
I'm using google map API v3. I want to disable click action on default google landmark/poi. For example, when I zoom to UCLA, the school icon shows up (that's fine) but I don't want user to click and view details of that location. Which API function should I use?
Google has exposed an option for this. See clickableIcons of google.maps.MapOptions in the docs.
Example initialization code:
map = new google.maps.Map(document.getElementById('map'), {
clickableIcons: false
});
add this option to mapOption
clickableIcons: false
this is more options i think you will
draggable: true, // this is for disable the Draggable
disableDefaultUI: true, // this for disable Default UI
fullscreenControl: false, // this is for disable Full Screen
scrollwheel: true, // this is for disable Scroll Wheel
disableDoubleClickZoom: false, // this is for disable Double Click Zoom
draggableCursor:'crosshair',// this is for cursor type
draggingCursor:'move', // this is for dragging cursor type
minZoom: 3, // this is for min zoom for map
maxZoom: 18 , // this is for max zoom for map
//note : max, min zoom it's so important for my design.
zoom: 14, // this is to make default zoom
clickableIcons: false, // this is to disable all labels icons except your custom infowindow or Infobox.
I encountered this same problem.
Google appears to have recently changed their api to make the base map labels "clickable" and there is not yet a simple API call to disable their clickablility.
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/f1ac9ad4da3606fe
I would like to see google add a simple map option like this, but alas it doesn't exist yet
var opts = { clickableLabels:false };
var map = new maps.google.com.map(div,opts);
The following solution works, but because it relies on custom styled map tiles, free maps are limited to (2,500 maps loads per day) - See Google Maps FAQ.
function initialize() {
// For more details see
// http://code.google.com/apis/maps/documentation/javascript/styling.html
var noPOILabels = [
{
featureType: "poi",
elementType: "labels",
stylers: [ { visibility: "off" } ]
}
];
// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
var noPOIMapType = new google.maps.StyledMapType(noPOILabels,
{name: "NO POI"});
// Create a map object, and include the MapTypeId to add
// to the map type control.
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(55.6468, 37.581),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'no_poi']
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('no_poi', noPOIMapType);
map.setMapTypeId('no_poi');
}
This issue has been logged with google at:
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3866
Please star and comment your needs on this issue there.
I understand that the OP wants a solution that persists the labels/icons but suspends the click events. I'm not sure this is possible; please star this issue
However, some of us are drawing shapes sans Drawing Manager and labels/icons are obstructing the additions of new points. If it meets your requirements, you can temporarily remove the icons/labels. I've found that transit, poi, and landscape all need to be toggled:
var map = new google.maps.Map(document.getElementById("map"), {});
map.poi = function(state){
var styles = [
{
"featureType": "transit",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "landscape",
"stylers": [
{ "visibility": "off" }
]
}
];
this.set("styles", (state)? {} : styles );
}
And the usage:
//turn the labels/icons off
map.poi(false);
//turn them back on
map.poi(true);
I understand that this question is old, but maybe this answer will help others:
I'm not sure if this is legal, but I ended up exploring the code and made this:
$("#google-map").on("mousedown",function(){
setTimeout(function(){
disableInfoWindows();
},500);
});
function disableInfoWindows()
{
$(".gm-iw.gm-sm").parent().parent().remove();
$("[style='position: absolute; left: -2px; top: -336px; width: 59px; height: 492px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px;']")
.parent()
.parent()
.remove();
}
It worked for me, no infoWindow showing up, while preserving all the icons. Anyone who has an idea enhancing the code is welcome, the infoWindow is showing up just a bit the first time it is about to open, after that first one, it is completely gone.
Yeah, the other solutions work but you can also want to have ability to hide/disable only part of that pins or disable ability to go to details from popups, please see my post here with some tips how you can do that CLICK
Right, to sum up, if you want to "remove" popups, you can just use:
clickableIcons: false
for map options object. But if you want to have a popup, but without "View on Google Maps" label, you can use a hacky CSS trick:
google-map {
.view-link {
display: none !important;
}
}
That was my requirements, and it works!
If you want to define which icons/pins (elements or labels, however you call it) should be visible, you can use this site to generate proper JSON with map settings: https://mapstyle.withgoogle.com/