Our bill list and bill map widgets can be edited directly from the Widgets tab on any bill sheet. This allows you to change the colors and size to match your own website's look and feel. For the bill list widget, you can change:
- the title font color
- the title background color
- the border color
- the height and width
For bill map widgets you can change:
- The map color range
- Whether the color range indicates the bill count, rating or simply whether there are bills from a state.
For more information on how to create, format and embed widgets, see this post.
Advanced Editing
With a little manipulation of the code, it's possible to also change the font style and size. This is how.
On the Widgets tab, edit the widget until you are happy with the colors and size. Then click Generate Script to see the code:
The code will look something like this, for a bill map:
<script src="https://www.billtrack50.com/js/bt50.widget.map.min.js" type="text/javascript"></script>
<script type="text/javascript">
BT50.Map({
billSheet: '46c75169-a524-4697-97fd-01eca2b6f34f',
template: 'fa562261-5640-4555-9ad4-40bd543653a7',
mapType: 'BillCount',
minMapColor: '#f9e7e8',
maxMapColor: '#cb181d',
showPosition: false,
width: '100%'
});
</script>
<div id="BT50MapWidget"></div>
And like this for a bill list:
<script src="https://www.billtrack50.com/js/bt50.widget.bill.min.js" type="text/javascript"></script>
<script type="text/javascript">
BT50.Widget({
billSheet: '46c75169-a524-4697-97fd-01eca2b6f34f',
title: 'Autonomous vehicles',
stateFilter: '',
rows: 50,
tForeground: '#f4f4f4',
tBackground: '#19436b',
borderColor: '#dddddd',
showPosition: false,
height: '500px',
width: '100%',
sortBy: '0',
sortDir: 'desc'
});
</script>
<div id="BT50Widget"></div>
The text displayed by the widgets is designed to match the font family (such as Times New Roman or Arial) and the size to the web page they are embedded within. It is possible to change this, however, if you want the widget to look different or if there is an issue with the font. You can add in a couple of lines to the code, either within the window on the widgets tab before you copy it or once you have pasted the code into your website. The lines are:
fontFamily: 'Arial',
fontSize: '12',
You can change Arial to any font family, but it is best to stick to 'web safe' fonts that will be displayed correctly on any web page in any browser. This link sets out the best font families to use. Similarly, you can change 12 to any font size you want.
You can paste the lines anywhere within the main body of the code, the bit surrounded by curly parenthesis - { }. Make sure each line ends with a comma!
Your code should look something like:
<script src="https://www.billtrack50.com/js/bt50.widget.bill.min.js" type="text/javascript"></script>
<script type="text/javascript">
BT50.Widget({
billSheet: '46c75169-a524-4697-97fd-01eca2b6f34f',
title: 'Autonomous vehicles',
stateFilter: '',
rows: 50,
tForeground: '#f4f4f4',
tBackground: '#19436b',
borderColor: '#dddddd',
showPosition: false,
fontFamily: 'Arial',
fontSize: '12',
height: '500px',
width: '100%',
sortBy: '0',
sortDir: 'desc'
});
</script>
<div id="BT50Widget"></div>
The extra code will fix the font family and size of the main bill list text and the text you see for the bill map when you click on a state.
You can obviously edit the other elements of the code such as header font color and background in the same way rather than having to go back to the Widgets tab and make the changes there and generate new text.