Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

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

Closed
mattab opened this Issue · 9 comments

4 participants

@mattab
Owner

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
Collaborator

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

@mattab
Owner

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

@mattab
Owner

In f415ca7: Adding icons refs #4457

@mattab
Owner

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
Owner

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
Collaborator

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
Owner

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
Collaborator

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

@mattab
Owner

Well done @iamtzi! :) Fixed

@mattab mattab added this to the 2.3.0 - Piwik 2.3.x milestone
@sabl0r sabl0r referenced this issue from a commit in sabl0r/piwik
@mattab mattab Adding icons refs #4457 f415ca7
@sabl0r sabl0r referenced this issue from a commit in sabl0r/piwik
@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
Something went wrong with that request. Please try again.