Menu
I have created a custom network with vis.js and have styled it to have red edges and blue nodes. I added the css/network/images/....png folder that came with the download of vis.js that has the navigation buttons inside.
However, these are green by default. I have tried changing them via the vis.css file with background-color: black; and color: black. When I do the first one for background-color, it does add a black circle behind the navigation button but its still green.
How can I fix this? It says on their website that the nav buttons are fully customizable by overloading the css but it doesnt seem to be the case. Any pointers or help would be appreciated, thank you.
925
The navigation buttons are currently released as images. If you want to change the color you would have to change these images.
Also you could just replace the vis-button images with some nice css:
// create an array with nodes
var nodes = [
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
];
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
interaction: {
navigationButtons: true
}
};
network = new vis.Network(container, data, options);#mynetwork {
width: 600px;
height: 200px;
}
div.vis-network div.vis-navigation div.vis-button.vis-up,
div.vis-network div.vis-navigation div.vis-button.vis-down,
div.vis-network div.vis-navigation div.vis-button.vis-left,
div.vis-network div.vis-navigation div.vis-button.vis-right,
div.vis-network div.vis-navigation div.vis-button.vis-zoomIn,
div.vis-network div.vis-navigation div.vis-button.vis-zoomOut,
div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends {
background-image: none !important;
}
div.vis-network div.vis-navigation div.vis-button:hover {
box-shadow: none !important;
}
.vis-button:after {
font-size: 2em;
color: gray;
}
.vis-button:hover:after {
font-size: 2em;
color: lightgray;
}
.vis-button.vis-up:after {
content: "▲";
}
.vis-button.vis-down:after {
content: "▼";
}
.vis-button.vis-left:after {
content: "◀";
}
.vis-button.vis-right:after {
content: "▶";
}
.vis-button.vis-zoomIn:after {
content: "+";
font-weight: bold;
}
.vis-button.vis-zoomOut:after {
content: "−";
font-weight: bold;
}
.vis-button.vis-zoomExtends:after {
content: "⤧";
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-network.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-network.min.css" rel="stylesheet" />
</head>
<body>
<div id="mynetwork"></div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
