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:

.awxb-component.awxb-component {
    font-size: 1.2rem;
}
.awxb-component.awxb-component . awxb-local .obs .wx .temps .temp {
    font-size: 3.5rem;
}

We recommend using a CSS precompiler, such as SASS, which will make overriding our default CSS considerably easier especially when a lot of overrides or customization is required:

.awxb-component.awxb-component {
    font-size: 1.2rem;

    .awxb-local {
        .obs {
            .wx {
                .temps {
                    .temp {
                        font-size: 3.5rem;
                    }
                }
            }
        }
    }
}

Last modified: October 21, 2020