First of all you need installed phpBB forum. If you already have it, download we_universal and extract the archive. Copy we_universal/ directory (it should directly contain imageset/, template/, theme/ and style.cfg) to styles/ directory.

Now go to Administration Control Panel, open STYLES tab and click Install on the list of uninstalled styles. In the next step check Make default style option and click Submit button. That's it!

In order to update the style easily in the future and keep your changes, we recommend creating a separate we_universal_custom.css file in styles/we_universal/theme/ directory. You need to include it in stylesheet.css – in a new line at the end of file add:

@import url("we_universal_custom.css");

Now you can override any CSS class or place your custom code in the new file. The last thing you need to remember after doing some changes is refreshing style components. Go to Administration Control Panel, open STYLES tab and navigate through Templates, Themes and Imagesets. In each section click Refresh in a row refering to we_universal. If you don't wont to do it manually every time, you can enable Recompile stale style components option in Load settings on GENERAL tab.

Header background image is located in styles/we_universal/theme/images/dashboard.jpg. You can overwrite it or place a new one in that directory. If you choose the second option, you need to update image path. Please refer to How to apply custom changes? section and add the following code in we_universal_custom.css:

.inventea-dashboard {
	background-image: url("{T_THEME_PATH}/images/YOUR_IMAGE_NAME");
}

Please refer to How to apply custom changes? section and add the following code in we_universal_custom.css:

.inventea-dashboard {
	min-height: YOUR_HEIGHT;
}

Please refer to How to apply custom changes? section and add the following code in we_universal_custom.css:

.inventea-wrapper,
.inventea-dashboard,
.inventea-footer {
	width: YOUR_WIDTH;
	max-width: YOUR_MAX_WIDTH;
}

Please refer to How to apply custom changes? section and add the following code in we_universal_custom.css:

.inventea-wrapper,
.inventea-dashboard,
.inventea-footer {
	width: YOUR_WIDTH;
	max-width: none;
}

Please refer to How to apply custom changes? section and add the following code in we_universal_custom.css:

.forabg,
.forumbg,
#cp-main table.table1,
.section-ucp ul.topiclist li.header,
.section-mcp ul.topiclist li.header {
	background: YOUR_COLOUR;
}

Open styles/we_universal/template/overall_header.html. If you would like to add an item to the top menu, find:

<li class="inventea-menu-item"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>

If you would like to add an item to the bottom menu, find:

<li class="inventea-menu-item"><a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e">{L_PROFILE}</a></li>

In a new line (before or after) add the following code:

<li class="inventea-menu-item"><a href="ITEM_URL">ITEM_NAME</a></li>

we_universal 2.3.0 was built from scratch using phpBB template inheritance and some new technologies. This will allow faster developing and much easier updating. Unfortunately we_universal 2.3.0 isn't compatible with older versions. We recommend replacing old installation with the new one and reapplying all custom changes.

Creat new directory called headers/ in styles/we_universal/theme/ location. You should put all header images in the new directory. Now open includes/functions.php and find:

// The following assigns all _common_ variables that may be used at any point in a template.
$template->assign_vars(array(

Add before:

// Path to directory with header images (must contain trailing slash)
$inventea_images_path = "{$web_path}styles/" . rawurlencode($user->theme['theme_path']) . '/theme/headers/';

// Get list of images in directory
$inventea_images_list = array_diff(scandir($inventea_images_path), array('.', '..'));

if (!empty($inventea_images_list))
{
	// Get random image name
	$inventea_random_image = $inventea_images_list[array_rand($inventea_images_list)];
}

Find:

'SITE_LOGO_IMG'			=> $user->img('site_logo'),

Add after:

'INVENTIA_RANDOM_IMAGE' => (isset($inventea_random_image)) ? $inventea_images_path . $inventea_random_image : '',

Next open styles/we_universal/template/overall_header.html and find:

<div class="inventea-dashboard">

Replace with:

<div class="inventea-dashboard" style="background-image: url({INVENTIA_RANDOM_IMAGE});">

That's it! Don't forget to upload images.

To speed up your forum we recommend including libraries from CDN and minifying CSS code. Start by measuring time needed to load your forum and total size of downloaded files. You can do this at http://tools.pingdom.com/fpt/, in Chrome DevTools or other similar tool.

Now open styles/we_universal/template/overall_footer.html and find:

<script src="{T_TEMPLATE_PATH}/assets/zepto/zepto.min.js"></script>

Zepto.js is a lightweight alternative for jQuery. If you still need jQuery replace above line with (you can use any CDN service):

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Otherwise replace it with:

<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.1.3/zepto.min.js"></script>

To minify CSS code you can use http://www.csscompressor.com online compressor. Go to styles/we_universal/theme/ directory, copy content of each file (or at least we_universal.css) and paste it to the compressor. Choose the highest level of compression and click Compress. Now save minified content to new files called filename.min.css eg. we_universal.min.css. The last thing you need to do is updating filenames in stylesheet.css (add .min before file extensions). That's all. Your forum should load a bit faster and use less bandwidth. You can repeat measurements and compare results.

Please refer to How to apply custom changes? section and add the following code in we_universal_custom.css:

.inventea-header {
	background: YOUR_COLOUR;
}

To completely remove background use the following code:

.inventea-header {
	background: none;
}

If you see this message in your forum logs, you need to add a new imageset that is relevant to your forum language. Go to styles/we_universal/imageset/ on your server and copy (duplicate) en/ directory. Rename the new directory to match your language code (it sholud be given in error message instead of LANGUAGE_CODE). For example for Polish language it's pl. After you correctly rename the directory, the message should no more appear in logs.