| 🏃 Getting started | Getting started | ||
| 🛠️ Troubleshooting | Troubleshooting | ||
| 🥛 Milk theme features | Milk theme | ||
| 📧 Contact us | https://themeforest.net/item/milk-multipurpose-responsive-phpbb-31-theme/16119149/support |
Header background repeat
Defines whether the header background image will repeat, and along which axis / axes.
Not applicable if the stretch or parallax options (below) are enabled.
| repeat-x |
|
| | repeat-y | 
|
| | repeat | 
|
| | no-repeat | \[image needed] |
| | | |
| | | |
| Header Background Position
Sets the header background starting position.
Not applicable when the parallax option (below) is enabled.
|Stretch header to background to fill space
Automatically resizes and scales the background image to fill all available space.
Header Background Overlay
Overlay that goes over the header background image.
Parallax Header
Subtly moves the header background when scrolling.
Note: Requires the background image to be taller than the visible header space
Animated Header Particles
Enables an animated geometric overlay across the header.
|
| | Yes | 
|
# Milk: Navbar position
Milk's navbar is located at the top of every page (with the exception of login pages).
### Navbar positions
There are 2 possible navbar positions in Milk:
| Option name | Values | Output |
| ------------------------------------------------------------------------------------------------------------ | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Navbar position
Defines where the navbar is located in relation to the header
|
| | Inside Header | 
|
***
### Changing navbar position
1. Open the FlightDeck extension (control panel)
2. Find "Navbar position"
3. Set as required
4. Submit
# Milk: Font options
### Pre-installed fonts
Milk comes pre-installed with the following fonts:
* Roboto (Default)
* Roboto Slab
* Bubbler One
* Dosis
* Exo 2
* Raleway
* Rubik
* Quicksand
***
### Changing font face
1. Open Flighteck extension (control panel)
2. Find "Font"
3. Set as desired
4. Submit
***
### Changing font sizes
Milk doesn't currently have a FlightDeck option for scaling options (maybe soon).
In the meantime, font sizes can be adjusted manually:
1. Open: `yourforum.com/styles/Milk_v2/template/overall_header.html`
2. Find:Layout type
Defines the content wrapper width
Fluid
(95% width)
|
|
| | Boxed
(1200px width)
|
|
***
### Changing the layout width
1. Open the FlightDeck extension (control panel)
2. Find "Layout type"
3. Set as required
4. Submit
***
### Adjusting the width values
The **fluid** width is defined in: `yourforum.com/styles/Milk_v2/theme/merlin.css`
```
.body-layout-Fluid #inner-wrap {
width: 95%;
margin: 0 auto;
}
```
The **boxed** width is defined in: `yourforum.com/styles/Milk_v2/theme/responsive/large-desktops.css`
```
/* Fix the body layout for large desktop devices */
.body-layout-Boxed .wrap {width: 1200px;}
```
See: [How to edit code files](/getting-started/how-to-edit-code-files)
***
### Responsive layout information
* Fluid layout is only applicable to viewports above 1200px width (unless changed manually, as above)
# Milk: Light / dark options
By changing the base colour, you can choose whether your forum is light or dark in appearance.
### Base colour previews
| Option name | Output |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Light | 
|
| Dark | 
|
***
### Choosing the base colour
1. Open the FlightDeck extension (control panel)
2. Find "Theme base colour"
3. Set as required
4. Submit
***
### Modifying the dark stylesheet
If you want to modify the dark stylesheet, the colour values are stored in: `yourforum.com/styles/Milk_v2/theme/colours_dark.css`
See: [How to edit code files](/getting-started/how-to-edit-code-files)
# Milk: Accent colour options
Milk allows you to either use a gradient preset colour scheme, or choose your own accent using a colour picker.
### Colour scheme previews
| Option name | Output |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Custom
|
| Aqua | |
| Blush | |
| Blue Lagoon | |
| Calm Darya | |
| Electric Violet | |
| HoneyDew | |
| Hot Red | |
| Ibiza Sunset | |
| Little Leaf | |
| Neon Blue | |
| Nighthawk | |
| Pacific Dream | |
| Pach | |
| Purple Love | |
| Rose Water | |
| Sahara | |
| Titanium | |
| Warm Sunset | |
***
### Choosing a preset colour scheme
1. Open the FlightDeck extension (control panel)
2. Find "Theme preset colour"
3. Set as required
4. Submit
***
### Setting your own accent colour
1. Open the FlightDeck extension (control panel)
2. Set "Theme Preset Colour" to **"Custom (use colour picker below)"**
3. On the row below, set "Theme Accent Colour" to a colour of your choice, or enter a [hexadecimal colour value](https://www.rapidtables.com/web/color/html-color-codes.html):List
Traditional forumlist
|
| List (Simplified)
List with 'topics' column removed and double-width 'posts' column
|
| Grid
Forum tiles with an assigned icon or background image
|
### Changing the forumlist display
1. Open the FlightDeck extension (control panel)
2. Find "Forumlist Display"
3. Set as required
4. Submit
***
### Assigning images to grid tiles
You can assign an icon or image background to a grid tile by using phpBB's native "forum image" feature.
1. Using a file manager, upload the image(s) you want to use to the following location: `yourforum.com/images/grid/`\
(You will probably need to create the new folder called "grid")
2. Navigate to: ACP (Admin Control Panel) → "Forums" (tab)
3. In the left sidebar, click "Manage forums"
4. Next to the forum you want to add the image to, click the green "Settings" icon
|
| | No | 
|
This option can be enabled in the FlightDeck extension, directly below the "Forumlist display" option.
***
### Responsive layout information
* When the list or list (simplified) option is selected, a dedicated responsive view will load for users browsing on small devices. This doesn't affect the grid template, as this automatically scales
* When the list or list (simplified) option is selected, the 'topics' column will be hidden on narrow tablets such as iPads in portrait orientation
# Milk: Content block headers
Content block headers precede certain content containers, such as categories and sidebar sections.
### Content block headers
| Option name | Output |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Stripe | 
|
| Block | |
### Choosing the block header
1. Open the FlightDeck extension (control panel)
2. Find "Content block headers"
3. Set as required
4. Submit
| Option name | Value | Output |
|---|---|---|
| Enable Sidebars? | Yes |  |
| No |  | |
| Sidebar Placement | Left only |  |
| Right only |  | |
| Both |  | |
| Enable Sidebar Profile Widget Shows profile information when logged in. Shows login form when logged out. | Yes |  |
| No |  | |
| Enable Sidebar Search Widget | Yes |  |
| No |  |
| Sidebar content | Preview | Code |
|---|---|---|
| 125 x 125 Grid |  | |
| Content block (matches accent colour) |  | |
| Content block (dark header) |  | |
| Content block (stripe) |  | |
| Everything else | e762f78ed16248d2b16038599dea663d-ae7ca0f1c02d45f0aef1b17d6a6b23df |
|
|
| | No | 
|
### Enabling the social bar
1. Open the FlightDeck extension (control panel)
2. Find "Hide Social Bar (footer)"
3. Set as required
4. Submit
***
### Adding or modifying links
1. Open the FlightDeck extension (control panel)
2. Scroll to the bottom
3. Following the link format, paste your links into the **Social Footer Code** section
4. Submit
Link format:
```
```
The icon image is served by FontAwesome. In this case fa-facebook represents the facebook icon. You can find a full list of supported icons here: [FontAwesome 4.7 Icons](https://fontawesome.com/v4/icons/).
Click an icon to find the fa- name, which can be used to replace fa-facebook above.
# Milk: Post profile side
Milk allows you to choose which side post profiles (username, avatar, post count etc) appear on. This also applies to private messages.
### Post profile side
| Value | Output |
| ----- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Right | 
|
| Left | 
|
### Setting the post profile side
1. Open the FlightDeck extension (control panel)
2. Find "Postprofile side"
3. Set as required
4. Submit
# Milk: Collapsible panels
Collapsible panels allow your users to hide sections they view infrequently. Preferences are stored using HTML5 local storage, and therefore will be remembered between sessions.
If enabled, collapsible panels will be available for the following containers:
* Categories
* Index page "Information" panel
* Viewforum "Information" panel
* Viewtopic "Information" panel
* Some sidebar panels if the example code has been used
### Collapsible panels
| Value | Output |
| ----- | ------------- |
| Yes | missing image |
| No | missing image |
***
### Enabling collapsible panels
1. Open the FlightDeck extension (control panel)
2. Find "Enable collapsible panels"
3. Set as required
4. Submit
# Milk: Scroll to top
The scroll to top button is an accessibility feature which, when clicked, will scroll to the top of the page.
It will appear if the user is able to scroll 100px beyond the top of the page.
|
| No | 
|
### Enabling rounded corners
1. Open the FlightDeck extension (control panel)
2. Find "Enable rounded corners"
3. Set as required
4. Submit
***
### Adjusting corner radius
The corner radii are defined in: `yourforum.com/Milk_v2/theme/rounded.css`
See: [How to edit code files](/getting-started/how-to-edit-code-files)
# Milk: Forum icon options
Milk uses FontAwesome CSS icons to differentiate between read / unread states. This allows faster loading times and lossless quality on all devices.
It is possible to use your own images as forum icons.
| Option name | Value |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Circle | 
|
| Square | 
|
### Switching icon shape
1. Open the FlightDeck extension (control panel)
2. Find "CSS icon shape"
3. Set as required
4. Submit
***
### Changing icon image
The icon values are defined in: yourforum.com/Milk\_v2/theme/icons\_forums\_topics.css
```
/* Set the icons */ /* Megaphone */
.global_read:before {content: "f0a1";}
.global_read_mine:before {content: "f0a1";}
.global_read_locked:before {content: "f0a1";}
.global_read_locked_mine:before {content: "f0a1";}
.global_unread:before {content: "f0a1";}
.global_unread_mine:before {content: "f0a1";}
.global_unread_locked:before {content: "f0a1";}
.global_unread_locked_mine:before {content: "f0a1";}
/* Megaphone */
.announce_read:before {content: "f0a1";}
.announce_read_mine:before {content: "f0a1";}
.announce_read_locked:before {content: "f0a1";}
.announce_read_locked_mine:before {content: "f0a1";}
.announce_unread:before {content: "f0a1";}
.announce_unread_mine:before {content: "f0a1";}
.announce_unread_locked:before {content: "f0a1";}
.announce_unread_locked_mine:before {content: "f0a1";}
/* External link */
.forum_link:before {content: "f08e";}
/* Speech Bubble */
.forum_read:before {content: "f068";}
.forum_read_subforum:before {content: "f068";}
/* Check */
.forum_unread:before {content: "f00c";}
.forum_unread_subforum:before {content: "f00c";}
/* Pin */
.sticky_read:before {content: "f08d";}
.sticky_read_mine:before {content: "f08d";}
.sticky_read_locked:before {content: "f08d";}
.sticky_read_locked_mine:before {content: "f08d";}
.sticky_unread:before {content: "f08d";}
.sticky_unread_mine:before {content: "f08d";}
.sticky_unread_locked:before {content: "f08d";}
.sticky_unread_locked_mine:before {content: "f08d";}
/* Right arrow */
.topic_moved:before {content: "f061";}
/* Envelope */
.pm_read:before {content: "f0e0";}
.pm_unread:before {content: "f0e0";}
/* Bar */
.topic_read:before {content: "f068";}
.topic_read_mine:before {content: "f068";}
.topic_read_hot:before {content: "f068";}
.topic_read_hot_mine:before {content: "f068";}
/* Tick */
.topic_unread:before {content: "f00c";}
.topic_unread_mine:before {content: "f00c";}
.topic_unread_hot:before {content: "f00c";}
.topic_unread_hot_mine:before {content: "f00c";}
/* Cross */
.forum_read_locked:before {content: "f00d";}
.forum_unread_locked:before {content: "f00d";}
.topic_read_locked:before {content: "f00d";}
.topic_read_locked_mine:before {content: "f00d";}
.topic_unread_locked:before {content: "f00d";}
.topic_unread_locked_mine:before {content: "f00d";}
```
Milk uses [FontAwesome 4.7 icons](https://fontawesome.com/v4/icons/) to represent read / unread states. After finding the new icon you want to use, open its page on the FontAwesome website where you'll be able to grab the **unicode** value.
Replace the unicode value above as necessary.
See: [How to edit code files](/getting-started/how-to-edit-code-files)
***
### Disabling the pulse animation
The pulsing animation is defined in: `yourforum.com/Milk_v2/theme/icons_forums_topics.css`
```
/* Box shadow for unread pulse icons */
@keyframes UnreadPulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(132,189,0,0.4);
box-shadow: 0 0 0 0 rgba(132,189,0,0.4);
-webkit-box-shadow: 0 0 0 0 rgba(132,189,0,0.4);
}
70% {
-moz-box-shadow: 0 0 0 8px rgba(132,189,0,0);
box-shadow: 0 0 0 8px rgba(132,189,0, 0);
-webkit-box-shadow: 0 0 0 8px rgba(132,189,0,0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(132,189,0,0);
box-shadow: 0 0 0 0 rgba(132,189,0,0);
-webkit-box-shadow: 0 0 0 0 rgba(132,189,0,0);
}
}
/* Box shadow for unread pulse icons */
@keyframes UnreadLockedPulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(189,0,0,0.4);
box-shadow: 0 0 0 0 rgba(189,0,0,0.4);
-webkit-box-shadow: 0 0 0 0 rgba(189,0,0,0.4);
}
70% {
-moz-box-shadow: 0 0 0 8px rgba(189,0,0,0);
box-shadow: 0 0 0 8px rgba(189,0,0, 0);
-webkit-box-shadow: 0 0 0 8px rgba(189,0,0,0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(189,0,0,0);
box-shadow: 0 0 0 0 rgba(189,0,0,0);
-webkit-box-shadow: 0 0 0 0 rgba(189,0,0,0);
}
}
```
You can delete this code to disable the animation.
# Milk: Global \ code
Experienced users can add code to the document \ tag through FlightDeck.
{% hint style="danger" %}
**Warning:** Bad things can happen if you accidentally enter unsafe code here. Please contact us if you're unsure about this feature.
{% endhint %}
### Adding global \ code
1. Open the FlightDeck extension (control panel)
2. Scroll down to **Global \ code**
3. Enter your code
4. Submit
***
### Output location
The output variable is located directly before the document's `` tag.
# Group Post Highlight
Let members of chosen groups highlight their own posts with their group's colour.
:palette: | Creating & managing highlight styles | Build a style's border, background, shadow and badge in the visual editor. | |
:users: | Assigning a style to a group | Give a group its highlight style and decide whether it's on by default. | |
:toggle-on: | The member highlight toggle | How the opt-in checkbox behaves on new posts, replies and edits. | |
:code: | Custom & per-theme CSS | Fine-tune a style's CSS globally or for one installed frontend style only. |