Valheim Theme
A custom Interface
Themed Container
This is a "themed-content" bootstrap container class. The h1 element of this container has the class "themed-header" which applies the theme's header style to the element. It used the body class for this theme to produce a themed page background. You can also assign a background image for the theme class as seen on this page as well. The container will use the grid system from bootstrap inheritly so columns work fine.
Full Width (col-12)
A full width column with a border to show the size
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Half Width (col-12 col-md-6)
A half width column that becomes full width on smaller screens with a border to show the size
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Half Width (col-12 col-md-6)
A half width column that becomes full width on smaller screens with a border to show the size
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Below you will see examples of different bootstrap components that have been styled to match the theme. In these examples, the columns themselves are themed while the container is not. This was done to show how the theme can be easily applied to any display element.
Fluid Container
Bootstrap Examples
H1 Header
H2 Header
H3 Header
H4 Header
Example content for the container.
Example content for the container with a themed border.
Example content for the themed container with a themed border and background.
More example content for the container. This contains a link.
Inputs
Buttons
Sizing
Styles
Text
Text
Default text
Primary text
Secondary text
Success text
Warning text
Danger text
Backgrounds
Colors
Default background
Primary background
Secondary background
Success background
Warning background
Danger background