Consolidation of css files


(Sorius) #1

Hi alltogether,

wouldnt it be better to consolidate the css files? now we have a lot of different css and the dashboard.css is loaded twice times.

a nice article about perfomance can be found here:
Minify JavaScript and CSS
developer.yahoo.com/performance/rules.html

if we consolidate the css we can save a lot of http requests!

furthermore there are some mistakes in it, see here:
jigsaw.w3.org/css-validator/validat…g=1&lang=de

last but not least we could optimize the css see here:
www.bloggingpro.com/archives/2006/0…s-optimization/

and then pack/minify it see here:
developer.yahoo.com/yui/compressor/

many things can be also used on js files (especially the minify option)

i could try to adjust the css if you want…

greetings sorius

here’s the code for ALL css in the demo site (dashboard)
piwik.org/demo/index.php?module=Cor…;date=yesterday
Eingebettete Styles von piwik.org/demo/index.php?module=Cor…;date=yesterday

#tagCloud{
width:100%;
}
img {
border:0;
}
.word a {
text-decoration:none;
}
.word {
padding: 4px 4px 4px 4px;
}
.valueIsZero {
text-decoration: line-through;
}
span.size0, span.size0 a {
color: #344971;
font-size: 28px;
}
span.size1, span.size1 a {
color: #344971;
font-size: 24px;
}
span.size2, span.size2 a {
color: #4B74AD;
font-size:20px;
}
span.size3, span.size3 a {
color: #A3A8B6;
font-size: 16px;
}
span.size4, span.size4 a {
color: #A3A8B6;
font-size: 15px;
}
span.size5, span.size5 a {
color: #A3A8B6;
font-size: 14px;
}
span.size6, span.size6 a {
color: #A3A8B6;
font-size: 11px;
}

piwik.org/demo/libs/jquery/thickbox.css?piwik=0.4.3

/* ----------------------------------------------------------------------------------------------------------------/
/
---------->>> global settings needed for thickbox <<<-----------------------------------------------------------/
/
----------------------------------------------------------------------------------------------------------------/
/
----------------------------------------------------------------------------------------------------------------/
/
---------->>> thickbox specific link and font settings <<<------------------------------------------------------/
/
----------------------------------------------------------------------------------------------------------------*/
#TB_window {
font: 12px Arial, Helvetica, sans-serif;
color: #333333;
}

#TB_secondLine {
font: 10px Arial, Helvetica, sans-serif;
color: #666666;
}

#TB_window a:link {
color: #666666;
}

#TB_window a:visited {
color: #666666;
}

#TB_window a:hover {
color: #000;
}

#TB_window a:active {
color: #666666;
}

#TB_window a:focus {
color: #666666;
}

/* ----------------------------------------------------------------------------------------------------------------/
/
---------->>> thickbox settings <<<-----------------------------------------------------------------------------/
/
----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
position: fixed;
z-index: 100;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}

.TB_overlayMacFFBGHack {
background: url(libs/jquery/macFFBgHack.png) repeat;
}

.TB_overlayBG {
background-color: #000;
filter: alpha(opacity = 75);
-moz-opacity: 0.75;
opacity: 0.75;
}

  • html #TB_overlay { /* ie6 hack */
    position: absolute;
    height: expression(document . body . scrollHeight > document . body .
    offsetHeight ? document . body . scrollHeight : document
    . body .
    offsetHeight + ‘px’);
    }

#TB_window {
position: fixed;
background: #ffffff;
z-index: 102;
color: #000000;
display: none;
border: 4px solid #525252;
text-align: left;
top: 50%;
left: 50%;
}

  • html #TB_window { /* ie6 hack */
    position: absolute;
    margin-top: expression(0 - parseInt(this . offsetHeight/ 2) +
    (
    TBWindowMargin = document . documentElement && document .
    documentElement . scrollTop || document . body . scrollTop
    ) +
    ‘px’ );
    }

#TB_window img#TB_Image {
display: block;
margin: 15px 0 0 15px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 1px solid #666;
border-left: 1px solid #666;
}

#TB_caption {
height: 25px;
padding: 7px 30px 10px 25px;
float: left;
}

#TB_closeWindow {
height: 25px;
padding: 11px 25px 10px 0;
float: right;
}

#TB_closeAjaxWindow {
padding: 7px 10px 5px 0;
margin-bottom: 1px;
text-align: right;
float: right;
}

#TB_ajaxWindowTitle {
float: left;
padding: 7px 0 5px 10px;
margin-bottom: 1px;
}

#TB_title {
background-color: #e8e8e8;
height: 27px;
}

#TB_ajaxContent {
clear: both;
padding: 2px 15px 15px 15px;
overflow: auto;
text-align: left;
line-height: 1.4em;
}

#TB_ajaxContent.TB_modal {
padding: 15px;
}

#TB_ajaxContent p {
padding: 5px 0px 5px 0px;
}

#TB_load {
position: fixed;
display: none;
height: 13px;
width: 208px;
z-index: 103;
top: 50%;
left: 50%;
margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}

  • html #TB_load { /* ie6 hack */
    position: absolute;
    margin-top: expression(0 - parseInt(this . offsetHeight/ 2) +
    (
    TBWindowMargin = document . documentElement && document .
    documentElement . scrollTop || document . body . scrollTop
    ) +
    ‘px’ );
    }

#TB_HideSelect {
z-index: 99;
position: fixed;
top: 0;
left: 0;
background-color: #fff;
border: none;
filter: alpha(opacity = 0);
-moz-opacity: 0;
opacity: 0;
height: 100%;
width: 100%;
}

  • html #TB_HideSelect { /* ie6 hack */
    position: absolute;
    height: expression(document . body . scrollHeight > document . body .
    offsetHeight ? document . body . scrollHeight : document
    . body .
    offsetHeight + ‘px’);
    }

#TB_iframeContent {
clear: both;
border: none;
margin-bottom: -1px;
margin-top: 1px;
_margin-bottom: 1px;
}

piwik.org/demo/themes/default/common.css?piwik=0.4.3

/* reset style */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb
r,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strik
e
,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend
,
table,caption,tbody,tfoot,thead,tr,th,td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
form {margin: 0px 0px 0px 0px; }
body {
line-height: 1.33;
background-color: white;
color: black;
}

ol,ul {
list-style: none;
}

blockquote,q {
quotes: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}

del {
text-decoration: line-through;
}

/* start piwik styles */
body {
font-family: Georgia, “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
}
a {
color: #0F1B2E;
text-decoration:underline;
cursor:pointer;
}

#loadingPiwik {
font-weight: bold;
font-size: 1.1em;
color: #193B6C;
padding: 0.5em;
}

#loadingError {
font-weight: bold;
font-size: 1.1em;
color: #F88D22;
padding: 0.5em;
margin-left: 30%;
display: none;
}

#otherPeriods {
display:none;
}
#periodString #date, #periodString #periods, #periodString #date a, #periodString #periods a {
color: #520202;
font-size: 15pt;
text-decoration:none;
}
#periodString #periods a:hover {
text-decoration:underline;
}
#periodString {
padding-top: 2em;
margin-left: 350px;
display: block;
}
#header_message {
position: relative;
float: right;
text-align: left;
margin-top: 10px;
width: 300px;
line-height: 1.33;
border: 1px solid #FF7F00 ;
font-size: 0.9em;
padding:5px;
font-weight:bold;
right:10px;
}
#header_message, #header_message a {
color:#FF7F00;
}

#topRightBar {
padding: 0pt 0pt 4px;
font-size: 84%;
float:right;
}
#topLeftBar {
float: left;
height: 22px;
padding-left: 10px;
width:550px; /* when this is not set, wrong display in safari/chrome? */
}
#topLeftBar, #topRightBar {
font-family: arial, sans-serif !important;
height: 20px;
padding: 4px 10px 0px !important;
background-color: #FFFFFF;
font-size: 13px;
padding-top: 4px !important;
}
#logo {
float: left;
display: inline;
font-size: 45pt;
padding-left: 15px;
padding-left: 15px;
}
#javascriptDisable, #javascriptDisable a {
font-weight: bold;
color: #F88D22;
padding-left:1em;
clear:both;
}
.topBarElem {
height: 22px;
margin-right: 0.73em;
vertical-align: top;
color: #000000;
margin-bottom: 0px;
}
#tooltip h3 {
font-weight:none;
font-size:1em;
color:#162540;
margin:0;
padding:0;
}
#tooltip {
position: absolute;
z-index: 3000;
border: 1px solid #111;
padding:7px;
background-color:#F5F7FF;
opacity:0.95;
}

.tableForm {
cellspacing:0;
}
.tableForm td {
border-color:#FFFFFF rgb(198, 205, 216) rgb(198, 205, 216) rgb(198, 205, 216) ;
border-style:solid;
padding:0.5em 0.5em 0.5em 0.8em;
border-width:10px 1px 1px 1px;
color:#203276;
}
.tableForm input {
font-size:1.1em;
border-color:#CCCCCC rgb(153, 153, 153) rgb(153, 153, 153) rgb(204, 204, 204);
border-width:1px;
color:#3A2B16;
padding:0.15em;
}
.tableForm .submit {
text-align:center;
}
.submit input{
margin-top:15px;
background:transparent url(./images/background-submit.png) repeat scroll 0%;
font-size:1.4em;
border-color:#CCCCCC rgb(153, 153, 153) rgb(153, 153, 153) rgb(204, 204, 204);
border-style:double;
border-width:3px;
color:#333333;
padding:0.15em;
}

#ajaxError {
color: red;
text-align: center;
font-weight: bold;
width: 550px;
border: 3px solid red;
margin: 10px;
padding: 10px;
}

piwik.org/demo/plugins/CoreHome/tem…css?piwik=0.4.3

h1 {
font-size: 2em;
color: #0F1B2E;
padding-bottom: 1em;
}

h2 {
font-size: 1.6em;
color: #1D3256;
padding-bottom: 0.5em;
clear:both;
}

h3 {
font-size: 1.3em;
margin-top: 2em;
color: #1D3256;
}

p {
padding-bottom: 1em;
margin-right: 1em;
}

/* Content */
#content {
margin-left: 10px;
}

/* 2 columns reports /
#leftcolumn {
float: left;
width: 50%;
padding-left: 10px;
}
#rightcolumn {
float: right;
width: 45%;
}
/
not in widget */
.widget #leftcolumn, .widget #rightcolumn {
float:left;
width:100%;
padding-left:10px;
}

#calendar {
display: block;
}

/* Calendar*/
.calendar td.dateToday,.calendar td.dateToday a {
font-weight: bold;
}

.calendar td.dateUsedStats,.calendar td.dateUsedStats a {
color: #2E85FF;
border-color: #2E85FF;
}

.calendar td.calendar_unselectable {
color: #F2F7FF;
}

.calendar {
line-height: 1.33;
}

#otherPeriods a {
text-decoration: none;
}

#otherPeriods a:hover {
text-decoration: underline;
}

#currentPeriod {
border-bottom: 1px dotted #520202;
}

.hoverPeriod {
cursor: pointer;
font-weight: bold;
border-bottom: 1px solid #520202;
}

div .sparkline {
float:left;
clear:both;
padding-bottom: 1px;
margin-top:10px;
border-bottom:1px solid white;
}
.sparkline img {
vertical-align: middle;
padding-right: 10px;
margin-top: 0;
}

piwik.org/demo/plugins/CoreHome/tem…css?piwik=0.4.3

.nav,.nav * {
margin: 0;
padding: 0;
}

.nav {
z-index:10;
padding-bottom: 2.5em;
height: 2.5em;
float: left;
line-height: 1.0;
margin-bottom: 1.5em;
position: relative;
width:100%;
}

.nav ul {
background: #fff; /IE6 needs this/
float: left;
position: relative;
}

/* LEVEL1 NORMAL */
.nav li {
background: #DFE6FF;
border-left: 1px solid #fff;
float: left;
list-style: none;
z-index: 49;
}

.nav li.current ul {
z-index: 49;
}

.nav li.sfHover ul,ul.nav li:hover ul {
z-index: 50;
}

/* LEVEL2 NORMAL */
.nav li li {
background: #FBFFFF;
border-left-color: #AABDE6;
}

.nav a {
border-bottom: 1px solid #CFDEFF;
color: #13a;
display: block;
float: left;
padding: .75em 0 .75em 1em;
text-decoration: none;
width: 8em;
}

.nav li ul {
left: 0;
top: -999em;
position: absolute;
}

/* LEVEL1 HOVER */
.nav li:hover,.nav li.sfHover,.nav li.current,.nav a:focus,.nav a:hover,.nav a:active
{
background: #C9D5FF;
}

.nav li {
font-weight: normal;
}

.nav li.sfHover {
font-weight: bold;
}

/* LEVEL2 HOVER */
.nav li li:hover,.nav li li.sfHover,.nav li li a:focus,.nav li li a:hover,.nav li li a:active
{
background: #C9F6FF;
font-weight: bold;
}

.nav li.sfHover a,.nav li.current a,.nav a:focus,.nav a:hover,.nav a:active
{
border-bottom: none;
}

.nav li li.current a {
font-weight: bold;
}

.nav li:hover ul, /* pure CSS hover is removed below / body .nav li.current ul,
/
this must be more specific than the .superfish override below */ ul.nav li.sfHover ul
{
top: 2.5em;
}

.nav li:hover li ul,.nav li.sfHover li ul {
top: -999em;
}

.nav li li:hover ul, /* pure CSS hover is removed below */ ul.nav li li.sfHover ul
{
top: 2.5em;
}

/following rule negates pure CSS hovers
so submenu remains hidden and JS controls
when and how it appears
/
.superfish li:hover ul,.superfish li li:hover ul {
top: -999em;
}

piwik.org/demo/plugins/CoreHome/tem…css?piwik=0.4.3

/Overriding some dataTable css for better dashboard display/
.widget .dataTableWrapper,
.widget .dataTableAllColumnsWrapper,
.widget .dataTableGraphWrapper,
.widget .dataTableActionsWrapper,
.widget .dataTableGraphEvolutionWrapper {
width: 100%;
}

.widget {
z-index:1;
}

/* container of each table /
.dataTableWrapper {
width: 450px;
/
not more than 450px to make sure 2 tables can fit horizontally on a 1024 screen */
}
.dataTableAllColumnsWrapper {
width: 535px;
}

.subdataTableWrapper{
width: 95%;
}
.subdataTableAllColumnsWrapper {
width: 95%;
}

.dataTableActionsWrapper {
width: 500px;
}

.dataTableGraphWrapper {
width: 500px;
}

.dataTableGraphEvolutionWrapper {
width: 100%;
}

/* main data table */
table.dataTable {
width: 100%;
padding: 0;
border-spacing: 0;
margin: 0;
font-size: 0.9em;
}

table.dataTable td.label,
table.subDataTable td.label,
table.dataTableActions td.label {
width: 100%;
}

table.dataTable img,
table.subDataTable img,
table.dataTableActions img {
vertical-align: middle;
}

table.dataTable img {
border: 0;
margin-right: 1em;
margin-left: 0.5em;
}

table.dataTable tr.subDataTable {
cursor: pointer;
}

table.dataTable th {
margin: 0;
color: #6D929B;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
text-align: left;
padding: 6px 6px 6px 12px;
background: #D4E3ED url(images/bg_header.jpg) repeat-x;
}

table.dataTable th.columnSorted {
font-weight: bold;
padding-right: 20px;
}

table.dataTable td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-left: 0;
padding: 5px 5px 5px 12px;
background: #fff;
}

table.dataTable td,table.dataTable td a {
margin: 0;
text-decoration: none;
color: #4f6b72;
}

table.dataTable td.labeleven,table.dataTable td.columneven {
background: #F9FAFA;
}

table.dataTable td.columneven {
color: #797268;
}

table.dataTable td.labeleven {
background-image: url(images/bullet2.gif);
background-repeat: no-repeat;
color: #797268;
}

table.dataTable td.labelodd {
background: #fff url(images/bullet1.gif) no-repeat;
}

table.dataTable td.label,table.subActionsDataTable td.label,table.actionsDataTable td.label
{
border-top: 0;
border-left: 1px solid #C1DAD7;
}

table.dataTable th.label {
border-left: 1px solid #C1DAD7;
}

/* the cell containing the subdatatable */
table.dataTable .cellSubDataTable {
border-left: 1px solid #C1DAD7;
padding: 0;
margin: 0;
}

/* A link in a column in the DataTable */
table.dataTable td #urlLink {
display: none;
}

/* SUBDATATABLE / / a datatable inside another datatable */
table.subDataTable {
background: #FFFFFF;
margin: 10px;
}

table.subDataTable td {
border: 0;
}

table.subDataTable thead th {
font-weight: normal;
font-size: 1.1em;
text-align: left;
border: 0;
border-bottom:1px solid #D1D1D1;
border-right:1px solid #D1D1D1;
border-top:1px solid #D1D1D1;
padding: .3em 1em;
color: #333333;
background: #FFE9C6;
}

table.subDataTable td.labeleven,table.subDataTable td.labelodd {
background-image: none;
}

table.subDataTable td {
border-right: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
border-left: 0;
}

table.subDataTable td,table.subDataTable td a {
color: #615B53;
}

table.subDataTable td.labeleven,table.subDataTable td.columneven {
color: #2D2A27;
}

table.subDataTable td.label {
width: 80%;
}

table.subDataTable td.labelodd,table.subDataTable td.labelodd a {
background: #ffffff;
}
table.subDataTable td.label {
padding: 5px;
}
table.dataTable img {
margin-left:0;
}
/* misc SPAN and DIV */
table thead div {

}

#sortIconContainer {
float: right;
}

#sortIcon {
margin: 0px;
position: absolute;
}

#dataTablePages {
color: #BFBFBF;
font-weight: bold;
margin: 10px;
font-size: 0.9em;
}

#dataTableSearchPattern {
display: inline;
white-space: nowrap;
}

#dataTableSearchPattern input {
font-size: 0.7em;
padding: 2px;
border: 1px solid #B3B3B3;
color: #0C183A;
}

#dataTableSearchPattern input:hover {
background: #F7F7FF none repeat scroll 0%;
}

#dataTableSearchPattern #keyword {
background: transparent url(images/search.png) no-repeat scroll 4px
center;
padding: 3px 3px 3px 20px;
}

#dataTableExcludeLowPopulation,#dataTableNext,#dataTablePrevious {
font-size: 0.9em;
color: #184A83;
text-decoration: underline;
cursor: pointer;
}

.subDataTable#dataTableFeatures {
padding-top: 0px;
padding-bottom: 5px;
width: 100%;
}

#dataTableFeatures {
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
text-align: center;
}

#dataTableExcludeLowPopulation {
float: right;
font-size: 0.8em;
color: #C3C6D8;
text-align: right;
}

#dataTableNext,#dataTablePrevious,#dataTableSearchPattern,#loadingDataTable
{
display: none;
}

.subDataTable #dataTableFooterIcons {
height: 0px;
}

#dataTableFooterIcons {
float: right;
height: 18px;
}

#exportToFormat {
float: right;
}

#dataTableFooterIconsShow {
float: right;
}

#dataTableFooterIcons,#dataTableFooterIcons a {
text-decoration: none;
color: #8894B1;
font-size:0.9em;
}

.dataTableSpacer {
clear: both;
}

#loadingDataTable {
float: left;
font-size: 0.9em;
color: #193B6C;
padding: 0.5em;
}

/* Actions table */
table.dataTableActions tr td.labelodd {
background-image: none;
}

/* levels higher than 4 have a default padding left */
tr.subActionsDataTable td.label,tr.actionsDataTable td.label {
padding-left: 7em;
}

tr.level0 td.label {
padding-left: +1.5em;
}

tr.level1 td.label {
padding-left: +3.5em;
}

tr.level2 td.label {
padding-left: +5.5em;
}

tr.level3 td.label {
padding-left: +6.5em;
}

tr.level4 td.label {
padding-left: +7em;
}

tr td.label img.plusMinus {
margin-left: -1em;
margin-right: 0em;
}

#emptyDatatable {
padding-top: 20px;
padding-bottom: 10px;
text-align: center;
font-size: 0.9em;
font-style: italic;
}

piwik.org/demo/plugins/Dashboard/te…css?piwik=0.4.3

.col {
float: left;
width: 33%;
}

.sortable {
background: white;
}

.hover {
border: 2px dashed #E3E3E3;
}

.widget {
border: 1px solid #D2D9EB;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 5px;
margin-left: 5px;
overflow: hidden;
}

.widgetHover {
border: 1px solid #CBD3E7;
}

.widgetTop {
background: #F0F0FA;
border-bottom: 1px solid #D2D9EB;
width: 100%;
cursor: move;
font-size: 10pt;
font-weight: bold;
padding-bottom: 4px;
}

.widgetTopHover {
background: #E6E6F5;
}

.widgetName {
font-size: 14pt;
margin-left: 25px;
}

.dummyItem {
width: 100%;
height: 150px;
display: block;
visibility:hidden;
}

.button {
cursor: pointer;
}

#close.button {
float: right;
display: none;
margin: 3px;
}

.dialog {
display: none;
padding: 20px 10px;
color: #7A0101;
cursor: wait;
font-size: 1.2em;
font-weight: bold;
text-align: center;
}

.helper {
width: 33%;
opacity: .6;
filter: alpha(opacity = 60); /for IE/
}

.dummyHandle {
display: none;
}

.menu {
display: none;
border: 2px solid #FCB842;
background: white;
}

.menuItem {
}

.menuSelected {
border-bottom: 2px dotted #CCCCCC;
margin-bottom: -2px;
}

.menuDisabled {
color: lightgrey;
cursor: default;
}

.widgetLoading {
cursor: wait;
padding: 10px;
text-align: center;
font-size: 10pt;
}

#menuTitleBar {
background: #FFC35C;
font-size: 14pt;
font-weight: bold;
padding: 2px 20px 6px 20px;
border-bottom: 2px solid #FCB842;
}

#closeMenuIcon {
float: right;
margin: 3px;
}

.subMenu {
float: left;
margin: 30px;
}

#sub1.subMenu {
cursor: default;
margin-left: 50px;
}

#sub2.subMenu {
cursor: pointer;
}

#sub3.subMenu {
float: left;
width: 40%
}

ol#menuList {
color: #CCCCCC;
list-style-type: lower-roman;
line-height: 25px;
}

ul#widgetList {
list-style-type: none;
line-height: 25px;
}

.subMenuItem span {
color: black;
}

.menuClear {
clear: both;
height: 30px;
}

#closeMenuIcon {
cursor: pointer;
}

#addWidget {
font-weight: bold;
}

.widget input {
background: #F7F7FF none repeat scroll 0% 50%;
border: 1px solid #B3B3B3;
color: #0C183A;
font-size: 0.7em;
padding: 2px;
}

#widgetChooser {
z-index:100;
}
#widgetChooser .widgetTop {
cursor:pointer;
}

piwik.org/demo/libs/jquery/jquery-c…css?piwik=0.4.3

/* Main Style Sheet for jQuery Calendar */
#calendar_div,.calendar_inline {
font-size: 14px;
padding: 0;
margin: 0;
}

#calendar_div {
display: none;
border: 1px solid #777;
z-index: 10; /must have/
}

#calendar_div,.calendar_control,.calendar_links,.calendar_header,.calendar
{
width: 185px;
}

.calendar_inline {
float: left;
display: block;
border: 0;
}

.calendar_dialog {
padding: 5px !important;
border: 4px ridge #ddd !important;
}

button.calendar_trigger {
width: 25px;
}

img.calendar_trigger {
margin: 2px;
vertical-align: middle;
}

.calendar_prompt {
float: left;
width: 181px;
padding: 2px;
background: #ddd;
color: #000;
}

  • html .calendar_prompt {
    width: 185px;
    }

.calendar_control,.calendar_links,.calendar_header,.calendar {
clear: both;
float: left;
color: #fff;
}

.calendar_control {
background: #400;
}

.calendar_links {
background: #000;
}

.calendar_control,.calendar_links {
font-weight: bold;
font-size: 80%;
letter-spacing: 1px;
}

.calendar_links label { /* disabled links */
padding: 2px 5px;
color: #888;
}

.calendar_clear,.calendar_prev {
float: left;
}

.calendar_current {
float: left;
width: 35%;
text-align: center;
}

.calendar_close,.calendar_next {
float: right;
}

.calendar_header {
background: #333;
text-align: center;
font-weight: bold;
}

.calendar_header select {
background: #333;
color: #fff;
border: 0px;
font-weight: bold;
}

.calendar {
background: #ccc;
text-align: center;
font-size: 100%;
}

.calendar a {
display: block;
width: 100%;
}

.calendar .calendar_titleRow {
background: #777;
}

.calendar .calendar_daysRow {
background: #eee;
color: #666;
}

.calendar .calendar_daysCell {
color: #000;
border: 1px solid #ddd;
}

#calendar .calendar_daysCell a {
display: block;
}

.calendar .calendar_weekEndCell {
background: #ddd;
}

.calendar .calendar_daysCellOver {
background: #fff;
border: 1px solid #777;
}

.calendar .calendar_unselectable {
color: #888;
}

/* ________ CALENDAR LINKS _______

** Reset link properties and then override them with !important */
#calendar_div a,.calendar_inline a {
cursor: pointer;
margin: 0;
padding: 0;
background: none;
color: #000;
}

.calendar_inline .calendar_links a {
padding: 0 5px !important;
}

.calendar_control a,.calendar_links a {
padding: 2px 5px !important;
color: #eee !important;
}

.calendar_titleRow a {
color: #eee !important;
}

.calendar_control a:hover {
background: #fdd !important;
color: #333 !important;
}

.calendar_links a:hover,.calendar_titleRow a:hover {
background: #ddd !important;
color: #333 !important;
}

/* ___________ IE6 IFRAME FIX ________ */
.calendar_cover {
display: none; /sorry for IE5/
display /**/: block; /sorry for IE5/
position: absolute; /must have/
z-index: -1; /must have/
filter: mask(); /must have/
top: -4px; /must have/
left: -4px; /must have/
width: 193px; /must have to match width and borders/
height: 200px; /must have to match maximum height/
}

piwik.org/demo/themes/default/styles.css?piwik=0.4.3

.formDiv{
position:relative;
color:#0066FF;
text-align:left;
z-index:100;
}

.formDiv_main_link{
color:#000000;
outline:none;
text-decoration:none;
padding:2px 4px 2px 4px;
}
.formDiv ul li a{
color:#1F447F;
text-decoration:none;
padding:2px 4px 2px 4px;
}
.formDiv ul li a:hover{
}
.formDiv ul li a:visited{
}

.formDiv a.collapsed{
background:#ffffff url(‘images/collapsed_arrows.gif’) no-repeat right center;
padding-right:16px;
color:#000000;
text-decoration:none;
}
.formDiv a.expanded{
background:#176999 url(‘images/expanded_arrows.gif’) no-repeat right center;
padding-right:16px;
color:#ffffff;
text-decoration:none;
}
.formDiv a:hover{
text-decoration:underline;
}

.formDiv_ul_list{
list-style:none;
background:#Ffffff;
border: 1px solid #1F447F;
}

.formDiv_ul_list li {
padding:0px;
}

.formDiv_ul_list li a{
height:auto;
display:block;
}

.formDiv_ul_list li a:hover{
background:#176999;
color:#ffffff;
text-decoration:none;
}

piwik.org/demo/plugins/Dashboard/te…css?piwik=0.4.3

.col {
float: left;
width: 33%;
}

.sortable {
background: white;
}

.hover {
border: 2px dashed #E3E3E3;
}

.widget {
border: 1px solid #D2D9EB;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 5px;
margin-left: 5px;
overflow: hidden;
}

.widgetHover {
border: 1px solid #CBD3E7;
}

.widgetTop {
background: #F0F0FA;
border-bottom: 1px solid #D2D9EB;
width: 100%;
cursor: move;
font-size: 10pt;
font-weight: bold;
padding-bottom: 4px;
}

.widgetTopHover {
background: #E6E6F5;
}

.widgetName {
font-size: 14pt;
margin-left: 25px;
}

.dummyItem {
width: 100%;
height: 150px;
display: block;
visibility:hidden;
}

.button {
cursor: pointer;
}

#close.button {
float: right;
display: none;
margin: 3px;
}

.dialog {
display: none;
padding: 20px 10px;
color: #7A0101;
cursor: wait;
font-size: 1.2em;
font-weight: bold;
text-align: center;
}

.helper {
width: 33%;
opacity: .6;
filter: alpha(opacity = 60); /for IE/
}

.dummyHandle {
display: none;
}

.menu {
display: none;
border: 2px solid #FCB842;
background: white;
}

.menuItem {
}

.menuSelected {
border-bottom: 2px dotted #CCCCCC;
margin-bottom: -2px;
}

.menuDisabled {
color: lightgrey;
cursor: default;
}

.widgetLoading {
cursor: wait;
padding: 10px;
text-align: center;
font-size: 10pt;
}

#menuTitleBar {
background: #FFC35C;
font-size: 14pt;
font-weight: bold;
padding: 2px 20px 6px 20px;
border-bottom: 2px solid #FCB842;
}

#closeMenuIcon {
float: right;
margin: 3px;
}

.subMenu {
float: left;
margin: 30px;
}

#sub1.subMenu {
cursor: default;
margin-left: 50px;
}

#sub2.subMenu {
cursor: pointer;
}

#sub3.subMenu {
float: left;
width: 40%
}

ol#menuList {
color: #CCCCCC;
list-style-type: lower-roman;
line-height: 25px;
}

ul#widgetList {
list-style-type: none;
line-height: 25px;
}

.subMenuItem span {
color: black;
}

.menuClear {
clear: both;
height: 30px;
}

#closeMenuIcon {
cursor: pointer;
}

#addWidget {
font-weight: bold;
}

.widget input {
background: #F7F7FF none repeat scroll 0% 50%;
border: 1px solid #B3B3B3;
color: #0C183A;
font-size: 0.7em;
padding: 2px;
}

#widgetChooser {
z-index:100;
}
#widgetChooser .widgetTop {
cursor:pointer;
}

piwik.org/demo/plugins/ExampleRssWi…css?piwik=0.4.3

.rss ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
padding:0pt;
}
.rss li {
line-height:140%;
margin-bottom:6px;
margin:0.5em 0pt 1em;
}
.rss-title, .rss-date {
float:left;
font-size:14px;
line-height:140%;
}
.rss-title{
color:#2583AD;
margin:0pt 0.5em 0.2em 0pt;
font-weight:bold;
}
.rss-date {
color:#999999;
margin:0pt;
}
.rss-content, .rss-description {
clear:both;
line-height:1.5em;
font-size:11px;
color:#333333;
}

piwik.org/demo/themes/default/styles.css?piwik=0.4.3

.formDiv{
position:relative;
color:#0066FF;
text-align:left;
z-index:100;
}

.formDiv_main_link{
color:#000000;
outline:none;
text-decoration:none;
padding:2px 4px 2px 4px;
}
.formDiv ul li a{
color:#1F447F;
text-decoration:none;
padding:2px 4px 2px 4px;
}
.formDiv ul li a:hover{
}
.formDiv ul li a:visited{
}

.formDiv a.collapsed{
background:#ffffff url(‘images/collapsed_arrows.gif’) no-repeat right center;
padding-right:16px;
color:#000000;
text-decoration:none;
}
.formDiv a.expanded{
background:#176999 url(‘images/expanded_arrows.gif’) no-repeat right center;
padding-right:16px;
color:#ffffff;
text-decoration:none;
}
.formDiv a:hover{
text-decoration:underline;
}

.formDiv_ul_list{
list-style:none;
background:#Ffffff;
border: 1px solid #1F447F;
}

.formDiv_ul_list li {
padding:0px;
}

.formDiv_ul_list li a{
height:auto;
display:block;
}

.formDiv_ul_list li a:hover{
background:#176999;
color:#ffffff;
text-decoration:none;
}

www.feedburner.com/fb/ticker/api-ti…jsp?uris=Piwik
Eingebettete Styles von www.feedburner.com/fb/ticker/api-ti…jsp?uris=Piwik

a:link, a:visited {
color: #000099;
text-decoration: underline;
}

a:hover {
color: #ff0000;
}

body {
font-family: “Trebuchet MS”, Arial, sans-serif;
font-size: 15px;
color:#333;
}

div#ctr {
margin: 0 auto 0 auto;
width:550px;
padding:0;
}

div#detail {
margin: 1em 0 0 0;
padding:6px;
border:1px dotted red;
}

h1 {
font-size:23px;
}

h2 {
font-size:18px;
margin-bottom:0;
}

img {
border:0;
}


(vipsoft) #2

There’s already a ticket to merge and minify css and js. It’s non-trivial because plugins can dynamically add external css and js files. If you want to tackle that it’s http://dev.piwik.org/trac/ticket/660

There’s also a ticket for the css validation errors. Help in this area is also appreciated. http://dev.piwik.org/trac/ticket/946