phpBB 3.1 style: Elegance

Discussion in 'Updates' started by Arty, Mar 14, 2015.

  1. Arty

    Arty Administrator Designer

    First phpBB 3.1 style has been released: Elegance.

    It looks similar to style used on this forum. Unlike XenForo style, phpBB 3.1 style is free.


    • Based on prosilver
    • Comes in 6 color variations (you can make custom color schemes with ColorizeIt)
    • All icons (except for forum/folder images and logo) have been replaced with Font Awesome and Glyph Icons glyphs.
    • Folder images and logo support high definition displays (such as Apple Retina). Samples taken with iPad Air, comparing style with prosilver so you could see the difference:
    • Restructured navigation. There are 3 navigation sections: main navigation, context navigation, breadcrumbs. Main navigation selected item automatically switches based on page you are browsing. Context navigation changes from page to page. Number of unread private messages and notifications are shown above navigation in red circles, making it easy to spot.
    • Sticky navigation. When you scroll down, navigation stays on top of browser window:
    • No more language specific icons. "Online" icon has been replaced with CSS3 ribbon that is shown semi-transparent above avatar:
    • CSS files have been changed to Sass, a very powerful language for generating stylesheets. Style loads only 1 CSS file instead of multiple CSS files, reducing page loading speed.
    • Style has several configuration options.


    There are 2 configuration files that serve different purposes:
    • template/_style_config.html: It sets variables that can be changed in templates.
      • $HIDE_FORUM_DESCRIPTION: toggles forum title and description in header
      • $WRAP_HEADER: toggles inclusion of header and navigation into content wrapper
      • $WRAP_FOOTER: toggles inclusion of footer into content wrapper
    • theme/_style_config.scss: It sets variables that can be changed in theme. See "Sass" section below.
      • $show-logo: toggles logo in header
      • $show-forum-title: toggles forum title. See similar variable in template/_style_config.html
      • $center-logo: if enabled, logo will be centered. If disabled, logo will be aligned to left
      • $logo-width: logo width.
      • $logo-block-padding: padding above and below logo (used for short logos, like default one)
      • $profile-width: width of poster profile section. Unlike prosilver that uses percentages, this style uses fixed width for profiles that looks better at different screen resolutions.
      • $use-wrapper: toggles content wrapper.
      • $max-width: toggles fixed width. Set to "none" to make layout fluid.


    This style uses Sass pre-processor for stylesheet. You can edit stylesheet in 2 ways:

    1. Edit stylesheet.css directly (bad idea).

    2. Edit any .scss file and then compile it into stylesheet.css

    To generate stylesheet.css run this command from theme directory:
    scss stylesheet.scss > stylesheet.css
    To be able to run that command you must have Sass installed on your computer. Click here for installation instructions.
    Wikinger and nextgen like this.