Hello!
I was not glad about the situation that you can’t format the content of the OptOut-iframe and let it look like the rest of your site. So I decided to solve the problem by myself. I guess I found a practical way to integrate the iframe into the individual layout of the calling page. I just changed the template for the OptOut-iframe a little bit and wrote an additional file (customize.js), which I put in the same folder as the template.
Changed file: "plugins/CoreAdminHome/templates/optOut.tpl“
New file: "plugins/CoreAdminHome/templates/customize.js“
The main idea was to add another parameter to the iframe-source-attribute with individual data for the style of the embedded iframe. And – you won’t believe it – I’ve decided to name that parameter „style“. The value of the new parameter should be a JSON-object which keys are a list of selectors (use jQuery-selectors) and their values are further JSON-objectes with the style-informations.
For example:
{
"p": {"color":"black", "font-size":"12px"},
"body": {"margin":"0px", "padding":"0px"}
}
Of course the value for the parameter „style“ has to be url-encoded. If you use a script-language like PHP, it is very comfortable. Here is an example for the iframe-tag using PHP:
<iframe ...
src = "http://your-piwik-domain.org/index.php?
module=CoreAdminHome&
action=optOut&
language=whatever&
style=<?php echo urlencode('{
"p": {"color":"black", "font-size":"12px"},
"body": {"margin":"0px", "padding":"0px"}
}'); ?>
></iframe>
The changes of the OptOut-template are references to jQuery and the new file „customize.js“. I also add some logical HTML-markups for an easier way to select elements of the iframe (and to improve the accessibility).
The script of my additional embedded JS-file waits until the whole content of the iframe is loaded. Then it reads the style-information from the new parameter and starts to customize the styling of the iframe-elements by using the jQuery-CSS-function from within the iframe. So there should not occur any problems with the Same-Origin-Policy.
$([i]selector[/i]).css({[i]styles-object[/i]})
As far as I can see my solution has no security problems for Piwik or for the users because the transmitted data from the individual site has to be valid JSON and is interpreted by the css()-function of jQuery. And without active JS or without setting the parameter “style” on the calling page nothing happens and all looks and acts just like before.
If you like my solution, feel free to download the files from my homepage and copy them to your own Piwik-installation. On my homepage you can find a description in German as well.
And if you people at Piwik like my idea just as I do, it’s up to you to integrate the two files into Piwik (Of cause I set my new added file just like PIWIK under the GPL v. 3).
Here you can find the German description and the needed files packed in one zip-file:
www.selcox.de/software/customize-optout-layout.php
Comments are willcome.
Ciao
Someone