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
@@ -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"
}
No changes.
Copy path View file
@@ -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.
Copy path View file
Binary file not shown.
@@ -137,6 +137,15 @@ table.dataTable tr.subDataTable:hover > td .dataTableRowActions {
color: @theme-color-text-base;
}
.dataTableSearchPattern {
background-image: url(plugins/PleineLune/images/search_bg.png);
}
.dataTableSearchPattern input {
color: @theme-color-background-base;
font-size: 12px;
}
/* LimitSelection */
.limitSelection > div {
border-color: @theme-color-background-smallContrast;
@@ -20,4 +20,9 @@
border-radius: 0;
box-shadow: none;
}
.loginSection form input[type="text"],
.loginSection form input[type="password"] {
color: @theme-color-background-smallContrast;
}
}
@@ -34,24 +34,4 @@
.tagCloud span.word a:hover {
color: @theme-color-text-focus;
}
/* Live ! */
.simple-realtime-visitor-counter {
border-radius: 0;
background: @theme-color-text-active;
}
.simple-realtime-visitor-counter > div {
color: @theme-color-background-base;
}
/* Visits */
#visitsLive .datetime {
background: @theme-color-background-smallContrast;
}
#visitsLive .referer,
#visitsLive .settings {
background: @theme-color-background-base;
}
@@ -0,0 +1,35 @@
/* Live ! */
.simple-realtime-visitor-counter {
border-radius: 0;
background: @theme-color-text-active;
}
.simple-realtime-visitor-counter > div {
color: @theme-color-background-base;
}
/* Visits */
#visitsLive {
color: @theme-color-text-base;
}
#visitsLive .datetime,
#visitsLive .country,
#visitsLive .referer,
#visitsLive .settings,
#visitsLive .returning {
border: 1px solid @theme-color-background-smallContrast;
border-width: 0 1px 1px 0;
}
#visitsLive .datetime {
background: @theme-color-background-smallContrast;
border-top: 1px solid #404040;
}
#visitsLive .country,
#visitsLive .referer,
#visitsLive .referer:hover,
#visitsLive .settings {
background: @theme-color-background-base;
}
@@ -39,4 +39,5 @@
@import "../../PleineLune/stylesheets/plugins/_userManager.less";
@import "../../PleineLune/stylesheets/plugins/_userCountry.less";
@import "../../PleineLune/stylesheets/plugins/_dbStats.less";
@import "../../PleineLune/stylesheets/plugins/_installation.less";
@import "../../PleineLune/stylesheets/plugins/_installation.less";
@import "../../PleineLune/stylesheets/plugins/_live.less";
ProTip! Use n and p to navigate between commits in a pull request.