[Owncloud] Theming and Formfactors

[Frank Karlitschek]

Hi,

O.K. theming and different form-factors are now implemented
I integrated all the feedback. Thanks for it :-)

js files and templates can be replaced by files provided by a theme. css files are loaded additionally to the default one so it is easy to just override the things that you want to change. You can even use variables. :-)

Simple documentation is here:
http://owncloud.org/dev/formfactors/
http://owncloud.org/dev/theming/

I also added a repo for themes:
https://gitorious.org/owncloud/themes

Currently there is just a stupid demo theme from me to demonstrate how it works.


Cheers
Frank





On 06.02.2012, at 12:08, Martin Feuersänger wrote:

> Arthur Schiwon (Blizzz) wrote:
>> On Wednesday 01 February 2012 16:05:50 Thomas Tanghus wrote:
>> 
>>> On Wednesday 01 February 2012 15:18 Frank Karlitschek wrote:
>>> 
>>>> Theming:
>>>> I propose a similar system for the theming. We add a "theme" config
>>>> option to the config.php so that the theme can be configured during
>>>> deployment and controlled from the outside without the need to
>>>> understand our database structure. We add "themes" directory into
>>>> /core where every theme has a
>>>> directory named after the theme name. The template and css loader
>>>> looks into the selected theme directory first for templates and css
>>>> files and loads them if a file is present. If not it just falls back
>>>> to the default files in the individual app directories. This has the
>>>> benefit that the person who creates the themes can override what ever
>>>> has to be changed but don´t have to provide a complete new frontend.
>>>> The directory structure
>>>> inside the themes folder is the same as the rest of owncloud. This
>>>> means that a theme developer can just put a different
>>>> "apps/contacts/css/styles.css" in the theme directory to change the
>>>> style of the contacts app.
>>> 
>>> I haven't kept up-to-date on what is possible with CSS nowadays, but
>>> couldn't we come a long way by using CSS variables [1]? Is it possible
>>> to include a stylesheet defining the color scheme into another CSS file?
>>> 
>>> 
>>> Now the colors in /core/css/styles.css are hardcoded and I've had to
>>> copy some of them to the app stylesheet. It would be much easier just to
>>> change one file with color/border/etc definitions and use e.g.
>>> "var(mainbackgroundcolor)".
>>> 
>>> 
>>> [1] http://disruptive-innovations.com/zoo/cssvariables/
>>> 
>> 
>> Agree, it makes sense to define colors  in a basic theme file and use the
>> variable. Although not everyone seem to love varialbes in CSS, it would
>> make things simpler. Not only theming itself, but also specific styles in
>> apps may look good in different themes.
> I recently deployed Owncloud on several machines. I usualy hava a browser
> tab open for each machine. Now you can imagine that it get's very
> confusing to tell which Owncloud login screen is which machine. They all
> look exactly the same. So I changed the css on each machine to give it
> it's individual header color.
> 
> Hence, before implementing full themability, just being able to change the
> header color of the current design by introducing some settings for the
> admin user would be a nice first step and large usability improvement.
> 
> Also inclusion of an individial text line at the login screen would help.
> 
> Cheers,
>  Martin
> 
> PS: Argh, another mailing list where the reply goes to the author directly
> instead back to the list. Sorry, Arthur.
> _______________________________________________
> Owncloud mailing list
> Owncloud at kde.org
> https://mail.kde.org/mailman/listinfo/owncloud

Frank Karlitschek
karlitschek at kde.org