Skin talk:Timeless

Previous discussion was archived at Skin talk:Timeless/Archive 1 on 28 April 2021.

This skin makes pages look great in Android/Chrome. However on Android/duckduckgo and iOS/Safari the page does not seem to render into one column as expected. You can see the difference at this page: https://makernexuswiki.com/wiki/MN_Member_Dashboard

how to remove the logo entirely ? thanks

No matter what I change in the Common.css it remains as:

• font-family (stack):"Linux Libertine", "Times New Roman", serif
• Font being rendered: Times New Roman100.0%
• font-size:30px

I am trying change the font to "Noto Sans Mono:Thin"

I have managed to change the body font - but the Headers seem impossible! Any advice appreciated!

Editing MediaWiki:Timeless.css instead of Common.css worked for headers. Have you tried that?

The sidebar links are separated into different toolbox groups, including "Page tools," "Userpage tools," and "More." (There is a "Browse properties" link in "Userpage tools" that is from Extension:Semantic MediaWiki).

I would like to combine all the links from these three groups into a single "Page tools" toolbox. How can I do that? Thanks!

I know I can edit site css to disable the background image, but I just want to do this from php settings. I try setting $wgTimelessBackdropImage to false or null or empty string, but then the whole site appearance becomes a mess, and in the css writes:

#mw-content-container {
  background: #eaecf0;
  border-bottom: solid 4px #00af89;
  /* Background image (default cat) */
  background-image: url("%20no-repeat;%0A%20%20background-position:%20center%2010em;%0A}%0A.tools-inline%20div,%0A.tools-inline%20%20div,%0A.tools-inline%20ul,%0A.tools-inline%20%20ul,%0A.tools-inline%20li,%0A.tools-inline%20%20li%20{%0A%20%20list-style:%20none;%0A%20%20display:%20inline-block;%0A%20%20margin:%200;%0A%20%20padding:%200;%0A}%0A.tools-inline%20li%20{%0A%20%20margin:%200.25em%200%201em;%0A%20%20border-bottom:%20solid%203px%20transparent;%0A}%0A.tools-inline%20li:hover%20{%0A%20%20border-bottom-color:%20#c8ccd1;");
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: left top;
  display: inline-block;
  margin-bottom: -0.35em;
  padding: 0 2px 0 20px;
}

Is this a bug? Or is there any other method to disable background image?

Hello, I do really like the Timeless skin! I'm using it for mor than a year and I want to share two little hack related to Visual Editor.

1) Zoom out the VE's Toolbar for smaller devices. Add the following lines to Timeless.css (unfortunately the zoom property works only with Chrome based browsers):

@media screen and (max-width: 850px) {
    .oo-ui-toolbar.oo-ui-toolbar-position-top.ve-ui-toolbar.ve-ui-dir-inline-ltr.ve-ui-dir-block-ltr.ve-ui-targetToolbar.ve-ui-positionedTargetToolbar.ve-init-mw-desktopArticleTarget-toolbar.ve-init-mw-desktopArticleTarget-toolbar-open.ve-init-mw-desktopArticleTarget-toolbar-opened {
        zoom: .82;
    }
    .oo-ui-toolbar-bar {
        left: 0 !important;
        right: 0 !important;
    }
}

2) Scroll few pixels down in order to show the edited heading when the inline edit tool is used, otherwise the heading is hidden behind .mw-header-container that, sometimes, leads to a confusion. Add the following lines to Timeless.js:

( function ( mw, $ ) {
    mw.hook( 've.activationComplete' ).add( function () {
        var veScrollHeading = setTimeout(function() {
            document.documentElement.scrollTop -= 120;
        }, 50);
    });

    mw.hook( 've.deactivationComplete' ).add( function () {
        var veScrollHeading = setTimeout(function() {
            document.documentElement.scrollTop -= 20;
        }, 50);
    });
} )( mediaWiki, jQuery );

i can't change the skin from this piece of garbage on my wiki, how do i do that?

First off, it's not acceptable to call this (or any other skin) a piece of garbage. If you want to change the default skin, see $wgDefaultSkin or if you want to change it just for yourself visit Special:Preferences on your wiki.

PHP syntax has some caveats.

I tried replacing the cat.svg with my own by adding $wgTimelessBackdropImage = '$wgResourceBasePath/path/to/my/logo.svg'; to my LocalSettings.php; but then nothing shows up. I've replaced the cat.svg in the skins/Timeless/resources/images folder for now, but there has to be a better way.

PHP only evaluates variable names in double-quoted strings. Thus, you need to write $wgTimelessBackdropImage = "$wgResourceBasePath/path/to/my/logo.svg"; instead.

It worked, thank you!

• Please complete its development as the current Minerva mobile skin is very much crippled. A mobile skin for editors is very much needed.
• This skin is very much suited for Wiktionaries. I found it very easy to contribute to WIktionary from this skin in mobile. @Isarra:
• Please make "Lite apps" (browser-UI based mobile apps) based on this skin for various Wikimedia projects.