Implementation of the new styling on OpenWrt websites

tmomas · December 9, 2020, 7:46pm

Continuing the discussion from Please fix kerning in new logo:

In order to get things going, I suggest to implement the new styling during the next 7 days.

From the notes of the meeting on 19.08.2020

New OpenWrt logo implementation

in the wiki -> tmomas

downloads.openwrt.org -> currently no logo, but good idea to implement it; jow has access

forum.openwrt.org -> thess

github.com/openwrt -> already implemented

bugs.openwrt.org -> ask jow, thess

Questions

Which colour combination for the wiki navbar?

take white and blue (dark blue background)

Which favicon colour combination for all sites?

take the coloured one with white background

When to do a coordinated switch for all sites?

ask people with access when they could do it
we should do a coordinated change on all sites, within a limited timeframe (1 week); avoid changing the last site to the new logo in 2021...

Who updates which site? -> see above

@jow @thess can you please take care of [downloads|forum|bugs].openwrt.org?
If yes, when could you implement the new styling?

For the wiki, I could do it over the weekend.

thess · December 9, 2020, 8:07pm

OK with me. Does anyone have a library of images -- vector (SVG) preferred?

So, does this mean I have to replace the 'Flit' image I planted on our FlySpray installation?

tmomas · December 9, 2020, 8:16pm

The process of creating SVG/PNG from the Styleguide is described in the wiki.

Since I need to create favicon and logo png anyways, I could create the formats / sizes needed for the other sites, too. Please let me know what you need.

thess · December 9, 2020, 8:44pm

Yes, I do know how to pick apart a PDF document. I thought that at the least, the document author would have provided a library of SVG images. With those, one can easily handle the sizing and formatting appropriate to usage. (and/or coloring).

tmomas · December 9, 2020, 9:03pm

That was my expectation too, and I was suprised that the source of the logo is a pdf.
Well, as long as there are tools and ways available to convert from here to there, I don't mind.

hnyman · December 9, 2020, 9:13pm

There is now a PNG and SVG logo in the main source repo ( in include/ dir)

github.com

openwrt/openwrt/blob/master/include/logo.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   id="svg5076"
   version="1.1"
   viewBox="0 0 1020 283.64442"
   height="283.64441mm"
   width="1020mm">
  <defs
     id="defs5070">
    <clipPath
       id="clipPath4288"
       clipPathUnits="userSpaceOnUse">
      <path
         id="path4286"
         d="M 0,0 H 792 V 612 H 0 Z" />

This file has been truncated. show original

And there has been a SVG logo in the LuCI repo since jow created the new 2020 theme in March.

github.com

openwrt/luci/blob/master/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/logo.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81 98">
  <path d="m 40.5,50.8 a 6.6,6.6 0 1 0 0,13.2 6.6,6.6 0 0 0 0,-13.2 m -40.5,-33.9 7,6.8 a 47.5,47.5 0 0 1 67.2,0 l 7,-6.8 a 57.2,57.2 0 0 0 -81.2,0" style="fill:#fff" />
  <path d="m 12.5,29.2 6.8,7 a 30,30 0 0 1 42.6,0 l 6.8,-7 a 39.7,39.7 0 0 0 -56.3,0" style="fill:#fff" />
  <path d="m 24.8,41.6 6.8,6.9 a 12.6,12.6 0 0 1 18,0 l 6.8,-6.9 a 22.3,22.3 0 0 0 -31.6,0" style="fill:#fff" />
  <path d="m 64.9,39.7 a 30.2,30.2 0 1 1 -48.7,0 l -6.9,-7 a 39.9,39.9 0 1 0 62.5,0 z" style="fill:#072342" />
</svg>

Hegabo · December 11, 2020, 10:57am

Those are probably before fixing the kirin?

Anyway, I am happy to extract logos from PDF, pick colours as, post the guide etc. Just give me a shout.

tmomas · December 13, 2020, 4:05pm

FYI - New styling has been implemented now in the wiki.
favicon + logo are available at https://openwrt.org/start?do=media&ns=

vgaetera · December 13, 2020, 4:44pm

The new styling issues:

Is it possible to enable link buttons before headers similar to GitHub?
Too large font size and vertical indentations for title and headings.
If possible, please make the font size and vertical indentations smaller.
It looks disproportionally large compared to the regular text.
Especially the empty space above titles looks wasteful.
Poor compatibility with Chromium + Dark Reader: https://darkreader.org/
The logo and favicon background should be transparent.
The current solid color doesn't look good.

tmomas · December 13, 2020, 5:04pm

Good point. I was of the opinion that section link buttons would come out of the box with the new template (I have seen them before), but now they are not there. I'll investigate.

Borromini · December 14, 2020, 9:28am

I don't know if this is meant to be a pooling thread to report issues with the new layout (thanks for that btw). If not, please split it off.

The old tabbed layout is broken with the new theme. It looks like this now:

The Hardware highlights / OpenWrt support / Hardware details / Firmware downloads used to be tabbed next to one another. The code element concerned is tabbox.

dimoni · December 14, 2020, 6:36pm

Please can you put the original dark blue color of openwrt back, both in the hardware table, in the device pages, main page etc, etc.
That so white burns my eyes. Thank you
ps: I think now if I have put it in the right place. Without this I think openwrt loses its identity

tmomas · December 23, 2020, 12:52am

Missing section link buttons is a known issue.

hnyman · January 10, 2021, 8:41am

@tmomas
I noticed the strange issue: my Firefox does not update favicon in my normal user profile, but shows the old favicon. However, the favicon is shown ok if I use a "private browsing" window. That is likely some kind of cache issue (although I haven't yet figured it out despite several attempts).

While investigating the issue, I noticed that as Firefox fails to load the 32x32 favicon for me, it loads instead the 16x16 icon, and there the site seems to still have the old icon.

sourcing from:
https://forum.openwrt.org/uploads/default/original/2X/a/a220d6bf2a1d1375fb1165d0be8153b3e33d3701.png

You might ensure that also the 16x16 being offered is the current one.

The 32x32 favicon download fails strangely, likely due to cache issue "NS_BINDING_ABORTED". But like said, that might be just a bug in Firefox, as it works in private browsing (so the site itself might be ok)

This is from a "private browsing" window in Firefox:

Ps. the 32x32 icon in private browsing looks naturally more crisp than the old 16x16 in the window for the normal user profile.

tmomas · January 10, 2021, 8:45am

Confirmed.

FF loads still the old favicon
Chrome directly loads the correct favicon

@thess Can you please take a look?

thess · January 10, 2021, 4:13pm

There was a pointer to the old icon in the "Condensed" themes. I removed it so the default icon will be referenced. Let me know if you really need a 16x16 icon.

hnyman · January 10, 2021, 4:20pm

Thanks. Now Firefox loads the right favicon.

The 32x32 icon is likely enough for most users.

tmomas · January 17, 2021, 5:53pm

Fixed today by updating to the develop branch of the boostrap3 template.
With that update, also the display of tags at the bottom of devicepages is corrected (they extended beyond pagelimits).

Borromini · January 17, 2021, 6:24pm

@tmomas The tabbed layout is still broken, can someone look into it? The stuff in the red rectangle used to be tabbed.

The links can still be clicked and the content immediately below will still switch, so the links themselves still work.

tmomas · January 17, 2021, 6:25pm

I have already opened an issue for this:

Waiting for resolution.