Overriding Template Defaults
An issue that I have found that if you get a template that works for you using the W3 Framework there may be instances where you may wish to over-ride some of the behaviour. A case in point is the colours of containers where you have hard-coded a colour that is one of the pre-defined ones in w3.css
On this website I have additional class definitions in portfolio.css. These class definitions determine behaviour os the li tags, sticky buttons, some custom colours and font selection.
The colour of the "main" container
This I had hard-coded as "w3-sand".
I could/need to add back a custom colour that sets the original "w3-sand", "w3-sand-mod" for example
This is over-rode in portfolio.css:
.w3-sand /* override to pale-grey */
{color:black;background-color:#f1f1f1!important}
The Default Colours
It would seem that the default colour for a w3-container is w3-pale-grey. This was the colour that I changed w3-sand to. This also had the side-effect of fixing my margin problems
Override inline on page
Sometimes it is necessary to over-ride a style in-line.