Use consistent fonts and colors in new Morpheus theme CSS/less #4457

Closed
mattab opened this Issue Dec 29, 2013 · 9 comments

4 participants

@mattab
Piwik Open Source Analytics member

There still are multiple places where Arial is used, e.g. in Row Evolution.
Take a look at this and search for Arial:
http://demo.piwik.org/index.php?module=Proxy&action=getCss&cb=b425ba2228357203610ce9649a0a12dd

Maybe the style we want to use is "Verdana, sans-serif"?
Keywords: academy

@halfdan
Piwik Open Source Analytics member

Instead of replacing all those lines it would be best to simply add the font: [x] to body so all elements inherit it.

@mattab
Piwik Open Source Analytics member

In 23bd9b7: Rename annotations icons + adding two missing icons refs #4457

@mattab
Piwik Open Source Analytics member

In f415ca7: Adding icons refs #4457

@mattab
Piwik Open Source Analytics member

From Timo:

Some colors are not overridden either. I'll post this here because it's not enough for a separate ticket...

  • In Row Evolution, "Pick a row to compare" uses the old brown.
  • The subtitle of the popover loading message uses the old brown too. Happens for exmample when opening transitions. It says "Loading Transitions for [and URL uses the old brown.
  • I think I don't have to point out that the colors of Transitions itself are not adjusted, right? ;)
  • The "All Websites" Dashboard uses the old yellow as hover color for the table rows. Even for the lowest row that only says "1 - 10 of 10" - why does that have a hover effect at all?
  • Also related: on the "All Websites" dashboard, the white background of sparklines is visible. That's why the old theme uses a white background for all rows.
  • When klicking the export icon beneath a table, a box appears that offers the available formats. This box has a brown background. Should be grey.
  • In the segment editor, when a segment is dragged from the left menu to the right, the background is brown during the transition.
  • The link "crowdfunded" in the footer of the segment editor is brown.
  • The segment editor still uses Arial quite a bit. Almost everywhere else, Verdana is used. Row evolution is another one of those rare places where Arial is used.

And I found another couple of general bugs related to theming. I'll also post this here because I don't want to create a separate ticket for it.

@mattab
Piwik Open Source Analytics member

Removing owner from tickets. from now on, I suggest we assign tickets to ourselves for cases when we we plan to actively work on them in the coming days/weeks. let's discuss if needed during our team call.

@BeezyT
Piwik Open Source Analytics member

In a31b653: refs #4457: deals with some issues mentioned in comment 6. the segment editor is still not entirely perfect but much more consistent already.

The fixed items are:

  • In Row Evolution, "Pick a row to compare" uses the old brown.
  • The subtitle of the popover loading message uses the old brown too.
  • The "All Websites" Dashboard uses the old yellow as hover color for the table rows.
  • On the "All Websites" dashboard, the white background of sparklines is visible. That's why the old theme uses a white background for all rows.
  • When klicking the export icon beneath a table, a box appears that offers the available formats. This box has a brown background. Should be grey.
  • In the segment editor, when a segment is dragged from the left menu to the right, the background is brown during the transition.
  • The link "crowdfunded" in the footer of the segment editor is brown.
  • The segment editor still uses Arial quite a bit. Almost everywhere else, Verdana is used.

These still need attention:

  • Arial in Row Evolution
  • Transitions colors and fonts
  • Loading graphic on transparent background
@mattab
Piwik Open Source Analytics member

The goal for this ticket now is to:

  • refactor colors being used as LESS variables in one file
  • refactor fonts being used as LESS variables
@tzi
Piwik Open Source Analytics member

Most of the font-family override have been removed:
5228f7d

@mattab
Piwik Open Source Analytics member

Well done @iamtzi! :) Fixed

@mattab mattab added this to the 2.3.0 - Piwik 2.3.x milestone Jul 8, 2014
@sabl0r sabl0r pushed a commit to sabl0r/piwik that referenced this issue Sep 23, 2014
@mattab mattab Adding icons refs #4457 f415ca7
@sabl0r sabl0r pushed a commit to sabl0r/piwik that referenced this issue Sep 23, 2014
@BeezyT BeezyT refs #4457: deals with some issues mentioned in comment 6. the segmen…
…t editor is still not entirely perfect but much more consistent already.

The fixed items are:

 * In Row Evolution, "Pick a row to compare" uses the old brown.
 * The subtitle of the popover loading message uses the old brown too.
 * The "All Websites" Dashboard uses the old yellow as hover color for the table rows.
 * On the "All Websites" dashboard, the white background of sparklines is visible. That's why the old theme uses a white background for all rows.
 * When klicking the export icon beneath a table, a box appears that offers the available formats. This box has a brown background. Should be grey.
 * In the segment editor, when a segment is dragged from the left menu to the right, the background is brown during the transition.
 * The link "crowdfunded" in the footer of the segment editor is brown.
 * The segment editor still uses Arial quite a bit. Almost everywhere else, Verdana is used.

These still need attention:

 * Arial in Row Evolution
 * Transitions colors and fonts
 * Loading graphic on transparent background
a31b653
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment