[pmwiki-users] Fixed horizontal menu in the 2016 skin

Petko Yotov 5ko at 5ko.fr
Fri Aug 5 23:43:20 CDT 2016


On 2016-08-05 22:16, kirpi at kirpi.it wrote:
> 2016 skin is still at its alpha stage, a baby of just a few weeks :-)
> and surely many changes will take place in the next few months.
> Thus, I guess that the best thing I can do is to limit myself to add
> to it, without touching the skin files, sort of how the recipes add to
> the wiki without editing the core.

As you noted, the 2016 skin has alpha status and will be changed many 
times. If you base your work on it now, you shouldn't expect your 
changes to work with future versions of the skin. You can use it, but in 
that case, keep your own copies of the skin files.


> I do not want to place my hands (if possible) on
> skin.tmpl, skin.css and skin.php.
> Instead I just want to try and edit pub/css/local.css as a starting 
> point.
> I'm not sure that I know how to do it, though ;-)

It is much easier to make your own skin in HTML, with the changes for 
the sidebar you require, than to try a similar thing in CSS with a HTML 
template that was not designed this way. Even if you had extensive CSS 
experience.


> A horizontal menu (as opposed to a left sidebar) which is placed to
> the top and does (or does not) scroll away when a user scrolls down
> the page is a good starting point, and one which could be useful.
> How shall it behave with the header is a good question, about which I
> personally have no clear answer right now.
> Perhaps I can imagine both the menu and the header overlap and
> visually coexist, so that a logo is on the left (header) and a menu
> follows.

With the 2016 skin, you could probably place the top menu - list of 
links - inside the skin header below the logo and the search form, and 
simply disable the sidebar from config.php:

   SetTmplDisplay('PageLeftFmt',0);

See the section about the header and the footer in the documentation.

Then this CSS code may help you get started:

   /* fixed header */
   #wikihead {
     position: fixed;
     top: 0px; left: 0px;
     width: 100%;
     z-index: 2;
     background-color: #eee;
   }

   /* push down the rest of the page, if your header is 75px tall */
   #wikihead + #wikimid {
     margin-top: 75px;
   }

   /* hack for link anchors, TOC:
      the "fixed header" fad is a heartless bitch */
   #wikihead + #wikimid :target {
     padding-top: 75px; margin-top: -75px;
   }

You are on your own from here. If you don't understand some of the CSS 
rules, google them. Then adapt them for your needs.

Try the skin with different window sizes and zoom levels.

Also, test the skin with the (:noheader:) directive to see if it works 
as you would expect. Your wiki may not require it to work with 
(:noheader:), that's fine, just note that fixed headers add complexity 
(besides wasting precious screen real estate) and you will have to deal 
with the issues.

Again, if you base your work on the 2016 skin, it is recommended to get 
your own copy and use that copy, as the original will change.

Petko




More information about the pmwiki-users mailing list