Applying CSS Styling

To apply LobbyView's default styling, simply add CSS to your web page.

<style type="text/css">
        /*Example LobbyView table styling */
        #lobbyview .lobbyview-table {
            font-family: Arial;
        }


            /* Apply padding to all cells*/
            #lobbyview .lobbyview-table td,
            #lobbyview .lobbyview-table th {
                padding-right: 25px;
                padding-bottom: 5px;
            }


                /* Left justify the first header cell*/
                #lobbyview .lobbyview-table th:nth-child(1) {
                    text-align: left;
                }


                /* Apply styling to the data cells */
                #lobbyview .lobbyview-table td:nth-child(1) {
                    width: 250px;
                    color: blue;
                }


                #lobbyview .lobbyview-table td:nth-child(2) {
                    text-align: right;
                }


                #lobbyview .lobbyview-table td:nth-child(3) {
                    text-align: right;
                }


                #lobbyview .lobbyview-table td:nth-child(4) {
                    text-align: right;
                }
    </style>
<br>

This CSS will format the widget to look like this: