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
Sidebar "Search" link should not be hardcoded. simkin June 18, 2014, at 04:37 AM
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)
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
adapt.css template file
- line 35 has a typo, should read
.content a:active { color:#9c0606; } /* ### typo, colon missed */
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.
Any and all selectors in pure-min.css can be overriden to change the look of your website.
Stylesheet typo corrected. Thanks again!
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.
<!--[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.
<span class='headnav'><a href='{$ScriptUrl}/{$Group}/RecentChanges'
accesskey='$[ak_recentchanges]'>$[Recent Changes]</a> (<a
href='{$ScriptUrl}/{$SiteGroup}/AllRecentChanges'>$[all]</a>)</span>
mfwolff June 21, 2016, at 10:28 AM
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 }
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.
Talk page for Adapt Skin (users).