New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PleineLune theming #101

Merged
merged 5 commits into from Aug 12, 2013
Next

Initiate theme documentation

  • Loading branch information...
tzi committed Aug 11, 2013
commit 0c7f766e9f2eb0ea65c3f2013c85e8d10e4db3e4
@@ -0,0 +1,6 @@
{
"name": "PleineLune",
"description": "A dark theme for Piwik, ideal to view your analytics reports before sunrise.",
"theme": true,
"stylesheet": "stylesheets/theme.less"
}
@@ -0,0 +1,100 @@
Create a Theme for Piwik
==============
Quick start
------------
1. Create a file to describe your plugin with the following path: "plugins/<yourPluginName>/plugin.piwik.json"
```json
{
"theme": true,
"stylesheet": "stylesheets/theme.less"
}
```
2. Create your stylesheet file with the following path: "plugins/<yourPluginName>/stylesheets/theme.less"
3. Activate your theme on the Piwik instance: Settings > Platform > Themes
About the plugin.piwik.json file
------------
You can complete your plugin.piwik.json file with the following entries:
* "description"
* "homepage"
* "author"
* "author_homepage"
* "license"
* "license_homepage"
* "version"
Activate the development mode
-------------
If you change your theme.less file, you will not see the difference on your Piwik instance.
The stylesheets have a cache mode to prevent from compiling them on every page call.
To disable it, you have to modify the "config/config.ini.php" file:
```ini
[Debug]
disable_merged_assets = 1
```
Limitations
------------
You just can not theme:
* Installation plugin pages
* CoreUpdater plugin pages
How to theme
===============
Images
----------
You can stock your images in the folder "plugins/<yourPluginName>/images".
To use images in CSS, you have to use a relative path that start at the root folder.
Example:
```css
background-image: url(plugins/<yourPluginName>/images/dropDown.jpg);
```
Multiple stylesheets files
----------
You can submit only one stylesheets file for theme.
But you can import other Less files from the main theme file:
Example:
```css
@import "../../plugins/<yourPluginName>/stylesheets/_<yourSubStylesheetName>.less"
```
It's important to use this complex path to prevent compilation bugs.
It is better to prefix your sub stylesheet file name with an '_'.
Graphs
----------
You can style some graph elements.
You should see "plugins/CoreHome/stylesheets/jqplotColors.less" for more informations.
Sparklines
----------
You can style some sparklines elements.
You should see "plugins/CoreHome/stylesheets/sparklineColors.less" for more informations.
Transitions
----------
You can style some transitions elements.
You should see "plugins/Transition/stylesheets/_transitionColors.less" for more informations.
ProTip! Use n and p to navigate between commits in a pull request.