revSPORT Website - Dark Theme
Styling options for dark theme
All the effects outlined below can be applied by right-clicking on the link, or table, and selecting Properties > Advanced. The effects are applied by adding various Stylesheet Classes to the item. The exact classes are specified for each item below.
You can view more information on these specific topics:
Buttons Alerts Cards Images Tables
Buttons
These buttons are created by applying the base class btn to the link, and then adding the colour, e.g. btn-primary, btn-secondary, etc.
Primary button Secondary button Success button Info button Warning button Danger button Light button Dark button
These buttons are created by applying the base class btn to the link, and then adding the outline colour, e.g. btn-outline-primary, btn-outline-secondary, etc.
Primary button outline Secondary button outline Success button outline Info button outline Warning button outline Danger button outline Light button outline Dark button outline
Different button sizes can be achieved by applying the base class btn to the link, and then adding either btn-sm or btn-lg to make a small or large button respectively (along with the chosen colour e.g. btn-primary).
Small button Medium button Large button
Icons can be combined with buttons.
Read more Information Important
Buttons can be made to go full-width by applying the base class btn to the link, and then adding btn-block text-wrap (along with the chosen colour e.g. btn-primary).
You can make a button bold by adding the font-weight-bold class.
There are also a full range of font sizing options using the range of classes for extra small, small, medium, large, and extra large sizes respectively: font-size-xs, font-size-sm, font-size-md, font-size-lg and font-size-xl.
XS font size button Small font size button Medium font size button Large font size button XL font size button
Alerts
These are created using a 1x1 table with classes applied. For example, the first alert has the classes: bg-primary rounded text-light
| Primary alert |
| Secondary alert |
| Success alert |
| Info alert |
| Warning alert |
| Danger alert |
| Light alert |
| Dark alert |
These are created using a 1x1 table with classes applied. For example, the first alert has the classes: border-primary card text-primary
| Primary alert outline |
| Success alert outline |
| Info alert outline |
| Warning alert outline |
| Danger alert outline |
| Light alert outline |
Cards
These are achieved by placing each 'card' within an overall table. Each 'card' is a 1x1 table of its own.
Cards can be given additional classes to change the text, background, and border colours. They can also be given 'hover' and 'shadow' effects.
- The base card has class card.
- The shadow effect is applied by adding the box-shadow-lg class.
- The hover effect is applied by adding the card-hover class.
- The text colour is applied by adding the text-primary (or text-info, etc...) class.
- The background colour is applied by adding the bg-primary (or bg-info, etc...) class, plus text-white so that the text is legible.
- The border colour is applied by adding the border-primary (or border-info, etc...) class.
These effects can be combined together by combining the classes, e.g. card card-hover text-primary.
|
|
|
|||
|
|
|
Notes:
- To ensure cards stay a consistent size, apply the table-fixed class to your overall table, and ensure the width is set to 100%.
- You can make the cards stack on mobile by adding table-stack table-stack-md-none classes to the overall table (see Tables below).
- If you're having trouble getting the content to align to the centre or right (which can happen if the content is too 'short' to fill the entire width of the card), you can try adding these stylesheet classes to the card table:
- Centre-alignment: align-items-center
- Right-alignment: align-items-end
- To have cards remain the same height where the content varies, apply the h-100 class to:
- The overall outer table
- Each card/inner table
Images
Images can be given rounded corners by applying the rounded class. rounded-xs, rounded-sm, rounded-lg can be used instead of rounded to produce rounded borders of different sizes.
Images can be given the class rounded-circle to give them a circular appearance. This works best with square images.
Tables
Tables can be made to 'stack' on mobile, and then to stop stacking once you reach a certain screen size. Note that the table headers will be hidden when stacked.
To see the stacking in action on a desktop computer, shrink your browser window to make it sufficiently narrow to 'trigger' the stacking.
| Avoid putting widths on table cells, as these will also apply when stacked, and will negatively impact the table layout. |
All tables below have table table-border classes applied, plus some additional classes as indicated below.
Stack at all sizes
This table has the table-stack class applied.
| Header | Header | Header | Header |
|---|---|---|---|
| Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
Don't stack at medium sizes and above (but stack at smaller sizes)
This table has the table-stack table-stack-md-none classes applied.
| Header | Header | Header | Header |
|---|---|---|---|
| Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
Don't stack at large sizes and above (but stack at smaller sizes)
This table has the table-stack table-stack-lg-none classes applied.
| Header | Header | Header | Header |
|---|---|---|---|
| Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
Don't stack at all
This table has no table-stack classes applied.
| Beware this style, as it will cause display issues on mobile where the table will spill over horizontally. |
| Header | Header | Header | Header |
|---|---|---|---|
| Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
Responsive table
To counter the issue above, you can give the table the following classes: table table-responsive w-100 d-block d-md-table. This table will scroll side-to-side on smaller devices.
| Header | Header | Header | Header |
|---|---|---|---|
| Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
Hover table
Tables can be made to highlight the row you hover on with your mouse. This effect is applied by adding the table-hover class.
| Header | Header | Header | Header |
|---|---|---|---|
| Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit | Lorem ipsum dolor sit amet, consectetur adipiscing elit |