Implementation of the new styling on OpenWrt websites

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

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.

2 Likes

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? :wink:

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.

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).

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.

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

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

2 Likes

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.

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

4 Likes

The new styling issues:

  1. Is it possible to enable :link: link buttons before headers similar to GitHub?

  2. 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.

  3. Poor compatibility with Chromium + Dark Reader: https://darkreader.org/

  4. The logo and favicon background should be transparent.
    The current solid color doesn't look good.

1 Like

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.

1 Like

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.

1 Like

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

3 Likes

Missing section link buttons is a known issue.

1 Like

@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.
image
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:
image

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

1 Like

Confirmed.

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

@thess Can you please take a look?

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.

2 Likes

Thanks. Now Firefox loads the right favicon.

The 32x32 icon is likely enough for most users.

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).

1 Like

@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.

I have already opened an issue for this:

Waiting for resolution.

2 Likes