Adapt-Talk

Summary: Talk page for Adapt Skin.
Maintainer: Hagan Fox
Users: +6 (View / Edit)

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

In April 2019 Chrome is giving an error when inspecting the page of

content.min.js:2 [Deprecation] Element.createShadowRoot is deprecated and will be removed in M73, around March 2019. Please use Element.attachShadow instead. See https://www.chromestatus.com/features/4507242028072960 for more details.
simon April 22, 2019, at 12:38 AM

Sidebar "Search" link should not be hardcoded. simkin June 18, 2014, at 04:37 AM

Indeed, in adapt.tmpl use <a href='{$ScriptUrl}/$[{$SiteGroup}/Search]'>$[Search]</a> in place of the hard coded URL simon January 29, 2016, at 08:23 PM

Thank you, Simon. Finally fixed.

Here is a link to a diff which fixes the headings/anchors issue in the sidebar. It appears the H1 anchors were not formatted in a unified fashion, and any anchors had basic styling: Diff ~~coreyr Jan 5 2015

Thanks. I made some improvements to the menu.

Do you mind if I create a fork of this skin on Github and add some new styles (just as coreyr above)? I can't find anything about a license for this skin. vindia? Jan 8 2015

Yes, absolutely.

Your hamburger menu for mobile device is awesome. But when I tried your demo on my tablet, the main page menu is "Hamburgured", but when you click on a menu item, you end up on a page where the menu is placed to the right instead with smaller font which now makes them unusable for mobile. Is there a way to configure or hack the source to make sure that only the hamburger menu is used anywhere on the site. Eric P626 ( May 20th, 2015 ). UPDATE: It's my error, it was only your website that behaved like that, I tried it and it worked fine.

In adapt.css you can adjust the minimum width to a larger value. Currently it's Line 198 and the default is 48em.

The version on my website probably wasn't current at the time you looked at it. It should be better (more similar to the distributed version) now.

When using this skin it doesn't work with column width for table directives. bgoralczyk? August 4th, 2015

It seems to work on my wiki and pmiki.org.

See it working here: AdaptSkinTable?skin=adapt

If not, leave a note.

Just a few notes from attempting to customize this skin (a work in progress)

In the adapt.tmpl template file
  • see note about hardcoded search and fix above
  • the line <!--wiki:{$Group}.AdaptSideBar {$SiteGroup}.AdaptSideBar--> can be removed
  • its not clear why <link rel="stylesheet" href="$SkinDirUrl/pure-min.css"> is used, it customises the colours etc of text, background, borders, etc, take it out if you want to change the look of your website
In the adapt.css template file
  • line 35 has a typo, should read .content a:active { color:#9c0606; } /* ### typo, colon missed */
simon January 29, 2016, at 08:52 PM

The hard-coded reference is fixed. Thanks for the heads-up.

The line with Site.AdaptSidebar/GroupName.AdaptSidebar should not be removed. That line allows you to add pages (sitewide and/or group-specific) with sidebar items that will appear only when this skin is active. If you have no such page, it's ignored. The behaviour is similar similar to a page named GroupName.Sidebar which, once created, can hold sidebar-menu items for a group named GroupName.

You could, for example, add a "switch to desktop view" link that only appear in the sidebar when the Adapt skin is active.

The pure-min.css stylesheet is the core of the skin's responsive layout. It's from the Pure.css project. Pure.css is a "Lightweight Responsive Framework" that attempts to normalize your site's appearance on a wide variety of browsers and devices.

"Pure builds on Normalize.css and provides layout and styling for native HTML elements, plus the most common UI components. It's what you need, without the cruft. "

Any and all selectors in pure-min.css can be overriden to change the look of your website.

Stylesheet typo corrected. Thanks again!

-Hagan


Some hints to some errors in adapt.tmpl version 2016-06-15

Line 4 is obsolete as PmWiki inserts a
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
later on at the <!--HTMLHeader--> position. The two excludes one another.

Fixed.

There is a second </title>-Tag in line 6 of the adapt.tmpl file.

Fixed.

In line 11 a nested comment is marked as forbidden by w3c-validator. Perhaps you want to change the lines 11 to 13 into:
 <!--[if gt IE 8]-->
    <link rel="stylesheet" href="$SkinDirUrl/adapt.css">
 <!--[endif]-->

It validates for as-is when I try it. Example:

 https://validator.w3.org/nu/?doc=http%3A%2F%2Fhaganfox.net

Hmm... I wonder why we're seeing different results.

I'm reluctant to change something with that much potential for breaking the template in some unpredictable manner. Needs more investigation. FWIW, I got that part of the code from the Pure CSS example template, which I assumed would be properly coded. It looks strange, but I left it based on that assumption.

lines 35 to 37: The href attributes should not contain the $[..]-markups, otherwise you get strange links in other languages than English, so it becomes:
    <span class='headnav'><a href='{$ScriptUrl}/{$Group}/RecentChanges'
        accesskey='$[ak_recentchanges]'>$[Recent Changes]</a> (<a
        href='{$ScriptUrl}/{$SiteGroup}/AllRecentChanges'>$[all]</a>)</span>

Fixed.

Thanks mfwolff for you valuable feedback.

-Hagan

mfwolff June 21, 2016, at 10:28 AM

Edit: You are right concerning the lines 11 to 13 with the (strange) comment-Markups. May be I had some changes in the code that I forgot - I'm sorry for that. I've found some interesting explanation on html5boilerplate. It prevents IE6/7/8 from loading the CSS file (additionally) while all others do.

mfwolff July 12, 2016, at 03:29 AM


JM? August 22, 2016, at 3:13 PM

How do I enable the theme with a black color side-bar? Should I just edit the CSS directly?

You should probably edit the file pub/css/local.css to place your styles and override the skin styles. This way, if some day you update the skin to a newer version, your changes will be still there, you will not need to edit the skin css again. See PmWiki.LocalCustomizations. --Petko August 22, 2016, at 03:15 PM

Version 2016-08-31 reverts to a dark sidebar.

... or try these in local.css:

 #menu { background:#202020;  border-right:1px solid #333; }
 #menu a { color:#e0e0e0; border:none; padding:0.4em 0 0.4em 0.6em;
 #menu .pure-menu li { background:#202020; }
 #menu .pure-menu li a:hover, #menu .pure-menu li a:focus { background:#202020; }
 #menu .pure-menu-selected, #menu .pure-menu-heading { background:#222222; }
 #menu .pure-menu-selected a { color:#999; }
 #menu .sidehead { font-weight:600; color:#ccc; border:none;
   padding:0.3em 0 0.2em 0.6em; background:#181818;
   border-bottom:1px #333 solid; border-top:1px #333 solid; }
 #menu .sidehead a { font-size:100%; color:#ccc; padding:0; }
 #menu .sidehead a:hover { color:#ccc }

-Hagan


How could I move the SideBar below the banner for only desktop version. I guess it will also require some JS to convert it to dropdown menu. I also plan to move the PageActions with ActionMenu to a proper place (eg below the searchbox).

That's how I originally wanted it to be (banner all the way across the top), however it proved difficult to accomplish because of the way the Pure CSS Side Menu template works. The viewport is divided horizontally and the whole page area moves left or right depending upon the viewport width (media queries). Somehow you'd need to the divide it vertically first, then only move the part below the banner in and out.

Currently the banner area expands vertically to a larger size if the graphic/text logo varies in height. That "flexing" of the page may not be possible if the banner is always 100% of the viewport width.

-Hagan

Talk page for Adapt Skin (users).

Page last modified on April 22, 2019, at 12:40 AM
Powered by PmWiki