QGIS2web pop-up multiple font-types

Question

I've got a pop-up for a layer with more than one attribute for the layer in question. I would like to make the first attribute in the popup appear with a bold font and a different color. Anyone have any idea?

Answer 1

Open the file css/qgis2web.css from your exported map in a text editor, and add the following to the end:

.leaflet-popup-content tr:first-of-type {
    font-weight: bold;
    color: red;
}

Obviously change the colour to suit your needs.

Answer 2

As far as I know there is no straight forward way to do this in the plugin. A workaround is to open the .html file in an editor, and add <b> tag or any other formatting tag for the field that you want to highlight, like so:

I've added a <b> tag for the top row

var popupContent = '<table>\
                <tr>\
                    <th scope="row">Imagery Date</th>\
                    <td><b>' + (feature.properties['Imagery Date'] !== null ? Autolinker.link(String(feature.properties['Imagery Date'])) : '') + '</b></td>\
                </tr>\
                <tr>\
                    <th scope="row">Area (sq. meters)</th>\
                    <td>' + (feature.properties['Area (sq. meters)'] !== null ? Autolinker.link(String(feature.properties['Area (sq. meters)'])) : '') + '</td>\
                </tr>\
            </table>';

It is displayed so: