User Interface / UI Design / Themes / jQuery

Hi Guys!

Thx for the great work so far. I’d like to contribute. I am a professional grafic-designer from germany (excuse my french :stuck_out_tongue_winking_eye: ). I would like to help you with an up-to-date User Interface. With the 0.2.34-release, its rather hard to set up a specific theme without beeing a coder. I understand and know how to use Css, HTML and PHP, but I did not find all style sheets which are necessary to change the hole look.

Would it be possible to collect all necessary files in the default-theme?? With a such release, I will be able to produce Piwik-Themes all by my self, and to contribute this way.

idea for the future: how about the implementation of a jpg/png-file instead of the Piwik-Logo (with the automatic implementation of “powered by Piwik”) for professional use?

What shell I do?

Thx!

Rgds, ichjetzthier

Here’s a little first give-away… the Piwik-Logo in a bit shiny.

[attachment=28:shiny_mid_res.jpg]

What about a new version of the Piwik-logo?

[attachment=29:new_mid_res.jpg]

And me again… :wink:

Just an idea for a better screendesign:

[attachment=30:design_2_0.jpg]

If you run:

find . -name ‘*.css’

in the piwik directory, it’ll return the locations of the css files used. (Change the extension for other file types.) You’ll also want to look at the Smarty template files (*.tpl).

If you have suggestions for improving the theme-ability of piwik, feel free to provide feedback, patches, etc.

Hi!
Not all styles contained in css files. Certain plugins (like usermanager) has hard-coded style description.
If you can’t find some, try to check files in /plugins/PLUGIN_NAME/templates/

Yes, I think a good “themeability” would help to distinguish Piwik from other tools and give it a push for professional use (as a service). I think those users are also more willing to contribute (money or development) than the normal webmaster of a private website.

I really love what you guys do, but the current version of the UI is too “attractive” I’d say.

Sorry, “ichjetzthier”, didn’t like your version much either… :wink:

I think the big advantage of tools like Wordpress is that they are easy to customize and so many designers go for it. If they have to go too much into programming and source code of PHP they just don’t contribute. It should be as easy as possible for a designer to contribute a theme. Due to the use of the application we do not need the same themeability as Wordpress, but some basic theme features would be really cool.

And a big please to all developers: NO hard coded CSS or HTML, please!!! This should be long over…

[quote=holch @ Jun 16 2009, 02:04 PM]Yes, I think a good “themeability” would help to distinguish Piwik from other tools and give it a push for professional use (as a service). I think those users are also more willing to contribute (money or development) than the normal webmaster of a private website.

I really love what you guys do, but the current version of the UI is too “attractive” I’d say.

Sorry, “ichjetzthier”, didn’t like your version much either… :wink:

I think the big advantage of tools like Wordpress is that they are easy to customize and so many designers go for it. If they have to go too much into programming and source code of PHP they just don’t contribute. It should be as easy as possible for a designer to contribute a theme. Due to the use of the application we do not need the same themeability as Wordpress, but some basic theme features would be really cool.

And a big please to all developers: NO hard coded CSS or HTML, please!!! This should be long over…[/quote]

please feel free to contribute and improve the CSS/HTML etc. there is also a ticket for the theme feature: http://dev.piwik.org/trac/ticket/177

the problem is, that it´s currently hard to “contribute”, since the css-files are all over the place (e.g. within themes, plugins/corehome, plugins/dashboard etc.). IMHO, it´s a prerequisite to bundle these files in order to allow designers to theme the application.

I´m not going into “this or that looks/feels bad”. once theming is possible, there´ll probably be different options to choose from - so whether one is more into a minimal approach or more into colourful applications, he/she is able to choose from different themes.
that said, I´m having a hard time with the current theme, but I´m also willing to change it …

the question right now is: how can I (as a designer) contribute? should I really change the css-files found in different directories? is that the way to go? or is it better to wait until all these files are found in one place?

thanks,
patrick

patrickk, if you think that the files should be reorganized in a different way, please submit a proposal or your ideas. In the meantime, we should probably at least factor all the “common styles” in the CSS inside the plugins CoreHome (for reporting related styles) and CoreAdminHome (for admin UI related).

Concerning CSS/HTML updates, submitting a patch is the easiest way to contribute, please have a look at this page: http://dev.piwik.org/trac/wiki/PiwikDevelopmentProcess

I have been create a private theme for piwik.
I had some problemes to set the css-class content. Have a look on the second picture (counter_fehler.jpg).

A idea for templates: a template-floder for every plugin
old: piwik/plugins/DBStats/templates

new: piwik/templates/default/DBStats/

Hi,

I’ve only just stumbled across Piwik and it’s great! I noticed that it’s making use of jQuery already and wondered if the developers are going to take advantage of the jQuery UI themes and components.

I’d try and help out if I can, even knocked up a dashboard-a-like using UI tabs and dialog to see what it’d be like.

http://img36.imageshack.us/img36/30/dashboard.th.png
http://img406.imageshack.us/img406/159/doubletabs.th.png

Think how swish it’d look with all the different jquery themes available.

We will likely start using jqueryui simply because older plugins were folded into the jqueryui core. Maintaining local mods is one reason we’re lagging when it comes to staying up-to-date on jquery releases.

If you would like to help us achieve this level of abstraction in the code (having the JS UI use the jquery UI patterns for themes) it would be great! what would it take?

[quote=ichjetzthier @ Apr 19 2009, 12:28 PM]And me again… :wink:

Just an idea for a better screendesign:

[attachment=30:design_2_0.jpg][/quote]

Hallo ichjetzthier,
aufgrund des Namens nehme ich an, dass Du deutsch sprichst.

Das von Dir vorgeschlagene Layout finde ich wirklich Klasse. Hast Du schon Wege gefunden, wie man dieses umsetzen kann?

I like the layout from “ich jetzt hier” and that one from “unsource”.

It’s cool to use jqueryui - i like this theme a lot:

http://jqueryui.com/themeroller/#ffDefault…adiusShadow=5px

Furthermore we should use a nicier Datepicker. Included in the jqueryui is this one - cool effect isnt it:
http://jqueryui.com/demos/datepicker/
Click on the formular-field…

what do u think? did anyone work any further regarding layout? i think it’s a big point cause the first thing users see is the interface - so if they like it they will use piwik in the future - if not - than not!

As I recall, the jquery ui datepicker lost some functionality when it was moved into jquery ui. We’ll re-evaluate when we upgrade to jquery 1.3.x. I’m currently leaning towards http://keith-wood.name/datepick.html

HI Vipsoft,

ah no problem, that Datepicker can be easily styled via css and you can also apply Themeroller (jquery ui) styles to the datepicker.

Just go here again: http://keith-wood.name/datepick.html

than click an the tab called “Styling”. There you can select a theme from the dropdown menu.

the best theme imho for piwik would be:
1.ThemeRoller Redmond (ui-redmond.datepick.css)
2. ThemeRoller Cupterino (ui-cupertine.datepick.css)

i suggest to use the nice fade out effect if the datepicker appears. furthermore it would be better to have the datepicker over the rest of the screen via layer. right now the whole ui gets down and up when using the datepicker.

@vipsoft: what do u think?

Ok, putting on my UI design hat…

Yeah, I too would prefer the datepick was a separate layer (overlay) instead of expanding/collapsing that space.

Re: file reorganization. It would be convenient, but it isn’t a requirement to theming. We’ll load the custom theme/stylesheet last, so it overrides those defined by Piwik.

http://dev.piwik.org/trac/ticket/946 is a ticket to clean up some CSS (…there might be other cases as well…).

On a slight tangent, I think we should adopt a CSS framework to bring some uniformity to our markup. That could be a project in itself (given the scope) but could be done in steps.

Feel free to voice recommendations, contribute patches, etc.

I thought there’d be more discussion, so I hope you all aren’t surprised by the changes coming…

What will be changed? got some screens?