How to customize forum layout

• phpBB tutorials
• phpBB 3.1 Tutorials
• phpBB 3.1 styles

phpBB 3.1 Tutorial

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 line

Code:

$max-width:                 1152px;   // Maximum width. Set to "none" to make layout fluid

value in that line might be different in some styles. Search for $max-width to find that line.

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 fluid

Show or hide forum name and description

To show or hide forum name and description in header, open theme/_style_config.scss, find this

Code:

$show-forum-title:             false;   // true or false

and 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.

To customize font size of forum name and description find this code in theme/_style_config.scss

Code:

$h1-font-size:               $font-size + 10px;

and change value. On line below it you can also change font.

To customize it further look for this code in theme/_common.scss

Code:

h1, p.sitename

How to align logo to left or center

To align logo to left or center of header block find this code in theme/_style_config.scss

Code:

$center-logo:               false;   // true or false

To align logo to left (right for RTL languages) set value to false (as in code above).

To center logo set value to true

Code:

$center-logo:               true;   // true or false

How 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

Code:

$use-wrapper:               false;   // true or false

and change value to ether 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 code

Code:

<!-- DEFINE $WRAP_HEADER = 2 -->
<!-- DEFINE $WRAP_FOOTER = 0 -->

and change values.

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.css

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);
   }
}

If you want blue background to cover whole forum, do this:

In theme/_colours.scss find this

Code:

html, body {
   color: $text-color;
   @if $use-wrapper {
     background: $page-background;

add after it

Code:

    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");

then remove this code

Code:

@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);
   }
}

and remove this code

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, find

Code:

html, body {
    color: $text-color;
    @if $use-wrapper {
        background-color: $page-background;

on last line of that code change

Code:

        background-color: $page-background;

to your background rule like this

Code:

        background: #ff0000 url('./images/background.png') 50% 50% no-repeat;
        background-size: cover;

Change parts of that code as needed.

Problems

If you have any questions or ran into problems, please post your questions on support forum.