diff --git a/etemplate/templates/default/egw_tutorial.xet b/etemplate/templates/default/egw_tutorial.xet
index 0db815b911..5a655a9a5b 100644
--- a/etemplate/templates/default/egw_tutorial.xet
+++ b/etemplate/templates/default/egw_tutorial.xet
@@ -3,14 +3,14 @@
-
+
-
+
@@ -20,8 +20,5 @@
-
-
-
diff --git a/etemplate/templates/default/etemplate2.css b/etemplate/templates/default/etemplate2.css
index 16979dc79d..b38ba1e0fb 100644
--- a/etemplate/templates/default/etemplate2.css
+++ b/etemplate/templates/default/etemplate2.css
@@ -1978,56 +1978,3 @@ div.flash-click-to-play-dialog {
overflow: hidden;
}
-/*egw tutorial styles - start*/
-span.egw_tutorial_title {
- color: #FFFFFF;
- font-weight: bold;
- text-align: left;
- width: 99%;
- background-color: #434343;
- border: 1px solid #B3B3B3;
- padding-top: 4px;
- padding-left: 5px;
- border-radius: 2px;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow-x: hidden;
-}
-.egw_tutorial_thumb:hover [id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn,
-.egw_tutorial_thumb:hover #home-tutorial_play.egw_tutorial_playBtn{
- background-color: #434343;
-}
-.egw_tutorial_thumb:hover [id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn> div,
-.egw_tutorial_thumb:hover #home-tutorial_play.egw_tutorial_playBtn> div{
- border-left-color: white;
-}
-.egw_tutorial_thumb {
- background-repeat: no-repeat;
- background-position: -2px;
- border-radius: 5px;
-}
-[id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn,
-#home-tutorial_play.egw_tutorial_playBtn{
- display:block;
- margin:20%;
- border: 2px solid rgba(0,0,0,0.7);
- -webkit-border-radius: 100%;
- -moz-border-radius: 100%;
- border-radius: 100%;
- width: 40px;
- height: 40px;
- cursor: pointer;
-}
-[id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn> div,
-#home-tutorial_play.egw_tutorial_playBtn>div{
- display:block;
- position:relative;
- top: 10px;
- left: 45%;
- width: 0;
- height: 0;
- border-top: 10px solid transparent;
- border-bottom: 10px solid transparent;
- border-left: 10px solid rgba(0,0,0,0.8);
-}
-/*egw tutorial styles - end*/
\ No newline at end of file
diff --git a/home/inc/class.home_tutorial_ui.inc.php b/home/inc/class.home_tutorial_ui.inc.php
index fb16226a87..f9a0eef854 100644
--- a/home/inc/class.home_tutorial_ui.inc.php
+++ b/home/inc/class.home_tutorial_ui.inc.php
@@ -31,62 +31,67 @@ class home_tutorial_ui {
egw_framework::csp_frame_src_attrs(array('www.youtube.com'));
$tmpl = new etemplate_new('home.tutorial');
-
- // Get tutorial object id
- $tuid_indx = explode('-',$_GET['tuid']);
if (!is_array($content))
{
- // read tutorials json file to fetch data
- $tutorials = json_decode(self::getJsonData(), true);
- $apps = array('introduction' => lang('Introduction'));
- foreach ($tutorials as $app => $val)
- {
- // show only apps user has access to them
- if (in_array($app, array_keys($GLOBALS['egw_info']['user']['apps']))) $apps [$app] = $app;
- }
- $sel_options = array(
- 'apps' => $apps,
+ // Get tutorial object id
+ $tuid_indx = explode('-',$_GET['tuid']);
+ $appName = $tuid_indx[0];
+ $lang = $tuid_indx[1];
+ $id = $tuid_indx[2];
+ }
+ else // set the first video of selected app
+ {
+ $appName = $content['list']['apps'];
+ $lang = $GLOBALS['egw_info']['user']['preferences']['common']['lang'];
+ $id ="0";
+ }
+ // read tutorials json file to fetch data
+ $tutorials = json_decode(self::getJsonData(), true);
+ $apps = array('introduction' => lang('Introduction'));
+ foreach ($tutorials as $app => $val)
+ {
+ // show only apps user has access to them
+ if (in_array($app, array_keys($GLOBALS['egw_info']['user']['apps']))) $apps [$app] = $app;
+ }
+ $sel_options = array(
+ 'apps' => $apps,
+ );
+ // Check if the user has right to see the app's tutorial
+ if (in_array($appName, array_keys($GLOBALS['egw_info']['user']['apps'])) || $appName === "introduction")
+ {
+ // fallback to english video
+ $tutorial = $tutorials[$appName][$lang][$id]? $tutorials[$appName][$lang][$id]:
+ $tutorials[$appName]['en'][$id];
+
+ $list = array(
+ 'apps' => $appName,
+ '0' => ''
);
- // Check if the user has right to see the app's tutorial
- if (in_array($tuid_indx[0], array_keys($GLOBALS['egw_info']['user']['apps'])) || $tuid_indx[0] === "introduction")
+ foreach ($tutorials[$appName][$lang] as $v)
{
- // fallback to english video
- $tutorial = $tutorials[$tuid_indx[0]][$tuid_indx[1]][$tuid_indx[2]]? $tutorials[$tuid_indx[0]][$tuid_indx[1]][$tuid_indx[2]]:
- $tutorials[$tuid_indx[0]]['en'][$tuid_indx[2]];
-
- $content = array (
- 'src' => $tutorial['src'],
- 'title' => $tutorial['title']
- );
- }
- else
- {
- $content = array();
- egw_framework::message(lang('You do not have permission to see this tutorial!'));
- }
- // If its the autoloading tutorial
- if ($tuid_indx[3] === 'a')
- {
- $content ['discardbox'] = true;
+ $v ['onclick'] = 'app.home.tutorial_videoOnClick("'.$v['src'].'")';
+ array_push($list, $v);
}
+ $content = array (
+ 'src' => $tutorial['src'],
+ 'title' => $tutorial['title'],
+ 'list' => $list
+ );
+ }
+ else
+ {
+ $content = array();
+ egw_framework::message(lang('You do not have permission to see this tutorial!'));
+ }
+ // If its the autoloading tutorial
+ if ($tuid_indx[3] === 'a')
+ {
+ $content ['discardbox'] = true;
}
$tmpl->exec('home.home_tutorial_ui.popup', $content,$sel_options,array(),array(),array(),2);
}
- /**
- * Ajax function to retrive selected app's tutorials based on prefered user lang
- *
- * @param type $_app application name
- */
- function ajax_getAppsTutorials($_app)
- {
- $tutorials = json_decode(self::getJsonData(), true);
- $lang = $GLOBALS['egw_info']['user']['preferences']['common']['lang'];
- $response = egw_json_response::get();
- $response->data($tutorials[$_app][$lang]?$tutorials[$_app][$lang]:$tutorials[$_app]['en']);
- }
-
/**
* Ajax function to get videos links as json
*/
diff --git a/home/js/app.js b/home/js/app.js
index ef11669748..8b011634e4 100644
--- a/home/js/app.js
+++ b/home/js/app.js
@@ -748,43 +748,18 @@ app.classes.home = AppJS.extend(
nm.resize();
},
- /**
- * Function to set apps and tutorials selectboxes values
- *
- * @param {type} egw
- * @param {type} widget apps selectbox widget
- */
- tutorial_appChange: function (egw, widget) {
- var tutorials = etemplate2.getByApplication('home')[0].widgetContainer.getWidgetById('tutorials');
- var sel_options = {};
- if (widget)
- {
- this.egw.json('home.home_tutorial_ui.ajax_getAppsTutorials', [widget.get_value()], function(_data){
- if(_data && tutorials)
- {
- for (var i=0;i<_data.length;i++)
- {
- sel_options[i] = {label:_data[i].title, value:_data[i].src};
- }
- tutorials.set_select_options(sel_options);
- }
- }).sendRequest();
- }
- },
-
/**
* Function to set video iframe base on selected tutorial from
- * tutorials selectbox
+ * tutorials box
*
- * @param {type} egw
- * @param {type} widget tutorials selectbox
+ * @param {type} url
*/
- tutorial_tutorialsChange: function (egw, widget)
+ tutorial_videoOnClick: function (_url)
{
var frame = etemplate2.getByApplication('home')[0].widgetContainer.getWidgetById('src');
if (frame)
{
- frame.set_value(widget.get_value());
+ frame.set_value(_url);
}
},
diff --git a/home/templates/default/tutorial.xet b/home/templates/default/tutorial.xet
index 9c3217ff9c..1e284467ce 100644
--- a/home/templates/default/tutorial.xet
+++ b/home/templates/default/tutorial.xet
@@ -3,22 +3,35 @@
-
-
+
diff --git a/phpgwapi/inc/class.hooks.inc.php b/phpgwapi/inc/class.hooks.inc.php
index df98706e02..e86e168155 100644
--- a/phpgwapi/inc/class.hooks.inc.php
+++ b/phpgwapi/inc/class.hooks.inc.php
@@ -398,7 +398,7 @@ class hooks
),
'menuOpened' => true
);
- display_sidebox($appname, lang('EGroupware Tutorial'), $file);
+ display_sidebox($appname, lang('Video Tutorials'), $file);
}
}
}
diff --git a/phpgwapi/js/framework/fw_browser.js b/phpgwapi/js/framework/fw_browser.js
index 86eb520405..bebb80b9f9 100644
--- a/phpgwapi/js/framework/fw_browser.js
+++ b/phpgwapi/js/framework/fw_browser.js
@@ -175,10 +175,31 @@ var fw_browser = Class.extend({
// Open tutorial popup with an introduction video about egroupware
// the popup can be discarded for the next time show if user
- // check the discard checkbox
- if (!egw.preference('egw_tutorial_autoload', 'common'))
+ // select "Never" or can select "Later" and the introduction
+ // dialog will show upon the next session refresh
+ if (!egw.preference('egw_tutorial_noautoload', 'common') && !sessionStorage.getItem('egw_tutorial_visited'))
{
- egw.open_link(egw.link('/index.php', 'menuaction=home.home_tutorial_ui.popup&tuid=introduction-'+egw.preference('lang')+'-0-a'),'_blank','750x580');
+ sessionStorage.setItem('egw_tutorial_visited', true);
+ var buttons = [
+ {text:"Show", id:"show", default:"true"},
+ {text:"Later", id:"later"},
+ {text:"Never", id:"never"}
+ ];
+ et2_dialog.show_dialog(function (_button_id)
+ {
+ if (_button_id == "show" )
+ {
+ egw.open_link(egw.link('/index.php', 'menuaction=home.home_tutorial_ui.popup&tuid=introduction-'+egw.preference('lang')+'-0-a'),'_blank','750x580');
+ }
+ else if(_button_id == "never")
+ {
+ egw.set_preference('common', 'egw_tutorial_noautoload',true);
+ }
+ },
+ egw.lang('We would like to introduce you to EGroupware by showing a short introduction video.'),
+ egw.lang('Introduction'),
+ {}, buttons, et2_dialog.QUESTION_MESSAGE, undefined, egw);
+
}
});
diff --git a/phpgwapi/js/jsapi/app_base.js b/phpgwapi/js/jsapi/app_base.js
index a2319c66f7..8d179c340e 100644
--- a/phpgwapi/js/jsapi/app_base.js
+++ b/phpgwapi/js/jsapi/app_base.js
@@ -997,12 +997,12 @@ var AppJS = Class.extend(
* {
* "mail":{
* "en":[
- * {src:"https://www.youtube.com/embed/mCDJndpjO40", thumbnail:"http://img.youtube.com/vi/mCDJndpjO40/1.jpg", "title":"PGP Encryption"},
- * {src:"https://www.youtube.com/embed/mCDJndpjO", thumbnail:"http://img.youtube.com/vi/mCDJndpjO/1.jpg", "title":"Subscription", top:true},
+ * {src:"https://www.youtube.com/embed/mCDJndpjO40", thumbnail:"http://img.youtube.com/vi/mCDJndpjO40/0.jpg", "title":"PGP Encryption"},
+ * {src:"https://www.youtube.com/embed/mCDJndpjO", thumbnail:"http://img.youtube.com/vi/mCDJndpjO/0.jpg", "title":"Subscription", top:true},
* ],
* "de":[
- * {src:"https://www.youtube.com/embed/m40", thumbnail:"http://img.youtube.com/vi/m40/1.jpg", "title":"PGP Verschlüsselung"},
- * {src:"https://www.youtube.com/embed/mpjO", thumbnail:"http://img.youtube.com/vi/mpjO/1.jpg", "title":"Ordner Abonnieren", top:true},
+ * {src:"https://www.youtube.com/embed/m40", thumbnail:"http://img.youtube.com/vi/m40/0.jpg", "title":"PGP Verschlüsselung"},
+ * {src:"https://www.youtube.com/embed/mpjO", thumbnail:"http://img.youtube.com/vi/mpjO/0.jpg", "title":"Ordner Abonnieren", top:true},
* ]
* }
* }
diff --git a/phpgwapi/templates/default/def_tutorials.less b/phpgwapi/templates/default/def_tutorials.less
new file mode 100644
index 0000000000..2634d1ef6f
--- /dev/null
+++ b/phpgwapi/templates/default/def_tutorials.less
@@ -0,0 +1,92 @@
+/**
+ * EGroupware: CSS with less preprocessor
+ *
+ * Definitions for tutorials
+ *
+ * Please do NOT change css-files directly, instead change less-files and compile them!
+ *
+ * @link http://www.egroupware.org
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @author Hadi NAtegh
+ * @package phpgwapi
+ * @version $Id$
+ */
+
+span.egw_tutorial_title {
+ color: black;
+ font-weight: bold;
+ text-align: left;
+ width: 95%;
+ background-color: #D6DEF0;
+ border: 1px solid #B3B3B3;
+ padding-top: 4px;
+ padding-left: 5px;
+ border-radius: 2px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow-x: hidden;
+}
+.egw_tutorial_thumb:hover [id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn,
+.egw_tutorial_thumb:hover #home-tutorial_play.egw_tutorial_playBtn{
+ background-color: #FF0000;
+ opacity: 0.68;
+}
+.egw_tutorial_thumb:hover [id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn> div,
+.egw_tutorial_thumb:hover #home-tutorial_play.egw_tutorial_playBtn> div{
+ border-left-color: white;
+}
+.egw_tutorial_thumb {
+ background-repeat: no-repeat;
+ background-position: -2px;
+ border-radius: 5px;
+}
+[id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn,
+#home-tutorial_play.egw_tutorial_playBtn{
+ display:block;
+ margin:10%;
+ border: 2px solid rgba(0,0,0,0.7);
+ -webkit-border-radius: 100%;
+ -moz-border-radius: 100%;
+ border-radius: 100%;
+ width: 40px;
+ height: 40px;
+ cursor: pointer;
+}
+[id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn> div,
+#home-tutorial_play.egw_tutorial_playBtn>div{
+ display:block;
+ position:relative;
+ top: 10px;
+ left: 45%;
+ width: 0;
+ height: 0;
+ border-top: 10px solid transparent;
+ border-bottom: 10px solid transparent;
+ border-left: 10px solid rgba(0,0,0,0.8);
+}
+[id^="egw_tutorial_"][id$="sidebox_list"] {
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+
+
+#home-tutorial_list {
+ float:left;
+ .egw_tutorial_thumb {
+ display:block;
+ }
+}
+#home-tutorial_src {
+ border-left: 6px solid #E0E0E0;
+}
+.tutorial_popup {
+ background-color:white;
+ padding-top: 5px;
+ overflow-y: hidden;
+}
+.tutorial_videoList {
+ overflow-x: hidden;
+ overflow-y: auto;
+ height: 100%;
+ display: inline-block !important;
+}
diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css
index 1e7b97def3..8fb7ec26da 100644
--- a/pixelegg/css/mobile.css
+++ b/pixelegg/css/mobile.css
@@ -47,6 +47,7 @@
* Stefan Reinhardt
*/
/*@import (less) "../../etemplate/templates/default/etemplate2.css";*/
+@import "../../phpgwapi/templates/default/def_tutorials.css";
@media all {
/**
* Top level
@@ -2196,7 +2197,6 @@ body {
* @package pixelegg
* @version $Id$
*/
-@import-once "def_colors.less";
#socialMedia {
position: relative;
bottom: 20px;
@@ -4274,7 +4274,7 @@ td.message span.message {
text-decoration: none;
height: 32px;
/*font-size: 1.1em;*/
- font-size: 12.100000000000001px;
+ font-size: 12.1px;
line-height: 1.5em;
}
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul li a:hover {
@@ -4298,7 +4298,7 @@ td.message span.message {
}
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_home:before {
padding-right: 20px;
- font-size: 12.100000000000001px;
+ font-size: 12.1px;
content: " ";
background-image: url(../images/topmenu_items/home.png);
background-repeat: no-repeat;
@@ -4694,7 +4694,7 @@ td.message span.message {
padding-left: 3em;
color: #999999;
/*font-size: 12px;*/
- font-size: 12.100000000000001px;
+ font-size: 12.1px;
line-height: 17px;
}
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header object {
@@ -4866,7 +4866,7 @@ td.message span.message {
margin: 5px 0px 3px 5px;
padding: 0px 0px 0px 15px;
line-height: 1em;
- font-size: 12.100000000000001px;
+ font-size: 12.1px;
background-image: url(../images/arrow_left.png);
background-repeat: no-repeat;
background-position: left center;
@@ -5126,6 +5126,7 @@ td.message span.message {
}
.egw_fw_ui_category_content .egwTutorial div#list_grid_wrapper {
border-bottom-left-radius: 10px;
+ overflow-x: hidden;
}
.egw_fw_ui_category_content .egwTutorial div#list_grid_wrapper .et2_label {
padding-bottom: 5px;
@@ -6354,6 +6355,33 @@ a.textSidebox {
.pageGenTime > span:last-child:after {
content: "";
}
+/**
+ * EGroupware: Pixelegg styles
+ *
+ * Pixelegg definitions for tutorials
+ *
+ * Please do NOT change css-files directly, instead change less-files and compile them!
+ *
+ * @link http://www.egroupware.org
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @author Hadi NAtegh
+ * @package phpgwapi
+ * @version $Id$
+ */
+span.egw_tutorial_title {
+ color: #FFFFFF;
+ font-weight: bold;
+ text-align: left;
+ width: 95%;
+ background-color: #434343;
+ border: 1px solid #B3B3B3;
+ padding-top: 4px;
+ padding-left: 5px;
+ border-radius: 2px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow-x: hidden;
+}
/*@import "../less/layout_buttons_global.less";*/
/*@import "../less/layout_chosen.less";*/
/*@import "../less/layout_messages.less";*/
@@ -6926,7 +6954,7 @@ a.textSidebox {
margin: 5px 0px 3px 5px;
padding: 0px 0px 0px 15px;
line-height: 1em;
- font-size: 12.100000000000001px;
+ font-size: 12.1px;
background-image: url(../images/arrow_left.png);
background-repeat: no-repeat;
background-position: left center;
diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index 5d350d80f5..0c9e2eb4c5 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -36,6 +36,7 @@
* Stefan Reinhardt
*/
/*@import (less) "../../etemplate/templates/default/etemplate2.css";*/
+@import "../../phpgwapi/templates/default/def_tutorials.css";
@media all {
/**
* Top level
@@ -2185,7 +2186,6 @@ body {
* @package pixelegg
* @version $Id$
*/
-@import-once "def_colors.less";
#socialMedia {
position: relative;
bottom: 20px;
@@ -4263,7 +4263,7 @@ td.message span.message {
text-decoration: none;
height: 32px;
/*font-size: 1.1em;*/
- font-size: 12.100000000000001px;
+ font-size: 12.1px;
line-height: 1.5em;
}
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul li a:hover {
@@ -4287,7 +4287,7 @@ td.message span.message {
}
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_home:before {
padding-right: 20px;
- font-size: 12.100000000000001px;
+ font-size: 12.1px;
content: " ";
background-image: url(../images/topmenu_items/home.png);
background-repeat: no-repeat;
@@ -4683,7 +4683,7 @@ td.message span.message {
padding-left: 3em;
color: #999999;
/*font-size: 12px;*/
- font-size: 12.100000000000001px;
+ font-size: 12.1px;
line-height: 17px;
}
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header object {
@@ -4855,7 +4855,7 @@ td.message span.message {
margin: 5px 0px 3px 5px;
padding: 0px 0px 0px 15px;
line-height: 1em;
- font-size: 12.100000000000001px;
+ font-size: 12.1px;
background-image: url(../images/arrow_left.png);
background-repeat: no-repeat;
background-position: left center;
@@ -5115,6 +5115,7 @@ td.message span.message {
}
.egw_fw_ui_category_content .egwTutorial div#list_grid_wrapper {
border-bottom-left-radius: 10px;
+ overflow-x: hidden;
}
.egw_fw_ui_category_content .egwTutorial div#list_grid_wrapper .et2_label {
padding-bottom: 5px;
@@ -6343,6 +6344,33 @@ a.textSidebox {
.pageGenTime > span:last-child:after {
content: "";
}
+/**
+ * EGroupware: Pixelegg styles
+ *
+ * Pixelegg definitions for tutorials
+ *
+ * Please do NOT change css-files directly, instead change less-files and compile them!
+ *
+ * @link http://www.egroupware.org
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @author Hadi NAtegh
+ * @package phpgwapi
+ * @version $Id$
+ */
+span.egw_tutorial_title {
+ color: #FFFFFF;
+ font-weight: bold;
+ text-align: left;
+ width: 95%;
+ background-color: #434343;
+ border: 1px solid #B3B3B3;
+ padding-top: 4px;
+ padding-left: 5px;
+ border-radius: 2px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow-x: hidden;
+}
/*@import "../less/layout_buttons_global.less";*/
/*@import "../less/layout_chosen.less";*/
/*@import "../less/layout_messages.less";*/
diff --git a/pixelegg/less/layout_definitions.less b/pixelegg/less/layout_definitions.less
index 1eff3da4d4..afa82fa758 100644
--- a/pixelegg/less/layout_definitions.less
+++ b/pixelegg/less/layout_definitions.less
@@ -69,4 +69,5 @@
@import "layout_traditional.less";
+@import "layout_tutorials.less";
diff --git a/pixelegg/less/layout_raster_sidebar.less b/pixelegg/less/layout_raster_sidebar.less
index 06d78f400d..18023e336d 100644
--- a/pixelegg/less/layout_raster_sidebar.less
+++ b/pixelegg/less/layout_raster_sidebar.less
@@ -523,6 +523,7 @@
.egwTutorial div#list_grid_wrapper {
border-bottom-left-radius: 10px;
+ overflow-x:hidden;
.et2_label {
padding-bottom: 5px;
}
diff --git a/pixelegg/less/layout_tutorials.less b/pixelegg/less/layout_tutorials.less
new file mode 100644
index 0000000000..fcfab31a10
--- /dev/null
+++ b/pixelegg/less/layout_tutorials.less
@@ -0,0 +1,31 @@
+/**
+ * EGroupware: Pixelegg styles
+ *
+ * Pixelegg definitions for tutorials
+ *
+ * Please do NOT change css-files directly, instead change less-files and compile them!
+ *
+ * @link http://www.egroupware.org
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @author Hadi NAtegh
+ * @package phpgwapi
+ * @version $Id$
+ */
+@import (reference) "definitions.less";
+@import "../../phpgwapi/templates/default/def_tutorials.css";
+
+span.egw_tutorial_title {
+ color: #FFFFFF;
+ font-weight: bold;
+ text-align: left;
+ width: 95%;
+ background-color: #434343;
+ border: 1px solid #B3B3B3;
+ padding-top: 4px;
+ padding-left: 5px;
+ border-radius: 2px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow-x: hidden;
+}
+