Forum themes: "Ganz großes Kino theme" - changelog

Tigersharke

BOfH in User's clothing
Administrator
Moderator
Joined
May 18, 2016
Messages
186
Thanks
40
#1
Due to forum update from 1.x to XenForo 2.x:
Essentially starting over from scratch. It seems that the 'extra.css' file that the old version of XenForo used for modifications was either lost or overwritten. This newer version of XenForo uses extra.less as its modification file which is where all of my CSS modifications are going. The 'dark' version is accessible for use, although there are still some things that are either bright yellow-green or blue, the bulk of it is usable.

The plan, is to mostly or as much as possible, restore the former theme. It will be an uphill climb but at least due to those bright colors I can see where things need fixing.
 
Last edited:

Tigersharke

BOfH in User's clothing
Administrator
Moderator
Joined
May 18, 2016
Messages
186
Thanks
40
#2
Continuing to locate and adjust those items that are bright blue or bright green.

Some layout changes were made, eventually this theme will look more like our old setup.. that is the plan so far.

It appears that I have adjusted most of the worst bad color issues in the theme. If you notice any areas where the text is unreadable, especially where the text and background are the same color, please let me know and I will correct those soonest. I should have plenty of time to continue to improve this theme ('dark') since Winter is the slow period at work, but there are other things I've put off until I have free time as well.

I hope all those who wished for a dark theme are getting closer to satisfied.
 
Last edited:

Tigersharke

BOfH in User's clothing
Administrator
Moderator
Joined
May 18, 2016
Messages
186
Thanks
40
#3
Since the majority of the hideous out-of-place blue and green bits have been found and adjusted, I am presently cleaning up the file extra.less. Most of my changes are to modify the color, there are so far only a few (less than a dozen) other changes, so once I have the color adjustments separated out, I should be able to do some hue variants. I will continue to eradicate the odd colors and intend for consistency in general as well. Some things are "good enough" but not finalized to the appearance we had before. I would like to setup this dark theme in such a way that part of the areas have some transparency to allow a background color to show through which will make some variations exceptionally simple.

If anyone has a color preference or such, I can keep it in mind for variations on the theme.

Also intended, though it will necessarily take more effort, is to have a screen-reader and lynx-friendly formatted theme.
 

Tigersharke

BOfH in User's clothing
Administrator
Moderator
Joined
May 18, 2016
Messages
186
Thanks
40
#4
Okee..

Of course there are still some lingering blue & green, but I clarified the modification file extra.less so that the color changes are drawn in from a separate file. The parent has the line in its extra.less file to include the other file but its set of templates does not include it. The individual sibling themes will have their own unique extra_colors.css file. Doing this makes the whole setup considerably more modular and simple to modify. I also just realized that I had intended that some colors would remain the same across the variations, so the parent will have a specially included color file. If I keep colors separated from formatting, size, etc, then it will be easier to know where to change things. I will also likely do heavier modification overall, which means I will eventually modify the structure of the forum as presented by the theme. Some features I might include cannot be accomplished or accomplished easily by CSS alone. I might not be able to add php or other substantial scripting things, but possibly some inline stuff in the HTML templates.

I plan to squash those lingering blue & green before starting color variants.. however, what color variants do you want to see?
 

Tigersharke

BOfH in User's clothing
Administrator
Moderator
Joined
May 18, 2016
Messages
186
Thanks
40
#5
One of the things that is relatively new to CSS (since the last time I was doing a lot of editing) is the column layout and how it handles filling the columns. This can be noticed in various areas which are either designed this way for any formfactor adaptations or due to laziness much like how tables get overused. Regardless, it seems that at least within the ganz großes kino theme it has/had an odd effect where hover caused a bit of jumpiness. I believe I have finally corrected this side-effect for the overlay popup theme selector. The other areas, I will have to look at to see whether any CSS is re-used or if after already making the selectors specific for one area could be made more general.

So. Lately, for all ganz großes kino parent (ie, would affect any children)
  • Squashed jumpiness in theme selector overlay popup regarding hover/active being different font size,
  • forum tag search tag cloud font sizes adjusted,
  • tab hover no longer blue tinted,
  • adjusted the left & right border color of the admin ribbon to add a similar shine such as moderator ribbon has,
For ganz großes kino -dark
  • Removed more blue from the login form overlay popup,
  • I believe all checkboxes are no longer blue,
  • forum thread search calendar now not blue,
  • forum tag search tag cloud not blue,
  • the section below an edit with "Edit silently" now better colors,
 
Last edited:

Tigersharke

BOfH in User's clothing
Administrator
Moderator
Joined
May 18, 2016
Messages
186
Thanks
40
#6
I need to periodically clarify each CSS file to combine any duplicated selectors.

ganz großes kino -parent
  • Fixed an issue with content of code blocks overflowing their box by setting overflow to scroll.

ganz großes kino -testing

ganz großes kino -dark
  • Fixed the right-side footer "privacy policy" etc, color to be more visible against the dark background,
  • removed the blue highlight "when open" on the dropdown selector for whats new, resources, members.
  • fixed the color of the placeholder text for the 'status update' input box (and possibly other places),
  • fixed the account dropdown jumpiness,
  • enhanced the readability of thread titles (increased brightness) in the home page sidebars,
 
Last edited:

Tigersharke

BOfH in User's clothing
Administrator
Moderator
Joined
May 18, 2016
Messages
186
Thanks
40
#7
I am aware of quite a few areas available to moderators and/or admins which still have blue. I also see that this editor still has blue and green. Overall I am pleased with how things are looking. Eventually I plan to review the colors and possibly sizing/spacing, font sizes, to make things more consistent. Same style for buttons of certain type, etc. I do have a very very preliminary 'red' variation of this theme which I'll improve and finalize over time. Also, it was mentioned that the new Xenforo default layout is somewhat different from the old. I noticed that the moderation dropdown/selector is only at the top but with some modification it could surely be duplicate at the footer.

ganz großes kino -parent
  • adjusted the admin button,
ganz großes kino -testing
ganz großes kino -dark
 
Last edited:

Tigersharke

BOfH in User's clothing
Administrator
Moderator
Joined
May 18, 2016
Messages
186
Thanks
40
#8
Some may have noticed some oddness while I was doing a "live" edit of the parent. This was unintended of course, but due to a peculiarity in the CSS, I struggled to comprehend why things were not acting as i had expected, so it took a little longer than I hoped to solve and things were slightly wonky during that time. I believe everything was still functional and accessible, it was cosmetic oddness.

I noticed that a smaller FreeNAS logo is used for small formfactors. IMHO, when scrolling down, the "Home Forums .. Members" menubar stays visible and the FreeNAS logo disappears but instead a small version ought to appear on that remaining menubar. Also, the "New posts ..." menu links vanish, but wouldn't they still be useful? The same for the breadcrumbs. Keeping these things visible and causing a small logo to appear may take a bit more work, probably require structural templates to be modified. Something to work on eventually.

ganz großes kino -parent
  • reworked some container/inner div sizing, except for one pair, is now consistent. The width of each container div is 100%, but the inner div is 95% with a left and right margin of auto which causes centering.
  • some colors that will stay the same for all theme variants are set, plenty more to include,
ganz großes kino -testing
  • working on transparency of various items which would allow a color (such as red) to show through.
ganz großes kino -dark
  • moved some items to parent, made certain no lingering non-color settings remained in its extra_colors.css file,
 
Last edited:

Tigersharke

BOfH in User's clothing
Administrator
Moderator
Joined
May 18, 2016
Messages
186
Thanks
40
#9
ganz großes kino -parent
  • The green 'solved' tag has been enhanced,
  • adjusted some spacing and sizes of columns on home/forums page, (now the whole title of the most recent non-pinned thread is usually visible)
ganz großes kino -dark
  • Fixed up the text/background colors, border/shadow colors for spoiler content,
  • adjusted the colors and shadow of the tags in the 'edit tags' overlay,
 
Last edited:

Tigersharke

BOfH in User's clothing
Administrator
Moderator
Joined
May 18, 2016
Messages
186
Thanks
40
#10
ganz großes kino -parent
  • Hid the 'Home' button as it was needlessly redundant, and unnecessary,
ganz großes kino -dark
  • Spruced up the indicator flag -- shows number for inbox or alerts,
  • banished blue (Account details, Your content pages),
  • banished more blue (find threads, watched dropdown parent highlight),
  • spruced up the main body edge,
 
Last edited:

Tigersharke

BOfH in User's clothing
Administrator
Moderator
Joined
May 18, 2016
Messages
186
Thanks
40
#11
ganz großes kino -parent
  • Longest remaining issues: blue/green in editor:
    1. select text highlight color,
    2. toolbar freshened somewhat (not finalized but better),
    3. blue removed from toolbar and tool dropdowns.
ganz großes kino -testing
  • continue to finesse the colors and effects above.
ganz großes kino -dark
  • Had something "conflicting" with the new toolbar stuff above, trouble fixed but reverted some anti-blue.
 
Last edited:

Tigersharke

BOfH in User's clothing
Administrator
Moderator
Joined
May 18, 2016
Messages
186
Thanks
40
#12
ganz großes kino -parent
  • adjusted some size values for 'code' and 'icode' bbtags.

ganz großes kino -testing
ganz großes kino -dark
  • Changed the colors for the 'code' and 'icode' bbtags.
Screenshot_2019-01-01 Forum code tag question(1).png
  • fixed colors in the file attach part of message edit,

I have also recently added tota11y accessibility toolkit to my firefox so I can check contrast and other issues for site usability. I Noticed it suggested some contrast/color changes which I may make relatively soon.
 
Last edited:

Tigersharke

BOfH in User's clothing
Administrator
Moderator
Joined
May 18, 2016
Messages
186
Thanks
40
#14
ganz großes kino -dark
  • Reversed the un/read thread style: now bolder helps unread items stand out while read items blend into the background a bit.
  • Improved the forum sub-forum menu and link text: the popup now has a slightly darker border (had none), the text, "sub-forum" is sharper.
  • Added highlight to NEW threads awaiting moderation: background is brighter more noticeable.
 
Last edited:

Tigersharke

BOfH in User's clothing
Administrator
Moderator
Joined
May 18, 2016
Messages
186
Thanks
40
#15
ganz großes kino -dark
  • Added borders and shadows to many/most avatar images.
  • Resources uses 'avatar' CSS selectors for its image icons, chose to permit same style.
  • Link below resource carousel now black instead of blue, and increased the font weight.
 

Tigersharke

BOfH in User's clothing
Administrator
Moderator
Joined
May 18, 2016
Messages
186
Thanks
40
#16
Quite a bit of clean-up and adjustments for consistency. Some fixes for contrast issues.
  • The color/style of most buttons now match.
  • The read/unread forums and read/unread threads both display the same type of distinction, bolder and darker for unread, most text of the whole row is either lighter or darker, except for the author names.
  • Alternating rows for threads or series of comments are nearly all alternating lighter/darker greys which includes nested items such as comments.
    • Unexpected fallout the individual posts in a thread now alternate as well. Some contrast issues may have reappeared.
  • Improved the appearance of the stars for star ratings.
  • Some of the "arrow" triangle wedges similar to the one for this post which appears to the left of the rule under the date have a nice left border and matching internal color with the body to its right.
    • Due to the alternating rows adjustments some are now not matching as they once had.
  • When scrolling down, eventually the top header of links sticks (remains present at the top). Due to this, the rounded corners and shadow effect caused an unpleasant appearance. Fixed. Now the rounded corners vanish and the shadow is simply a darker bottom border.
 

Tigersharke

BOfH in User's clothing
Administrator
Moderator
Joined
May 18, 2016
Messages
186
Thanks
40
#17
Improved the appearance, readability of some sidebar widgets: Latest posts, Latest resources, Top resources, Latest reviews.
  • Sidebar widget titles, Resource author/reviewer bolded,
  • Date background a slightly darker shade,
  • Author and date/time now on their own line, bullet vanished.
  • Thread or resource title brightened with better shadow.
 

Tigersharke

BOfH in User's clothing
Administrator
Moderator
Joined
May 18, 2016
Messages
186
Thanks
40
#18
HMM.. Unexpected read/unread change, lost the font-weight for unread.
 
Top