{"id":1030,"date":"2015-04-30T19:26:55","date_gmt":"2015-04-30T17:26:55","guid":{"rendered":"http:\/\/blog.visisoft.de\/yalst\/?p=1030"},"modified":"2015-05-28T21:41:26","modified_gmt":"2015-05-28T19:41:26","slug":"how-to-customise-the-visual-appearance-on-mobile-devices-in-yalst-9-3-and-later","status":"publish","type":"post","link":"https:\/\/www.yalst.de\/en\/how-to-customise-the-visual-appearance-on-mobile-devices-in-yalst-9-3-and-later\/","title":{"rendered":"How to Customise the Visual Appearance of Live Chat on Mobile Devices in yalst 9.3 and later"},"content":{"rendered":"

On multi-touch-enabled mobile devices our live chat product\u00a0yalst<\/em>\u00a0provides a mobile-friendly user interface (GUI) for the chat. The visual appearance of the chat user interface can be customised by different possibilities:<\/p>\n

1.<\/strong> Defining individual colours in the yalst Administration in “Settings” (Einstellungen) in the “Design” section\u00a0will affect the “normal” desktop client as well as the mobile client:<\/p>\n

\"Colours\"<\/p>\n

2.<\/strong> Uploading two images\u00a0in the yalst Administration\u00a0in “Settings” (Einstellungen) in the “Design” section\u00a0 in the yalst Administration to appear on top and bottom of the mobile chat (start and department page):<\/p>\n

\"logos2\"<\/a><\/p>\n

3.<\/strong> For more complex and individual changes you may use the ThemeRoller<\/em><\/a>\u00a0WYSIWYG editor to modify a theme or create a new one \u00a0upload\u00a0the stylesheet\u00a0<\/span>in the yalst Administration in “Settings” (Einstellungen) in the “CSS and Themes” section:<\/p>\n

\"upload\"<\/a><\/p>\n

 <\/p>\n

Because (3) is a little more complex than the other two more straight-forward possibilities the process is explained in detail as follows.<\/strong><\/p>\n

Starting from yalst Version 9.3 the\u00a0download version of\u00a0yalst<\/em> as well as the\u00a0hosted version<\/em>\u00a0can have individual themes for the mobile yalst chat.<\/p>\n

\"jquery_mobile\"Except for the speech balloons the mobile-friendly GUI is created by\u00a0the\u00a0jQueryMobile<\/em><\/a> framework which provides a useful\u00a0ThemeRoller<\/em><\/a>\u00a0tool for tweaking the visual appearance.\u00a0To personalise the chat on mobile devices you\u2019ll have to change the default\u00a0theme.<\/em> A\u00a0theme\u00a0<\/em>defines the complete layout, styles and colours of the user interface of an application. A theme consists of global geometry and style settings and a bunch of different Color\u00a0Swatches<\/em>\u00a0identified by letters from A-Z.<\/p>\n

Yalst<\/em>\u00a0initially comes with a\u00a0Default Theme<\/strong>\u00a0of jQueryMobile which has seven colour swatches denoted by letters A-G corresponding to the descending visual priority, which can be downloaded here:<\/p>\n

jquery.mobile.theme-1.4.5.css<\/a><\/strong><\/p>\n

The mobile-friendly chat GUI\u00a0of\u00a0yalst\u00a0<\/em>uses predominantly the Swatch A<\/strong> of baseline level priority.<\/p>\n

The mobile\u00a0chat\u00a0HTML code which defines the swatch for each DOM element is currently not open for customisation. This means that you can not change the swatch of an individual element but just the swatch itself and all corresponding elements together. The mapping between elements and swatches is shown in the next screenshots:<\/p>\n

\"allswatches\"<\/p>\n

As you may see in the screenshots the:<\/p>\n

Swatch A<\/strong> is for the main background, select and input fields, radio and check boxes<\/strong> \u00a0incl. borders, hover and highlight styles.<\/p>\n

Swatch B<\/strong> is for dialogue<\/strong> headers and primary buttons<\/strong>\u00a0incl. borders, hover and highlight styles.<\/p>\n

Swatch C<\/strong> is for the\u00a0select and input fields, radio and check boxes in an error<\/strong> case\u00a0incl. borders, hover and highlight styles.<\/p>\n

Swatch D<\/strong> is for the “Start Chat<\/strong>” button incl. borders, hover and highlight styles.<\/p>\n

Swatch E<\/strong> is for the main header<\/strong> and the correspondings navigation buttons\u00a0incl. icon-colors, borders, hover and highlight styles.<\/p>\n

Swatch F<\/strong> is for the “Not available<\/strong>” (Nicht verf\u00fcgbar) box header incl. borders, hover and highlight styles.<\/p>\n

Swatch G<\/strong> is for the actual “Send<\/strong>” chat button incl. borders, hover and highlight styles.<\/p>\n

To customise your theme or our standard theme<\/strong><\/p>\n

    \n
  1. Open the\u00a0ThemeRoller application<\/a>\u00a0in your browser and get rolling.<\/li>\n
  2. Switch to the appropriate jQueryMobile version (currently 1.4.5 for\u00a0yalst<\/em>\u00a09.3)\"themeroller0\"<\/a><\/li>\n
  3. Copy the theme \u00a0(just the uncompressed \u201ctheme\u201d stylesheet file) into ThemeRoller by using the Import button.\"ThemeRoller<\/a>
    \nIf you have created a custom theme before you should upload that theme css file. Otherwise you\u2019ll need the uncompressed css file (e.g.\u00a0    jquery.mobile.theme-1.4.5.css<\/a><\/strong>)\u00a0with the Default Theme which is used by\u00a0yalst<\/em>\u00a0as default. After upload the editor should display the seven swatches of your theme (partly displayed in this screenshot)\"themeroller2\"<\/li>\n
  4. Adapt the theme geometry and the colour swatches A-G according to your needs.\"themeroller1\"<\/li>\n
  5. Download the new theme as zip archive and unpack.\u00a0Enter e.g. \u201cjquery.mobile.theme-1.4.5\u2033 as theme name in the download dialogue.\"Screen<\/a><\/li>\n
  6. Upload \u201cjquery.mobile.theme-1.4.5.css\u2033\u00a0in the yalst Administration in “Settings” (Einstellungen) in the “CSS and Themes” section:\"upload\"<\/li>\n
  7. Done!<\/li>\n<\/ol>\n

     <\/p>\n","protected":false},"excerpt":{"rendered":"

    On multi-touch-enabled mobile devices our live chat product\u00a0yalst\u00a0provides a mobile-friendly user interface (GUI) for the chat. The visual appearance of the chat user interface can be customised by different possibilities: 1. Defining individual colours in the yalst Administration in “Settings” (Einstellungen) in the “Design” section\u00a0will affect the “normal” desktop client as well as the mobile […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[46],"tags":[97,98,53,92,96],"yoast_head":"\nCustomising the mobile-friendly chat user interface of yalst<\/title>\n<meta name=\"description\" content=\"Our live chat product yalst provides a various ways to customise the visual appearance of its chat user interface on mobile devices.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.yalst.de\/en\/how-to-customise-the-visual-appearance-on-mobile-devices-in-yalst-9-3-and-later\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Customising the mobile-friendly chat user interface of yalst\" \/>\n<meta property=\"og:description\" content=\"Our live chat product yalst provides a various ways to customise the visual appearance of its chat user interface on mobile devices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.yalst.de\/en\/how-to-customise-the-visual-appearance-on-mobile-devices-in-yalst-9-3-and-later\/\" \/>\n<meta property=\"og:site_name\" content=\"yalst - Live Support | Live Chat | Live Help | Help Desk\" \/>\n<meta property=\"article:published_time\" content=\"2015-04-30T17:26:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-05-28T19:41:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.yalst.de\/wp-content\/uploads\/2015\/04\/colours.png\" \/>\n<meta name=\"author\" content=\"Matthias Seemann\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Matthias Seemann\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.yalst.de\/en\/how-to-customise-the-visual-appearance-on-mobile-devices-in-yalst-9-3-and-later\/\",\"url\":\"https:\/\/www.yalst.de\/en\/how-to-customise-the-visual-appearance-on-mobile-devices-in-yalst-9-3-and-later\/\",\"name\":\"Customising the mobile-friendly chat user interface of yalst\",\"isPartOf\":{\"@id\":\"https:\/\/www.yalst.de\/en\/#website\"},\"datePublished\":\"2015-04-30T17:26:55+00:00\",\"dateModified\":\"2015-05-28T19:41:26+00:00\",\"author\":{\"@id\":\"https:\/\/www.yalst.de\/en\/#\/schema\/person\/32edfd67d7dc13e809181afe316fcccb\"},\"description\":\"Our live chat product yalst provides a various ways to customise the visual appearance of its chat user interface on mobile devices.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.yalst.de\/en\/how-to-customise-the-visual-appearance-on-mobile-devices-in-yalst-9-3-and-later\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.yalst.de\/en\/how-to-customise-the-visual-appearance-on-mobile-devices-in-yalst-9-3-and-later\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.yalst.de\/en\/how-to-customise-the-visual-appearance-on-mobile-devices-in-yalst-9-3-and-later\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.yalst.de\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Customise the Visual Appearance of Live Chat on Mobile Devices in yalst 9.3 and later\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.yalst.de\/en\/#website\",\"url\":\"https:\/\/www.yalst.de\/en\/\",\"name\":\"yalst - Live Support | Live Chat | Live Help | Help Desk\",\"description\":\"Ihr umfassender Live Support Chat\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.yalst.de\/en\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.yalst.de\/en\/#\/schema\/person\/32edfd67d7dc13e809181afe316fcccb\",\"name\":\"Matthias Seemann\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.yalst.de\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6d883a962ac315cf385799a15783f440?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6d883a962ac315cf385799a15783f440?s=96&d=mm&r=g\",\"caption\":\"Matthias Seemann\"},\"description\":\"Entwickler und Mitglied der Gesch\u00e4ftsf\u00fchrung bei der Visisoft OHG\",\"url\":\"https:\/\/www.yalst.de\/en\/author\/seemannvisisoft-de\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Customising the mobile-friendly chat user interface of yalst","description":"Our live chat product yalst provides a various ways to customise the visual appearance of its chat user interface on mobile devices.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.yalst.de\/en\/how-to-customise-the-visual-appearance-on-mobile-devices-in-yalst-9-3-and-later\/","og_locale":"en_US","og_type":"article","og_title":"Customising the mobile-friendly chat user interface of yalst","og_description":"Our live chat product yalst provides a various ways to customise the visual appearance of its chat user interface on mobile devices.","og_url":"https:\/\/www.yalst.de\/en\/how-to-customise-the-visual-appearance-on-mobile-devices-in-yalst-9-3-and-later\/","og_site_name":"yalst - Live Support | Live Chat | Live Help | Help Desk","article_published_time":"2015-04-30T17:26:55+00:00","article_modified_time":"2015-05-28T19:41:26+00:00","og_image":[{"url":"https:\/\/www.yalst.de\/wp-content\/uploads\/2015\/04\/colours.png"}],"author":"Matthias Seemann","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Matthias Seemann","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.yalst.de\/en\/how-to-customise-the-visual-appearance-on-mobile-devices-in-yalst-9-3-and-later\/","url":"https:\/\/www.yalst.de\/en\/how-to-customise-the-visual-appearance-on-mobile-devices-in-yalst-9-3-and-later\/","name":"Customising the mobile-friendly chat user interface of yalst","isPartOf":{"@id":"https:\/\/www.yalst.de\/en\/#website"},"datePublished":"2015-04-30T17:26:55+00:00","dateModified":"2015-05-28T19:41:26+00:00","author":{"@id":"https:\/\/www.yalst.de\/en\/#\/schema\/person\/32edfd67d7dc13e809181afe316fcccb"},"description":"Our live chat product yalst provides a various ways to customise the visual appearance of its chat user interface on mobile devices.","breadcrumb":{"@id":"https:\/\/www.yalst.de\/en\/how-to-customise-the-visual-appearance-on-mobile-devices-in-yalst-9-3-and-later\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.yalst.de\/en\/how-to-customise-the-visual-appearance-on-mobile-devices-in-yalst-9-3-and-later\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.yalst.de\/en\/how-to-customise-the-visual-appearance-on-mobile-devices-in-yalst-9-3-and-later\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.yalst.de\/en\/"},{"@type":"ListItem","position":2,"name":"How to Customise the Visual Appearance of Live Chat on Mobile Devices in yalst 9.3 and later"}]},{"@type":"WebSite","@id":"https:\/\/www.yalst.de\/en\/#website","url":"https:\/\/www.yalst.de\/en\/","name":"yalst - Live Support | Live Chat | Live Help | Help Desk","description":"Ihr umfassender Live Support Chat","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.yalst.de\/en\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.yalst.de\/en\/#\/schema\/person\/32edfd67d7dc13e809181afe316fcccb","name":"Matthias Seemann","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.yalst.de\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d883a962ac315cf385799a15783f440?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d883a962ac315cf385799a15783f440?s=96&d=mm&r=g","caption":"Matthias Seemann"},"description":"Entwickler und Mitglied der Gesch\u00e4ftsf\u00fchrung bei der Visisoft OHG","url":"https:\/\/www.yalst.de\/en\/author\/seemannvisisoft-de\/"}]}},"_links":{"self":[{"href":"https:\/\/www.yalst.de\/en\/wp-json\/wp\/v2\/posts\/1030"}],"collection":[{"href":"https:\/\/www.yalst.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yalst.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yalst.de\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yalst.de\/en\/wp-json\/wp\/v2\/comments?post=1030"}],"version-history":[{"count":4,"href":"https:\/\/www.yalst.de\/en\/wp-json\/wp\/v2\/posts\/1030\/revisions"}],"predecessor-version":[{"id":4194,"href":"https:\/\/www.yalst.de\/en\/wp-json\/wp\/v2\/posts\/1030\/revisions\/4194"}],"wp:attachment":[{"href":"https:\/\/www.yalst.de\/en\/wp-json\/wp\/v2\/media?parent=1030"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yalst.de\/en\/wp-json\/wp\/v2\/categories?post=1030"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yalst.de\/en\/wp-json\/wp\/v2\/tags?post=1030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}