Skip to main content
Topic: Theme change? (Read 2654 times) previous topic - next topic
davideleo and 1 Guest are viewing this topic.

Re: Theme change?

Reply #25
Now my eyes hurt.

Re: Theme change?

Reply #26
This kind of theme audit might be handy:


C.
PC = TAK + LossyWAV  ::  Portable = Opus (130)


Re: Theme change?

Reply #28
I updated the forum. Thanks to the no-support design of this lovely FOSS forum, I have to redo the theme from scratch every time they decide to rearrange the theme format.
Glad to hear that design change was not intentional! Hopefully it won't take to long to transform it back =)

Re: Theme change?

Reply #29
I made a quick greasemonkey hack to restore the logo as a working button and change some colors to more familiar look.
Code: [Select]
// ==UserScript==
// @name          Hydrogenaudio
// @description   Slightly improve the looks and usability of current HA
// @version       1.0
// @namespace     https://hydrogenaud.io
// @include       https://hydrogenaud.io/*
// @run-at        document-start
// @grant         none
// @noframes
// ==/UserScript==

(function(){
  var css = `
    #forumtitle a, #forumtitle a:link, #forumtitle a:hover {
      padding: 0 !important;
      margin: 0 !important;
      border: 0 !important;
    }
    body {
      color: #000 !important;
    }
    #top_section {
      border: #555 !important;
      border-top: 1px solid !important;
      border-bottom: 1px solid !important;
      border-radius: 0 !important;
      background: #fafafa !important;
      box-shadow: none !important;
    }
    #footer_section {
      border-top: 1px solid #555 !important;
      box-shadow: none !important;
    }
    #footer_section a, #footer_section a:link, #footer_section a:hover, #footer_section a:visited {
      color: #bbb !important;
    }
    #wrapper {
      border: 1px solid #555 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
    }
    .wrapper {
      max-width: 90% !important;
    }
    a, a:link, a:link, a:visited, a.new_win:link, a.new_win:visited {
      color: #000 !important;
    }
    .listlevel1 { margin: 0 !important; padding: 0 !important; }
    #menu_nav .linklevel1, #menu_nav .linklevel1:link, #menu_nav .linklevel1:visited, #menu_current_area > strong > .linklevel1 {
      color: #000 !important;
      border-color: #555 !important;
      background: #f4f4f4 !important;
    }
    #menu_nav .linklevel1:hover, .listlevel1:hover .linklevel1, .linklevel2:hover, .listlevel2:hover .linklevel2, .linklevel3:hover, .listlevel3:hover .linklevel3, #menu_sidebar .linklevel1:hover, #menu_sidebar .listlevel1:hover .linklevel1 {
      color: #000 !important;
      border-color: #555 !important;
      background: #fafafa !important;
    }
    #menu_nav .linklevel1.active, .buttonlist .linklevel1.active, #collapse_button .linklevel1, .pm_indicator, .likes_indicator {
      color: #fff !important;
      border-color: #555 !important;
      background: #5176b5 !important;
    }
    #menu_nav .linklevel1.active:hover, .buttonlist .linklevel1.active:hover, .listlevel1:hover .linklevel1.active, #collapse_button .linklevel1:hover, .linklevel1:hover .pm_indicator, .listlevel1:hover .active {
      color: #fff !important;
      border-color: #555 !important;
      background: #6186c5 !important;
    }
    .linktree:last-child, .linktree:last-child::after, .linktree:last-child a, .linktree:last-child a:link, .linktree:last-child a:visited {
      color: #fff !important;
      background: #5176b5 !important;
    }
    .linktree:hover, .linktree:hover::after, .linktree:last-child:hover, .linktree-last-child:hover::after, .linktree:last-child a:hover {
      color: #fff !important;
      background: #6186c5 !important;
    }
    .category_header, .content_category .category_header {
      color: #fff !important;
      background: #5176b5 !important;
      text-shadow: none !important;
    }
    .category_header a:link, .category_header a:visited, .category_header a:hover {
      color: #fff !important;
    }
    ::selection {
      color: #fff !important;
      background: #5176b5 !important;
    }
  `;

  function addStyle(css) {
    let node=document.createElement("style");
    node.type="text/css";
    node.setAttribute("id", "custom_style");
    node.appendChild(document.createTextNode(css));
    let heads=document.getElementsByTagName("head");
    if (heads.length > 0) {
      heads[0].appendChild(node);
    } else {
      document.documentElement.appendChild(node);
    }
  }

  addStyle(css);

  function main() {
    let logo=document.getElementById("logobox");
    if (logo) {
      let link=document.createElement("a");
      link.href="/";
      link.innerHTML=logo.outerHTML;
      logo.parentNode.replaceChild(link, logo);
    }
  }

  function checkreadiness() {
    let ready=false;
    if (document.readyState === "interactive" || document.readyState === "complete") {
      ready=true;
    } else {
      let logo=document.getElementById("logobox");
      if (logo) ready=true;
    }
    if (ready) {
      main();
    } else {
      window.setTimeout(checkreadiness, 10);
    }
  }

  window.setTimeout(checkreadiness, 1);
})();

Re: Theme change?

Reply #30
I'll see if I have time this weekend to check it out and play. Maybe I can use my Friday afternoon learning time at work to do it ;)

Re: Theme change?

Reply #31
I updated the forum.
Yea, thanks for all your time and effort.

I'm also looking forward to when HA looks dark again. ;-)
Quis custodiet ipsos custodes?  ;~)

Re: Theme change?

Reply #32
I updated the forum. Thanks to the no-support design of this lovely FOSS forum, I have to redo the theme from scratch every time they decide to rearrange the theme format. This also means that the old "dark" theme, Silence, is completely broken, even though I updated it to the latest version before giving up and removing it.

I'll have to redo the colors, and bug the developers about why they hard coded a fixed width into the forum theme even though I have it configured to 100% in the settings.

Do you know which elements changed/were affected by the update? Wondering how usable would be to retain the original stylesheets and just adjust for the changed elements from the update.

Re: Theme change?

Reply #33
only bad thing for me is the fixed widht. The monitors get bigger and the result is wasted space to the left and right ?

Re: Theme change?

Reply #34
Well, the problem with long lines in multiline text is that it substantially lowers readability once over the recommended threshold (60 - 75 chars). Although forums are a bit specific, since the posts are usually very short, it's still not a good idea to have the lines overly long.

Re: Theme change?

Reply #35
Nice to have the blue back, thanks.

Re: Theme change?

Reply #36
Highlighting text is dark-on-dark, can't see anything. Otherwise, the colors don't really bother me, besides the HA blue branding issue.

But since you're redesigning things, would it be possible to have back the multiple pages of "recent topics" that was on the front page of the old-old theme? If I don't log in for a few days, I have to go hunt into each individual forum for recent posts that I might have missed, where before one could just click on subsequent pages of recent topics right from the front page.

Re: Theme change?

Reply #37
The forum still has recent posts on the main page, and on the foobar2000 subforum. I guess they removed pagination from the portal?

You could do like I do and hit up the New Posts button every few days, but that may include forums you don't care about.

Re: Theme change?

Reply #38
Blue is better. Bit more contrast for texts would be good.

Re: Theme change?

Reply #39
Yay! Blue is back! Thanks @kode54‍  and others for all the effort you've been putting in.

I wish my web designing skills weren't still at Khan Academy level, so I could chip in somehow.
Listen to the music, not the media.

Re: Theme change?

Reply #40
It ain't easy being green.

Re: Theme change?

Reply #41
@zeremy @kode54 :
Great job restoring the colors!

Remaining bugs that I've encountered:
- Missing forum icon (both in desktop and mobile view): https://imgur.com/8ksqbls
- White border around avatar in mobile view (the easiest workaround is to center image, to make the border less prominent): https://imgur.com/HX9btpx

Missing features from the old skin: recent posts panel in mobile view.

Also text color on quick reply buttons and post edit buttons should be probably black for consistency with other buttons.


Re: Theme change?

Reply #43
They're borked on desktop view, too. I think @zeremy missed that FontAwesome is not imported by the forum, but rather, that the existing icons are inlined SVG symbols.

Re: Theme change?

Reply #44
@kode54

The "button_forum" seems to attempt to load an extra icon .

Code: [Select]
<li id="button_forum" class="listlevel1">
<a class="linklevel1" href="https://hydrogenaud.io/index.php?action=forum"><i class="icon icon-menu icon-lg " title="Forum"></i> <span class="button_title" aria-hidden="true">Forum</span></a>
</li>

I'll try to fix the icons using this reference.
https://www.elkarte.net/community/index.php?topic=2497.msg27780#msg27780

Re: Theme change?

Reply #45
Also the "Wiki" and "foobar2000 Forums" icons are not visible, in either desktop or mobile mode.

PR up  ;)

Re: Theme change?

Reply #46
I'm trying the  "lite" theme right now, and the buttons at the top are also broken in the "mobile" version (narrow aspect).

In general it seems things stopped being visible, etc. The scroll-arrows on the left are now just outlines of the clickable areas, and pretty much all buttons seems to be kinda miss-aligned or something. In the mobile version, the button for the Wiki is not present at all, while the icon for the Forum is just an empty box, but at least it's clickable.

 

Re: Theme change?

Reply #47
favicon is back! Site looks good. Thanks.

 
SimplePortal 1.0.0 RC1 © 2008-2018