Bug 1835869: Add skin background image to page header area

- Created an option in Skin customizing where users may select an image
  as their page header
- Reorganised tabs and their titles
- Skin thumbnails display colour/image of header
- drop the old viewbgimg column and add the headingbgimg column

behatnotneeded: to be added later

Change-Id: Ib5bb4714de479e9c10237d24aa653a5ea227a5f7

htdocs/artefact/file/lib.php

@@ -565,7 +565,7 @@ abstract class ArtefactTypeFileBase extends ArtefactType {
                 LEFT OUTER JOIN {artefact} api ON api.parent = a.id AND api.artefacttype = \'profileicon\'
                 LEFT OUTER JOIN {view_artefact} va ON va.artefact = a.id
                 LEFT OUTER JOIN {artefact_attachment} aa ON aa.attachment = a.id
-                LEFT OUTER JOIN {skin} s ON (s.bodybgimg = a.id OR s.viewbgimg = a.id)
+                LEFT OUTER JOIN {skin} s ON (s.bodybgimg = a.id OR s.headingbgimg = a.id)
                 LEFT OUTER JOIN {interaction_forum_post_attachment} fpa ON fpa.attachment = a.id
                 LEFT OUTER JOIN {usr} u ON a.id = u.profileicon AND a.owner = u.id';
 

htdocs/artefact/file/profileicons.json.php

@@ -18,7 +18,7 @@ $result = get_records_sql_array('SELECT a.id, a.title, a.note, (u.profileicon =
     FROM {artefact} a
     LEFT OUTER JOIN {view_artefact} va ON va.artefact = a.id
     LEFT OUTER JOIN {artefact_attachment} aa ON aa.attachment = a.id
-    LEFT OUTER JOIN {skin} s ON (s.bodybgimg = a.id OR s.viewbgimg = a.id)
+    LEFT OUTER JOIN {skin} s ON (s.bodybgimg = a.id OR s.headingbgimg = a.id)
     LEFT OUTER JOIN {interaction_forum_post_attachment} fpa ON fpa.attachment = a.id
     LEFT OUTER JOIN {usr} u ON (u.id = a.owner)
     WHERE artefacttype = \'profileicon\'

htdocs/lang/en.utf8/pieforms.php

@@ -74,6 +74,7 @@ $string['element.select.other'] = 'Other';
 $string['element.select.remove'] = 'Remove "%s"';
 
 $string['element.color.transparent'] = 'Default or ';
+$string['element.font.themedefault'] = 'Use Theme font';
 
 $string['rule.before.before'] = 'This cannot be after the field "%s"';
 

htdocs/lang/en.utf8/skin.php

@@ -16,6 +16,15 @@ $string['pluginname'] = 'Skin';
 $string['myskins'] = 'Skins';
 $string['siteskinmenu'] = 'Skins';
 
+$string['themedefault'] = 'Theme default';
+$string['headerbackgroundcolor'] = 'Header background colour';
+$string['headerbackgroundcolordescription'] = 'Background color for page header - this will not show if a header image has been selected';
+$string['headerbackgroundimage'] = 'Header background image';
+$string['headerbackgroundimagedescription'] = 'Minimum ideal width: 1832px. Minimum ideal height: 232px.';
+$string['bodybackgroundcolour'] = 'Page background colour';
+$string['bodybackgroundimage'] = 'Page background image';
+
+
 $string['deletethisskin'] = 'Delete this skin';
 $string['skindeleted'] = 'Skin deleted';
 $string['cantdeleteskin'] = 'You cannot delete this skin.';

htdocs/lib/db/install.xml

@@ -1140,7 +1140,7 @@
                 <FIELD NAME="type" TYPE="char" LENGTH="10" NOTNULL="true" DEFAULT="private" />
                 <FIELD NAME="viewskin" TYPE="text" LENGTH="big" NOTNULL="true" />
                 <FIELD NAME="bodybgimg" TYPE="int" LENGTH="10" NOTNULL="false" />
-                <FIELD NAME="viewbgimg" TYPE="int" LENGTH="10" NOTNULL="false" />
+                <FIELD NAME="headingbgimg" TYPE="int" LENGTH="10" NOTNULL="false" />
                 <FIELD NAME="ctime" TYPE="datetime" NOTNULL="false" />
                 <FIELD NAME="mtime" TYPE="datetime" NOTNULL="false" />
             </FIELDS>

htdocs/lib/db/upgrade.php

@@ -1459,5 +1459,31 @@ function xmldb_core_upgrade($oldversion=0) {
         }
     }
 
+    if ($oldversion < 2019090901) {
+        log_debug('Update the "skin" table to change where we record background images');
+        $table = new XMLDBTable('skin');
+        if (table_exists($table)) {
+            log_debug('Adding headingbgimg');
+            $field = new XMLDBField('headingbgimg');
+            if (!field_exists($table, $field)) {
+                $field->setAttributes(XMLDB_TYPE_INTEGER, 10);
+                add_field($table, $field);
+            }
+
+            $field = new XMLDBField('viewbgimg');
+            if (field_exists($table, $field)) {
+                log_debug('Removing viewbgimg');
+                if ($records = get_records_sql_array("SELECT viewbgimg AS aid FROM {skin} WHERE viewbgimg > 0")) {
+                    foreach ($records as $record) {
+                        // Need to remove the view bg image
+                        require_once(get_config('libroot') . 'skin.php');
+                        Skin::remove_background($record->aid);
+                    }
+                }
+                drop_field($table, $field);
+            }
+        }
+    }
+
     return $status;
 }

htdocs/lib/mahara.php

@@ -3484,7 +3484,7 @@ function artefact_in_view($artefact, $view) {
             SELECT s.id
             FROM {view} v INNER JOIN {skin} s
                 ON v.skin = s.id
-            WHERE v.id = ? AND ? in (s.bodybgimg, s.viewbgimg)
+            WHERE v.id = ? AND ? in (s.bodybgimg, s.headingbgimg)
     ";
     $params = array_merge($params, array($view, $artefact->get('id')));
 

htdocs/lib/skin.php

@@ -260,11 +260,11 @@ class Skin {
         else {
             $fordb->bodybgimg = null;
         }
-        if (isset($this->viewskin['view_background_image'])) {
-            $fordb->viewbgimg = $this->viewskin['view_background_image'];
+        if (isset($this->viewskin['header_background_image'])) {
+            $fordb->headingbgimg = $this->viewskin['header_background_image'];
         }
         else {
-            $fordb->viewbgimg = null;
+            $fordb->headingbgimg = null;
         }
 
         db_begin();
@@ -598,7 +598,12 @@ class Skin {
      * - Complete Guide to Pre-Installed Fonts in Linux, Mac, and Windows @ http://www.apaddedcell.com/ ...
      * - Better CSS Font Stacks @ http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
      */
-    public static function get_css_font_family_from_font_name($font) {
+    public static function get_css_font_family_from_font_name($font, $type='text') {
+        if ($font === '') {
+            global $THEME;
+            $font = Skin::get_all_theme_fonts($type)[$THEME->basename];
+        }
+
         $fontdata = get_record('skin_fonts', 'name', $font);
         return $fontdata->fontstack . ', ' . $fontdata->genericfont;
     }
@@ -721,7 +726,13 @@ class Skin {
      * @param string $font The name of the font
      * @return string|false The path to the font, or false if not found
      */
-    public static function get_path_to_previewfile($fontname) {
+    public static function get_path_to_previewfile($fontname, $type='text') {
+        $font = false;
+        $theme = '';
+        if ($fontname === '') {
+            global $THEME;
+            $fontname = Skin::get_all_theme_fonts($type)[$THEME->basename];
+        }
         $fontdata = get_record('skin_fonts', 'name', $fontname);
         if (!$fontdata) {
             $font = false;
@@ -729,6 +740,15 @@ class Skin {
         else if ($fontdata->fonttype == 'common') {
             $font = get_config('docroot') . 'lib/fonts/' . $fontdata->previewfont;
         }
+        else if (preg_match('/^t_(.*)/', $fontdata->fonttype, $matches)) {
+            if ($matches[1]) {
+                $theme = $matches[1];
+                $fontfile = get_config('docroot') . 'theme/' . $theme . '/fonts/' . strtolower($fontdata->name) . '/' . $fontdata->previewfont;
+                if (file_exists($fontfile) && is_readable($fontfile)) {
+                    $font = $fontfile;
+                }
+            }
+        }
         else {
             $fontfile = get_config('dataroot') . 'skins/fonts/' . $fontdata->name . '/' . $fontdata->previewfont;
             if (file_exists($fontfile)) {
@@ -743,7 +763,6 @@ class Skin {
         return $font;
     }
 
-
     /**
      * Converts 6-digit hex color #RRGGBB to rgb(RRR, GGG, BBB)
      * @param unknown_type $color_hex
@@ -756,31 +775,33 @@ class Skin {
     /**
      * Gets font sizes for heading, sub-heading and normal text from given relative size (as in CSS).
      * Relative size can be one of following: xx-small, x-small, small, medium, large, x-large or xx-large
+     * The font size of a page header is not affected by user chosen font size
+     *
      * @param string $font_size
      * @return array
      */
     private static function get_font_sizes($font_size) {
         switch ($font_size) {
             case 'xx-small':
-                return array(7, 5, 3);
+                return array(9, 5, 3);
                 break;
             case 'x-small':
-                return array(8, 6, 4);
+                return array(9, 6, 4);
                 break;
             case 'small':
                 return array(9, 7, 5);
                 break;
             case 'medium':
-                return array(10, 8, 6);
+                return array(9, 8, 6);
                 break;
             case 'large':
-                return array(12, 10, 8);
+                return array(9, 10, 8);
                 break;
             case 'x-large':
-                return array(14, 12, 10);
+                return array(9, 12, 10);
                 break;
             case 'xx-large':
-                return array(16, 14, 12);
+                return array(9, 14, 12);
                 break;
             default:
                 return array(9, 7, 5);
@@ -840,6 +861,19 @@ class Skin {
         return array('x' => $tilepositionx, 'y' => $tilepositiony);
     }
 
+    private static function imageheaderfill(&$dst_im, $src_fill, $zoom_fill, $align_fill=1, $header_width, $header_height, $xoffset = 0) {
+        $layer = imagecreatetruecolor(imagesx($dst_im), imagesy($dst_im));
+        // Turn off alpha blending and set alpha flag
+        imagealphablending($layer, false);
+        imagesavealpha($layer, true);
+
+        // Create resized (zoomed) version of the tile image, used for filling...
+        $tile = imagecreatetruecolor(imagesx($src_fill) * $zoom_fill, imagesy($src_fill) * $zoom_fill);
+        imagealphablending($tile, false);
+        imagesavealpha($tile, true);
+        imagecopyresampled($tile, $src_fill, $xoffset, 0, 0, 0, imagesx($src_fill) * $zoom_fill, imagesy($src_fill) * $zoom_fill, imagesx($src_fill), imagesy($src_fill));
+        imagecopyresampled($dst_im, $tile, 0, 0, 0, 0, $header_width, $header_height, $header_width, $header_height); // black
+    }
 
     /**
      * Fill in the backgrounds in the thumbnail image
@@ -1009,17 +1043,66 @@ class Skin {
             self::imagebackgroundfill($img2, $viewbackgroundfill, Skin::PREVIEW_THUMBNAIL_ZOOM, intval($skin['view_background_repeat']), intval($skin['view_background_position']));
         }
 
-        // ========== SAMPLE HEADING AND TEXT ==========
+        // ========== SAMPLE HEADING BACKGROUND IMAGE/COLOUR AND TEXT ==========
+
+        // The text in the page header is not affected by the font size chosen by the user
+        $header_font_size = self::get_font_sizes($skin['view_text_font_size'])[0];
+
+        // Allocate heading sizes, text size and emphasized size
         list($heading_size, $emphasized_size, $text_size) = self::get_font_sizes($skin['view_text_font_size']);
         list($r, $g, $b) = self::get_rgb_from_hex($skin['view_text_heading_color']);
 
-        $heading_color = imagecolorallocate($img, $r, $g, $b);
+        // Allocate heading_text_color
+        list($r, $g, $b) = self::get_rgb_from_hex($skin['view_text_heading_color']);
+        $heading_text_color = imagecolorallocate($img, $r, $g, $b);
+
+        // Allocate heading_background_color
+        list($r, $g, $b) = self::get_rgb_from_hex($skin['header_background_color']);
+        $heading_background_color = imagecolorallocate($img, $r, $g, $b);
+
+        $headerwidth = Skin::PREVIEW_WIDTH - intval(((100 - $skin['view_background_width']) / 100) * Skin::PREVIEW_WIDTH);
+        $headerheight = $heading_size ;
+
+        // Draw header background colour block on the VIEW and BODY
+        imagefilledrectangle($img, 0, 0, $headerwidth, $headerheight + ($header_font_size * 2.5), $heading_background_color);
+        imagefilledrectangle($img2, 0, 0, $headerwidth, $headerheight + ($header_font_size * 2.5), $heading_background_color);
+
+        // Replace header colour with sample header image if there is one allocated
+        $imagewidth = 0; // @TODO need to stretch the thumbnail if image with for header is less than headerwidth
+        if (isset($skin['header_background_image']) && $skin['header_background_image'] != null) {
+            require_once(get_config('docroot') . 'artefact/file/lib.php');
+            $fileid = $skin['header_background_image'];
+            $fileobj = artefact_instance_from_id($fileid);
+            $filetype = $fileobj->get('filetype');
+
+            $image = new ArtefactTypeImage($fileid);
+            $imagewidth = $image->get('width');
+
+            switch ($filetype) {
+              case "image/gif":
+                  $headerimage = imagecreatefromgif($fileobj->get_path());
+                  break;
+              case "image/jpeg":
+                  $headerimage = imagecreatefromjpeg($fileobj->get_path());
+                  break;
+              case "image/png":
+              default:
+                  $headerimage = imagecreatefrompng($fileobj->get_path());
+                  break;
+
+            }
+            // Draw header image on the VIEW and BODY
+            self::imageheaderfill($img, $headerimage,  Skin::PREVIEW_THUMBNAIL_ZOOM*1.2, 1, $headerwidth, $headerheight + ($header_font_size * 2.6));
+            self::imageheaderfill($img2, $headerimage,  Skin::PREVIEW_THUMBNAIL_ZOOM*1.2, 1, $headerwidth, $headerheight + ($header_font_size * 2.6), -22);
+        }
+
         // Even though this text is only used in preview images, it's possible the site might want to change
         // it for localization purposes, for instance if they're primarily using a non-Latin alphabet
         $heading_text = get_string('previewheading', 'skin');
-        $heading_font = self::get_path_to_previewfile($skin['view_heading_font_family']);
-        // Add the sample heading
-        imagettftext($img2, $heading_size, 0, 10, $heading_size+8, $heading_color, $heading_font, $heading_text);
+        $heading_font = self::get_path_to_previewfile($skin['view_heading_font_family'], 'heading');
+
+        // Add the sample heading title - the font size does not affect the text within page header
+        imagettftext($img2, $heading_size, 0, 10, $header_font_size+10, $heading_text_color, $heading_font, $heading_text);
 
         list($r, $g, $b) = self::get_rgb_from_hex($skin['view_text_emphasized_color']);
         $emphasized_color = imagecolorallocate($img, $r, $g, $b);
@@ -1027,31 +1110,39 @@ class Skin {
         $line_color = imagecolorallocate($img, $r, $g, $b);
         $emphasized_text1 = get_string('previewsubhead1', 'skin'); // Latin for text
         $emphasized_text2 = get_string('previewsubhead2', 'skin');    // Latin for image
-        $emphasized_font = self::get_path_to_previewfile($skin['view_heading_font_family']);
+        $emphasized_font = self::get_path_to_previewfile($skin['view_heading_font_family'], 'heading');
+
+        // Calculate y positions for drawing
+        $subheading_y_pos = $header_font_size*4 + $emphasized_size + $emphasized_size;
+        $underline_y_pos = $subheading_y_pos + ($heading_size/2) ;
+        $sampleimage_y_pos = $underline_y_pos + $text_size;
+
+        // Add the sample sub-heading 10000
+        imagettftext($img2, $emphasized_size, 0, 10, $subheading_y_pos, $emphasized_color, $emphasized_font, $emphasized_text1);
 
-        // Add the sample sub-heading 1
-        imagettftext($img2, $emphasized_size, 0, 10, $heading_size+$emphasized_size+16, $emphasized_color, $emphasized_font, $emphasized_text1);
         // Add second column to the preview thumbnail, if the width of the view is greater or equal 70%
         // or the size of regular text is less than 8...
         if (intval($skin['view_background_width']) >= 70 && $text_size < 8) {
             // Add sample picture
             $sample_img = imagecreatefrompng($THEME->get_path('images/skin_preview_img.png'));
-            imagefilledrectangle($img2, 5, $heading_size + $emphasized_size + 18, imagesx($img2) - imagesx($sample_img) - 20, $heading_size + $emphasized_size + 18, $line_color);
-            // Add the sample sub-heading 2
-            imagettftext($img2, $emphasized_size, 0, imagesx($img2) - imagesx($sample_img) - 10, $heading_size + $emphasized_size + 16, $emphasized_color, $emphasized_font, $emphasized_text2);
-            imagefilledrectangle($img2, imagesx($img2) - imagesx($sample_img) - 15, $heading_size + $emphasized_size + 18, imagesx($img2) - 5, $heading_size + $emphasized_size + 18, $line_color);
-            imagecopyresampled($img2, $sample_img, imagesx($img2) - imagesx($sample_img) - 10, $heading_size + $emphasized_size + $text_size + 21, 0, 0, imagesx($sample_img), imagesy($sample_img), imagesx($sample_img), imagesy($sample_img));
+            // Add the sample sub-heading 2 and underline, then merge $sample_img into $img2
+            imagettftext($img2, $emphasized_size, 0, imagesx($img2) - imagesx($sample_img) - 10, $subheading_y_pos, $emphasized_color, $emphasized_font, $emphasized_text2);
+            imagefilledrectangle($img2, imagesx($img2) - imagesx($sample_img) - 15, $underline_y_pos, imagesx($img2) - 5, $underline_y_pos, $line_color);
+
+            // Add underline for sub-heading 1 where x pos stops at second column break
+            imagefilledrectangle($img2, 5, $underline_y_pos, imagesx($img2) - imagesx($sample_img) - 20, $underline_y_pos, $line_color);
+            imagecopyresampled($img2, $sample_img, imagesx($img2) - imagesx($sample_img) - 10, $sampleimage_y_pos, 0, 0, imagesx($sample_img), imagesy($sample_img), imagesx($sample_img), imagesy($sample_img));
         }
         else {
-            imagefilledrectangle($img2, 5, $heading_size + $emphasized_size + 18, imagesx($img2) - 10, $heading_size + $emphasized_size + 18, $line_color);
+            imagefilledrectangle($img2, 5, $underline_y_pos, imagesx($img2) - 10, $underline_y_pos, $line_color);
         }
 
         // Add some sample lines of text
         list($r, $g, $b) = self::get_rgb_from_hex($skin['view_text_font_color']);
         $text_color = imagecolorallocate($img, $r, $g, $b);
-        $text_font = self::get_path_to_previewfile($skin['view_text_font_family']);
+        $text_font = self::get_path_to_previewfile($skin['view_text_font_family'], 'text');
         for ($i = 1; $i <= 9; $i++) {
-            imagettftext($img2, $text_size, 0, 10, $heading_size+$emphasized_size+$text_size+15+$i*(2*$text_size), $text_color, $text_font, get_string("previewtextline{$i}", 'skin'));
+            imagettftext($img2, $text_size, 0, 10, $underline_y_pos + $i*(2*$text_size), $text_color, $text_font, get_string("previewtextline{$i}", 'skin'));
         }
 
         // ========== COPY VIEW PART OVER BODY PART OF THE THUMBNAIL ==========
@@ -1079,7 +1170,7 @@ class Skin {
      * @param int $aid Artefact id of the background image to remove from skins
      */
     public static function remove_background($aid) {
-        $skinstoupdate = get_records_select_array('skin', 'bodybgimg = ? OR viewbgimg = ?', array($aid, $aid), 'id');
+        $skinstoupdate = get_records_select_array('skin', 'bodybgimg = ? OR headingbgimg = ?', array($aid, $aid), 'id');
         if (!empty($skinstoupdate) && is_array($skinstoupdate)) {
             foreach ($skinstoupdate as $skin) {
                 $skin = new Skin($skin->id);
@@ -1087,8 +1178,8 @@ class Skin {
                 if (isset($viewskin['body_background_image']) && $viewskin['body_background_image'] == $aid) {
                     $viewskin['body_background_image'] = 0;
                 }
-                if (isset($viewskin['view_background_image']) && $viewskin['view_background_image'] == $aid) {  // TODO remove this
-                    $viewskin['view_background_image'] = 0;
+                if (isset($viewskin['header_background_image']) && $viewskin['header_background_image'] == $aid) {
+                    $viewskin['header_background_image'] = 0;
                 }
                 $skin->set('viewskin', $viewskin);
                 $skin->commit();
@@ -1167,6 +1258,28 @@ class Skin {
         return $options;
     }
 
+    /**
+     * Returns an array of theme's with their theme fonts.
+     * Currently all themes have one font for both heading and text except for 'raw'
+     * @param type $type   Set the type of font, eg text vs heading
+     * @return array
+     */
+    public static function get_all_theme_fonts($type='text') {
+        $genericfont = ($type == 'text') ? 'sans-serif' : 'serif';
+        $fontdata = get_records_sql_array('
+            SELECT SUBSTRING(fonttype, 3) AS theme, fonttype, name, genericfont FROM {skin_fonts} WHERE fonttype LIKE ? ORDER BY fonttype', array('t_%')
+        );
+        $data = array();
+        if ($fontdata) {
+            foreach ($fontdata as $font) {
+                if ($font->theme != 'raw' || ($font->theme == 'raw' && $font->genericfont == $genericfont)) {
+                    $data[$font->theme] = $font->name;
+                }
+            }
+        }
+        return $data;
+    }
+
 
     /**
      * Returns all "text only" fonts

htdocs/lib/version.php

@@ -16,7 +16,7 @@ $config = new stdClass();
 // See https://wiki.mahara.org/wiki/Developer_Area/Version_Numbering_Policy
 // For upgrades on stable branches, increment the version by one.  On master, use the date.
 
-$config->version = 2019090900;
+$config->version = 2019090901;
 $config->series = '19.10';
 $config->release = '19.10dev';
 $config->minupgradefrom = 2017031605;

htdocs/skin/design.php

@@ -134,29 +134,68 @@ $elements['viewskin'] = array(
                 ),
         ),
 );
+
+// Page
 $elements['skinbg'] = array(
     'type'   => 'fieldset',
-    'legend' => get_string('skinbackgroundoptions1', 'skin'),
+    'legend' => get_string('view', 'mahara'),
     'class'  => $fieldset != 'skinbg' ? 'collapsed' : '',
     'elements'     => array(
-            'body_background_color' => array(
-                    'type' => 'color',
-                    'title' => get_string('bodybgcolor1', 'skin'),
-                    'defaultvalue' => (!empty($viewskin['body_background_color']) ? $viewskin['body_background_color'] : '#FFFFFF'),
-                    'size' => 7,
-                    'options' => array(
-                        'transparent' => true,
-                    ),
-            )
+        'header_background_color' => array(
+            'type' => 'color',
+            'title' => get_string('headerbackgroundcolor', 'skin'),
+            'description' => get_string('headerbackgroundcolordescription', 'skin'),
+            'defaultvalue' => (!empty($viewskin['header_background_color']) ? $viewskin['header_background_color'] : '#FFFFFF'),
+            'size' => 7,
+            'options' => array(
+                'transparent' => true,
+            ),
+        ),
+        'header_background_image' => array(
+            'type'         => 'filebrowser',
+            'title'        => get_string('headerbackgroundimage', 'skin'),
+            'folder'       => $folder,
+            'highlight'    => $highlight,
+            'description'  => get_string('headerbackgroundimagedescription', 'skin'),
+            'browse'       => $browse,
+            'filters'      => array(
+                'artefacttype' => array('image'),
+            ),
+            'page'         => get_config('wwwroot') . 'skin/design.php?id=' . $id . '&fs=skinbg',
+            'config'       => array(
+                'upload'          => false,
+                'uploadagreement' => get_config_plugin('artefact', 'file', 'uploadagreement'),
+                'resizeonuploaduseroption' => get_config_plugin('artefact', 'file', 'resizeonuploaduseroption'),
+                'resizeonuploaduserdefault' => $USER->get_account_preference('resizeonuploaduserdefault'),
+                'createfolder'    => false,
+                'edit'            => false,
+                'select'          => true,
+                'selectone'       => true,
+            ),
+            'defaultvalue'       => (!empty($viewskin['header_background_image']) ? array(intval($viewskin['header_background_image'])) : array()),
+            'selectlistcallback' => 'artefact_get_records_by_id',
+            // TODO: Make this work so skins can include site files
+            // 'tabs' => true,
+        ),
+        'body_background_color' => array(
+            'type' => 'color',
+            'title' => get_string('bodybackgroundcolour', 'skin'),
+            'defaultvalue' => (!empty($viewskin['body_background_color']) ? $viewskin['body_background_color'] : '#FFFFFF'),
+            'size' => 7,
+            'options' => array(
+                'transparent' => true,
+            ),
+        )
     )
 );
+
 // Currently site files don't work properly with site skins. And since site files are the only files that would make
 // sense with site skins, we're going to just hide background images entirely for site skins for the time being.
 if (!$designsiteskin) {
     $elements['skinbg']['elements'] = array_merge($elements['skinbg']['elements'], array(
         'body_background_image' => array(
                 'type'         => 'filebrowser',
-                'title'        => get_string('bodybgimage1', 'skin'),
+                'title'        => get_string('bodybackgroundimage', 'skin'),
                 'folder'       => $folder,
                 'highlight'    => $highlight,
                 'browse'       => $browse,
@@ -209,24 +248,45 @@ if (!$designsiteskin) {
         )
     ));
 }
+
+// Add option for theme font
+$themefontoption = array ('' => get_string('themedefault', 'skin'));
+$headerfontoptions = Skin::get_all_font_options();
+$fontoptions = Skin::get_textonly_font_options();
+
+// Add theme font element to list of fonts
+$headerfontoptions = $themefontoption + $headerfontoptions;
+$fontoptions = $themefontoption + $fontoptions;
+
+// Text
 $elements['viewcontent'] = array(
         'type'   => 'fieldset',
-        'legend' => get_string('viewcontentoptions1', 'skin'),
+        'legend' => get_string('sampletext', 'skin'),
         'class'  => $fieldset != 'viewcontent' ? 'collapsed' : '',
         'elements'     => array(
                 'view_heading_font_family' => array(
                         'type' => 'select',
                         'title' => get_string('headingfontfamily', 'skin'),
-                        'defaultvalue' => (!empty($viewskin['view_heading_font_family']) ? $viewskin['view_heading_font_family'] : 'Arial'),
+                        'defaultvalue' => (!empty($viewskin['view_heading_font_family']) ? $viewskin['view_heading_font_family'] : '' ),
                         'width' => 144,
-                        'options' => Skin::get_all_font_options(),
+                        'options' => $headerfontoptions
+                ),
+                'view_text_heading_color' => array(
+                        'type' => 'color',
+                        'title' => get_string('headingcolor', 'skin'),
+                        'description' => get_string('headingcolordescription', 'skin'),
+                        'defaultvalue' => (!empty($viewskin['view_text_heading_color']) ? $viewskin['view_text_heading_color'] : '#000000'),
+                        'size' => 7,
+                        'options' => array(
+                            'transparent' => true,
+                        ),
                 ),
                 'view_text_font_family' => array(
                         'type' => 'select',
                         'title' => get_string('textfontfamily', 'skin'),
-                        'defaultvalue' => (!empty($viewskin['view_text_font_family']) ? $viewskin['view_text_font_family'] : 'Arial'),
+                        'defaultvalue' => (!empty($viewskin['view_text_font_family']) ? $viewskin['view_text_font_family'] : ''),
                         'width' => 144,
-                        'options' => Skin::get_textonly_font_options(),
+                        'options' => $fontoptions
                 ),
                 'view_text_font_size' => array(
                         'type' => 'select',
@@ -253,16 +313,6 @@ $elements['viewcontent'] = array(
                             'transparent' => true,
                         ),
                 ),
-                'view_text_heading_color' => array(
-                        'type' => 'color',
-                        'title' => get_string('headingcolor', 'skin'),
-                        'description' => get_string('headingcolordescription', 'skin'),
-                        'defaultvalue' => (!empty($viewskin['view_text_heading_color']) ? $viewskin['view_text_heading_color'] : '#000000'),
-                        'size' => 7,
-                        'options' => array(
-                            'transparent' => true,
-                        ),
-                ),
                 'view_text_emphasized_color' => array(
                         'type' => 'color',
                         'title' => get_string('emphasizedcolor', 'skin'),
@@ -315,7 +365,7 @@ $elements['viewadvanced'] = array(
                         'style' => 'font-family:monospace',
                         'resizable' => true,
                         'fullwidth' => true,
-                        'title' => get_string('skincustomcss','skin'),
+                        'title' => get_string('skincustomcss', 'skin'),
                         'description' => get_string('skincustomcssdescription', 'skin'),
                         'defaultvalue' => ((!empty($viewskin['view_custom_css'])) ? $viewskin['view_custom_css'] : null),
                 ),
@@ -420,6 +470,8 @@ function designskinform_submit(Pieform $form, $values) {
     $skin['view_text_font_size'] = $values['view_text_font_size'];
     $skin['view_text_font_color'] = $values['view_text_font_color'];
     $skin['view_text_heading_color'] = $values['view_text_heading_color'];
+    $skin['header_background_color'] = $values['header_background_color'];
+    $skin['header_background_image'] = $values['header_background_image'];
     $skin['view_text_emphasized_color'] = $values['view_text_emphasized_color'];
     $skin['view_link_normal_color'] = $values['view_link_normal_color'];
     $skin['view_link_normal_underline'] = $values['view_link_normal_underline'];

htdocs/skin/style.php

@@ -63,7 +63,21 @@ $smarty->assign('body_background_attachment', (!empty($body_background_image)) ?
 $smarty->assign('body_background_position', (!empty($body_background_image)) ? Skin::background_position_number_to_value($skin->viewskin['body_background_position']) : '');
 
 // HEADER
-$smarty->assign('header_background_color', $skin->viewskin['header_background_color']); // TODO remove this
+$smarty->assign('header_background_color', $skin->viewskin['header_background_color']);
+
+if (empty($skin->viewskin['header_background_image'])) {
+    $header_background_image = '';
+}
+else {
+    $header_background_image = 'url(\'' . get_config('wwwroot') . 'artefact/file/download.php?file=' . $skin->viewskin['header_background_image'];
+    if ($viewid) {
+        $header_background_image .= "&view={$viewid}";
+    }
+    $header_background_image .= '\')';
+}
+
+$smarty->assign('header_background_image', $header_background_image);
+
 $smarty->assign('header_text_font_color', $skin->viewskin['header_text_font_color']); // TODO remove this
 $smarty->assign('header_link_normal_color', $skin->viewskin['header_link_normal_color']); // TODO remove this
 $smarty->assign('header_link_normal_underline', ($skin->viewskin['header_link_normal_underline'] == true ? 'underline' : 'none')); // TODO remove this
@@ -90,10 +104,10 @@ $smarty->assign('view_background_width', $skin->viewskin['view_background_width'
 
 // TEXT
 $smarty->assign('view_text_font_face', Skin::get_css_font_face_from_font_name($skin->viewskin['view_text_font_family']));