Announcement

Collapse
No announcement yet.

Theming der Anwendung und der Login Page

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Theming der Anwendung und der Login Page

    Hi,
    we are using OX 7.6.0 on a Debian and want to customize the GUI with the look and feel from our company CI.

    I checked the documentation already and found following:



    and



    I get our own theme up and running with some basic colour changes,
    but didn't get the login page and the icons modified.

    To get my theme up and running I modified:
    /opt/open-xchange/etc/settings/appsuite.properties
    and added
    io.ox/core/settingOptions//themes/mytheme=My Theme

    and execute /opt/open-xchange/appsuite/share/update-themes.sh
    and restart OX.

    That works for the theme, but not for the login page.

    When I change the file /opt/open-xchange/etc/as-config.yml like described, OX didn't start anymore.

    Does anyone has some sample files for me or a better HowTo ?

    Thanks

  • #2
    The documentation should be more or less sufficient.
    My guess is that you have a subtle syntax error in as-config.yml because if the yaml parser fails it prevents the whole system to start up correctly.
    Would you mind to paste your as-config.yml for review?

    Comment


    • #3
      Hi,
      here the as-config.yml I use:

      # Override certain settings
      default:
      host: all
      signinTheme: test

      # Override certain settings for certain hosts
      #myhost:
      # host: myexchange.myhost.mytld
      # someConfig: some overriding value
      I get following error message:

      2014-10-01T22:04:19,817+0000 ERROR [Start Level Event Dispatcher] com.openexchange.config.internal.ConfigurationImpl $3.processFile(ConfigurationImpl$3.java:235)
      /opt/open-xchange/etc/as-config.yml
      org.ho.yaml.exception.YamlException: Error near line 4: End of document expected.
      at org.ho.yaml.JYamlParserEvent.error(Unknown Source)
      at org.ho.yaml.YamlDecoder.firstDocument(Unknown Source)
      ...
      Thanks for your help.

      Comment


      • #4
        can you please put the test into quotes "test"?

        I also never used it w/o indentation. So not sure. The remainder looks pretty ok in that paste at least.

        Comment


        • #5
          Ok that was the right hint.

          Here the working version:

          # Override certain settings
          default:
          host: all

          signinTheme: 'test'
          pageTitle: 'Company Webmail'

          pageHeaderPrefix: 'Company'
          pageHeader: 'Webmail'

          Thanks so far ...

          Comment


          • #6
            Hi again,
            the theme is now working,
            but my styles will not be applied to the login page,
            problems seems to be that my values will be overwritten with the default again.

            (see screenshot)
            login-page.png

            Here the styles.less file:

            .wallpaper {
            #gradient.radial(#54a321, #193D00) !important;
            }
            Already tried the !important css tag, but that works only in Firefox,
            not for Chrome and Safari, there I get again everything with the default values.

            To be honest, I like the blue, but our company colour is green,
            therefore would be great to have in the login screen also green.

            Any hint is welcome ...
            Thanks!
            Last edited by breidens; 10-04-2014, 12:01 PM.

            Comment


            • #7
              Get it working by modifying the file: /var/www/appsuite/apps/themes/login/login.css directly,
              but don't hink it is the right way.

              Comment


              • #8
                I don't have a good explanation why it fails for you.
                I have an internal example which works fine and looks like:

                #io-ox-login-background.wallpaper {
                .radial-gradient(#fff, #e4e6e8, #bcc1c5);
                background: radial-gradient(circle farthest-corner at center center , #FFFFFF 0%, #E4E6E8 40%, #BCC1C5 100%);
                }

                Probably just try with the full selector?

                Comment


                • #9
                  Now it is working, that helps.

                  But I need one extra step ...

                  I added your snippet into my styles.less and removed my .wallpaper definition.
                  Next executed:

                  /opt/open-xchange/appsuite/share/update-themes.sh
                  /etc/init.d/open-xchange restart

                  Firefox showed me your grey login screen and Chrome as well.

                  Than I change the colours again to my nice green ones and again executed mentioned commands.

                  Firefox shows everything in green, Chrome still show your grey. :-(

                  Ok, after some searching and investigation of the html elements,
                  I tried:

                  /opt/open-xchange/appsuite/share/update-themes.sh
                  /opt/open-xchange/sbin/touch-appsuite
                  /etc/init.d/open-xchange restart


                  and now it works. :-)

                  Thanks again for your help.

                  Comment

                  Working...
                  X