PmWiki-responsive-Talk

Summary: Talk page for PmWiki-responsive skin.

Maintainer: Petko

Users: +6 (View / Edit)

This space is for User-contributed commentary and notes. Please include your name and a date along with your comment.

Tooltips

Hi Petko, I have some tooltips within large tables. The .js function about the scrollable div is very useful, but at that point the tooltips are affected and clipped by the div. Is there a way to display the scrollable div below and the tooltips above? Thank you. - Frank July 03, 2020, at 11:20 AM

Do you have a public page where I can look at this? --Petko July 04, 2020, at 12:23 PM

No, sorry, I'm still working on localhost. The only thing I can do is indicate which custom update I made to csstooltiptogo. I may even have messed up there. Frank July 04, 2020, at 06:29 PM

The configuration section says:

The page names can be configured, for example to disable Group skin elements, add to config.php such a line:

  $SkinElementsPages = array('{$SiteGroup}.SkinElements'); # only Site.SkinElements

I'm trying to set Site.PageElements but it's ignored. Looking at the skin php code I can't find where $SkinElementsPages is read. Is it implemented? Thank you. --SteP February 02, 2020, at 09:29 PM

Sorry, you cannot -- I see this snippet was copied from 2016 but it was actually implemented in a simpler manner. The reason is that the default skin(s) are often a starting point for adaptation by people who are starting to learn HTML/PHP and should not be overly complex. This was requested by Pm, and I agreed. I see that the Amber skin has kept the variable from 2016 so you can change it there -- move the contents into Site.SkinElements and set the variable for Amber. Or (:include:) may work. --Petko February 02, 2020, at 09:51 PM

OK, not a problem. Thank you, Petko. --SteP February 02, 2020, at 09:57 PM

PMWiki displays some content, then it has some movement. This is noticable when clicking the reload button in Firefox. I think the header is displayed, then it increases in height, and then it displays the rest. I think this is called "CSS Content Jumping". I would call it flickering. Can PMWiki be adjusted to eliminate this?

Only on a case-by-case basis, in a limited way. I can only experience something similar to what you describe when I disable in-browser caching and I severely limit the connection speed. In that case the page displays first but the logo picture takes a fraction of a second to load and indeed it may push down the bottom border of the header. All skins, including the default PmWiki skin, which has been around since PmWiki 2.0.0-beta1 for 15+ years, have this feature. Browsers first load the HTML content, almost at the same time the CSS styles and only then they load any embedded media, and not only with PmWiki but with all sites.

This can be somewhat improved when you know what are the dimensions of your logo picture, then you can define in pub/css/local.css the heights of the #wikihead element. Here is what works for me on this page with the current logo:

#wikihead {
  min-height: 34.5px;
}
@media screen and  (min-width:50em) {
  #wikihead {
    min-height: 51px;
  }
}

Note that the dimensions and styles of the search and submit fields in the header are user-system-dependent (Gnome != KDE != MacOSX != WinXP != Win10) and in my case (Firefox, LXDE/Gnome) is 34 pixels high, that is more than the 32px logo height, this is not the case for Epiphany (19px) or Chromium (18px). Also, on a mobile device a large logo may be shrunk to become both narrower and shorter, depending on the screen size of the device, so it is not very reliable to hardcode the header dimensions if you don't know all your users and their devices. --Petko May 14, 2019, at 06:53 AM

I am trying to put a nice light blue fade at the top of my pmwiki page using image

  http://gnuzoo.org/images/bluebg.gif

and some CSS like

  background-repeat: repeat-x;
  background-position: 0px 0px;
  background-attachment: fixed;
  background-image: url('http://gnuzoo.org/images/bluebg.gif');

I want to use this great responsive skin, but I don't seem to be able to make this work. Can you please help?

Please see ResponsiveSkinBackground. --Petko May 12, 2019, at 08:28 PM

I'm having a little trouble with a black-background logo. On my Android-based smartphone the logo sticks to the top of the screen. The browsers, I tried Chrome and Habit, seem to ignore padding and margins. bttr January 26, 2020, at 06:39 PM

On a small screen it is supposed to stick to the top of the screen. There are no margins and paddings on the <img> logo image element. On a larger screen there are margins and paddings on the #wikilogo <span> element that contains the link and the logo. If in pub/css/local.css you define margins or paddings for that element you may also need to add "display: inline-block;" to it. --Petko January 26, 2020, at 07:43 PM

I didn't notice the @media stuff in pub/skins/pmwiki-responsive/skin.css.
This in pub/css/local.css helped:

  @media screen and (max-width: 50em) {
    #wikilogo {
      display: inline-block;
      margin-top: 6px;
    }
  }

Thanks! bttr January 26, 2020, at 10:33 PM

Talk page for PmWiki-responsive skin (users).