This tutorial explains how to change overall forum layout in phpBB 3.1 styles: how to switch between fixed and fluid layouts, how to change background.
Important: after editing any .scss files do not forget to recompile stylesheet. See this tutorial.Fixed and fluid layout
All styles for phpBB 3.1 support both fixed width layout and fluid layout. Switching between them is very simple.
Open theme/_style_config.scss, find this linevalue in that line might be different in some styles. Search for $max-width to find that line.Code:$max-width: 1152px; // Maximum width. Set to "none" to make layout fluid
To change layout you need to simply change that variable's value. To enable fixed width, enter width value in pixels, like in code above.
To enable fluid layout set value to none:
Code:$max-width: none; // Maximum width. Set to "none" to make layout fluidShow or hide forum name and description
To show or hide forum name and description in header, open theme/_style_config.scss, find thisand change value to true or false. Value set to false means forum name and description will not be shown, value set to true means forum name and description will be shown.Code:$show-forum-title: false; // true or false
To customize font size of forum name and description find this code in theme/_style_config.scss
and change value. On line below it you can also change font.Code:$h1-font-size: $font-size + 10px;
To customize it further look for this code in theme/_common.scssCode:h1, p.sitenameHow to align logo to left or center
To align logo to left or center of header block find this code in theme/_style_config.scssTo align logo to left (right for RTL languages) set value to false (as in code above).Code:$center-logo: false; // true or false
To center logo set value to trueCode:$center-logo: true; // true or falseHow to enable or disable forum wrapper
phpBB 3.1 styles have option to wrap forum in additional container. When it is enabled, area around forum has different background. For most styles difference is small, but for some styles, like "Black", different is very big.
Samples of layout without wrapper (left) and with wrapper (right):
How to toggle it? Edit file theme/_style_config.scss. Find this line
and change value to ether true or false.Code:$use-wrapper: false; // true or false
But that is not all. You can select what parts of forum wrapper affects. Content area is wrapped by default as long as wrapper is enabled, but wrapper can also wrap navigation, header and footer.
To customize it edit file template/_style_config.html. Find this codeand change values.Code:<!-- DEFINE $WRAP_HEADER = 2 --> <!-- DEFINE $WRAP_FOOTER = 0 -->
To not include footer in wrapper set $WRAP_FOOTER value to 0
To include footer in wrapper set $WRAP_FOOTER value to 1
To not include both header and navigation in wrapper set $WRAP_HEADER value to 0
To include navigation in wrapper set $WRAP_HEADER value to 2
To include both header and navigation in wrapper set $WRAP_HEADER value to 1
After editing _style_config.html go to admin control panel and click "purge cache" button.How to edit blue background in "Black" style
"Black" style has unique layout of content wrapper: it has blue background that covers only top part of page. This part of tutorial explains how to change it.
If you want to completely remove blue background you have two options:
1. Disable content wrapper. See section above.
2. Remove blue background from content wrapper. Remove this code from theme/_colours.cssIf you want blue background to cover whole forum, do this:Code:@if $use-wrapper { #body-wrapper { background: desaturate(darken($primary-color, 37%), 28%) url("./images/pattern.png"); background: -webkit-linear-gradient(top, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 400px), desaturate(darken($primary-color, 37%), 28%) url("./images/pattern.png"); background: linear-gradient(to bottom, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 400px), desaturate(darken($primary-color, 37%), 28%) url("./images/pattern.png"); border-bottom-color: rgba(darken($primary-color, 20%), .2); } }
In theme/_colours.scss find thisadd after itCode:html, body { color: $text-color; @if $use-wrapper { background: $page-background;then remove this codeCode:background: desaturate(darken($primary-color, 37%), 28%) url("./images/pattern.png"); background: -webkit-linear-gradient(top, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 400px) repeat-x, desaturate(darken($primary-color, 37%), 28%) url("./images/pattern.png"); background: linear-gradient(to bottom, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 400px) repeat-x, desaturate(darken($primary-color, 37%), 28%) url("./images/pattern.png");and remove this codeCode:@if $use-wrapper { body { background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 400px, rgba(0, 0, 0, 0) 800px); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 400px, rgba(0, 0, 0, 0) 800px); } }Code:@if $use-wrapper { #body-wrapper { background: desaturate(darken($primary-color, 37%), 28%) url("./images/pattern.png"); background: -webkit-linear-gradient(top, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 400px), desaturate(darken($primary-color, 37%), 28%) url("./images/pattern.png"); background: linear-gradient(to bottom, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 400px), desaturate(darken($primary-color, 37%), 28%) url("./images/pattern.png"); border-bottom-color: rgba(darken($primary-color, 20%), .2); } }How to change background color or set custom background image
First you need to enable content wrapper. Without wrapper your background color will affect content area, that might look very ugly. See tutorial above.
If you want to change only background color, change value of variable $page-background in theme/_style_config.scss
If you want to set custom background color and image, do this: open theme/_colours.scss, findon last line of that code changeCode:html, body { color: $text-color; @if $use-wrapper { background-color: $page-background;to your background rule like thisCode:background-color: $page-background;Change parts of that code as needed.Code:background: #ff0000 url('./images/background.png') 50% 50% no-repeat; background-size: cover;Problems
If you have any questions or ran into problems, please post your questions on support forum.