All WeatherBlox views and layouts are highly customizable both through the configuration options you provide at initialization or when requesting them via the API and by applying your own CSS styling to override the defaults. You can also inject your own HTML content into any view or layout using both client- and server-side methods for inserting custom content such as ads or links.

Custom CSS

All styling for WeatherBlox views and layouts is scoped under the .awxb-view or .awxb-component namespaces. To reduce conflicts with CSS on your own pages where these views will be included, the specificity is increased by duplicating the namespace: .awxb-view.awxb-view and .awxb-component.awxb-component respectively. You will need to replicate this same namespace duplication when overriding the default styles:


You may need to customize the configuration of a WeatherBlox view beyond just the API data request parameters, such as overriding the default options that control the final output. Most WeatherBlox views have additional customization options that you can override via their constructor method when you create an instance of them. Refer to the documentation for each view or layout for additional information regarding the configuration options currently supported.

Handling Links

Some WeatherBlox views and layouts contain links that can be used to direct a user to a different weather-related page, such as viewing full weather advisory information or viewing a different day for an hourly forecast.

Injecting HTML

You may need to inject your own custom HTML content inside of a WeatherBlox view or layout, such as inserting ads or other analytics content. This is easy if you’re using the client-side integration, or if you’re using the server-side integration with our PHP package that provides utility methods for inserting your content.

Last modified: October 21, 2020