Skin talk:Timeless

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

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

it is still active and I think volunteer-maintained, it's currently used on mediawiki.org so I presume long term support is likely Amousey (talk) 23:13, 20 July 2023 (UTC)

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?

Looking at the code in resources / screen-common.less and resources/themes/wikimedia.less, I think you need to set either .mw-body h1 or h1.firstHeading - css specifity rules means elements like h1 are ignored if more specific classes or ids are in use. Amousey (talk) 23:10, 20 July 2023 (UTC)

How to move the table of contents to a different area of the screen？

Use __TOC__?

What I want is suspended in the sidebar, but this skin is in front of the content, and I can't see the table of contents behind the content comparison.

Thank you anyway.

How to move the Category box from the left column to center column ?

I cant with only CSS.

Thx

You can, although the formatting won’t be perfect:

#catlinks-sidebar {
	display: none;
}
#catlinks {
	display: block !important;
}

Many thanks @Tacsipacsi it works exactly as I need.

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!

You can add css to your Mediawiki:Timeless page so that it is like in one box. I did the same on my wiki.

how to remove the logo entirely ? thanks

.mw-wiki-logo {dispaly:none !important;}

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

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.