blob: 8c4d9087b59ab1e02b06ad26aa8fe7501b7619db (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
Create a Theme for Piwik
==============
Quick start
------------
1. Create a file describing your plugin at the following path: "plugins/YourPluginName/plugin.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.json file
------------
You can complete your plugin.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.
|
