Customization

All widget codes available on WidgetLab.net for your implementation can be customized in terms of how they will look. This means, that the widget codes provided here will simply pull and show data in the style of your website. In some cases this may be ideal, but for some webmasters looking to differentiate the look of these widgets there is good news. If you are in this category, you should know that data delivered by our widgets can be customized in terms of how they look by making some small additions to your CSS style.

Raw Styling

table raw stylingThe Raw Styling is basically what the widget codes here deliver, with no other customization on your end. This is a simple table formatted to show the data. In some cases, this look may suit your website. If however you feel you do not like the way it shows in your website, we invite you to go on below customization tricks.

To start customization of our widgets you can follow some simple steps. First, make sure you have access to your website main CSS file (ends in .css). You will need to add some values to that file and then save it on your webserver. Bellow are some example customization for your reference:

Alternate Color of Rows

table alternate row stylingWith this customization, you can make data tables delivered by our widgets show with rows having alternate colors. Example to the left, however note that colors presented here are for information purposes, you can make changes to whatever colors suits your webpage. For this customization to work, you will need to make some small edits to the widget code and to the CSS style file of your own website.

1. Edit the Widget Code: as you will see, all our widget codes are wrapped in DIV tags as <div>widget code</div>. You will need to edit only the opening tag to <div class=”table_alternate_rows”>. Implement the new code in your webpage.

2. Edit the CSS file of your website: add the following lines of code in the CSS (you can add them at the end of your file).

.table_alternate_rows tr:nth-child(even){background:#99ff33}
.table_alternate_rows tr:nth-child(odd) {background: #ffff66}

The colors of the rows can be altered here: #99ff333 or #ffff66 from above lines of code can be changed to whatever color codes you want. Check this online tool to generate color codes > you will need to copy the HEX color code.

3. Save the CSS file back on your webserver and reload the webpage that has the widget implemented.

Alternate Color of Columns

table alternate column stylingWith this customization, you can make data tables delivered by our widgets show with columns having alternate colors. Example to the left, however note that colors presented here are for information purposes, you can make changes to whatever colors suits your webpage. For this customization to work, you will need to make some small edits to the widget code and to the CSS style file of your own website.

1. Edit the Widget Code: as you will see, all our widget codes are wrapped in DIV tags as <div>widget code</div>. You will need to edit only the opening tag to <div class=”table_alternate_columns”>. Implement the new code in your webpage.

2. Edit the CSS file of your website: add the following line of code in the CSS (you can add them at the end of your file).

.table_alternate_columns tr td:nth-child(odd){background: #ff99cc;}

The colors of the columns can be altered here: #ff99cc from above line of code can be changed to whatever color codes you want. Check this online tool to generate color codes > you will need to copy the HEX color code.

3. Save the CSS file back on your webserver and reload the webpage that has the widget implemented.

First Column Color

table first colum stylingWith this customization, you can make data tables delivered by our widgets show with first column only in a different color. Example to the left, however note that colors presented here are for information purposes, you can make changes to whatever colors suits your webpage. For this customization to work, you will need to make some small edits to the widget code and to the CSS style file of your own website.

1. Edit the Widget Code: as you will see, all our widget codes are wrapped in DIV tags as <div>widget code</div>. You will need to edit only the opening tag to <div class=”table_first_column”>. Implement the new code in your webpage.

2. Edit the CSS file of your website: add the following line of code in the CSS (you can add them at the end of your file).

.table_first_column tr td:nth-child(1){background: #66ccff;}

The color of the first column can be altered here: #66ccff from above line of code can be changed to whatever color codes you want. Check this online tool to generate color codes > you will need to copy the HEX color code.

3. Save the CSS file back on your webserver and reload the webpage that has the widget implemented.

First Row Color

table first row stylingWith this customization, you can make data tables delivered by our widgets show with first row only in a different color. Example to the left, however note that colors presented here are for information purposes, you can make changes to whatever colors suits your webpage. For this customization to work, you will need to make some small edits to the widget code and to the CSS style file of your own website.

1. Edit the Widget Code: as you will see, all our widget codes are wrapped in DIV tags as <div>widget code</div>. You will need to edit only the opening tag to <div class=”table_first_row”>. Implement the new code in your webpage.

2. Edit the CSS file of your website: add the following line of code in the CSS (you can add them at the end of your file).

.table_first_row tr:nth-child(1){background: #66ccff;}

The color of the first column can be altered here: #66ccff from above line of code can be changed to whatever color codes you want. Check this online tool to generate color codes > you will need to copy the HEX color code.

3. Save the CSS file back on your webserver and reload the webpage that has the widget implemented.