Gigantic, image-based headers are an up-to-date web-feature. It looks amazing but they are squandering space, especially on sites with large tutorials containing long text.

This site is using a simply method which transforms the header-size depending on the current page-scroll: the users scrolls down and the header is automatically transformed to a smart toolbar – i’m calling this mode (following WordPress’ fullscreen editor) “Zen” reader mode. Need a demo ? Just open an article on this site and scroll down.

To integrate this feature into you website, you need the followindd things:

• “Standard” Header Design
• “Smart/Compact” Header Design
• Javascript Page-Scroll Observer
• Optional: Amazing css3 transition

Different Header-Styles (using LESS):#

/* Basic (default) Styling */
.navbar-beyond{
  height: 70px;
  .transition(500ms);
}

/* Smart Styling */
.navbar-beyond-light{		
  height: 45px;
  border-bottom: solid 1px #e7e7e7;	
  background-color: @color_bluegrey1 !important;
}

/* Large Navbar */
.navbar-beyond-dark{
  background-color: rgba(0,0,0,0.85);
  border-bottom: none;
}

Scroll-Observer Script (MooTools) :#

Description: user scrolls 200px down and the header is transformed by changing the css classes

var head = document.getElement('header .navbar-beyond');
... 
window.addEvent('scroll', function(){
  // get current scroll
  var s = this.getScroll().y;
        
  // dark/light topnav
  if (s > 200){
    head.addClass('navbar-beyond-light');
    head.removeClass('navbar-beyond-dark');
  }else{
    head.addClass('navbar-beyond-dark');
    head.removeClass('navbar-beyond-light');
  }
});

Header Structure (Bootstrap based example from this website)#

<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top navbar-beyond navbar-beyond-dark" role="navigation">
  <div class="container container-lg">
    <!-- Website Title + Mobile Nav Button !-->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="http://andidittrich.com">Beyond Technology<br /><span>beyond the visible world</span></a>
    </div>
    
    <!-- Navi !-->
    <div class="navbar-collapse hidden-xs">
      <ul id="menu-topnavi" class="nav navbar-nav navbar-right">
      ....
      </ul>
    </div>
  </div>
</div>

<!-- Image -->
<div id="HeaderImage">
</div>

Some Weeks ago, i switched most of the webserver setups from custom spawn-fcgi init scritps to php-fpm and everything seems to work fine until today. The php-version of GitHubButtons won’t work anymore – just a text-message appears: “Access Denied.” First of all i thougt it was a problem with lighttpd and the fastcgi.map-extensions directive, but the error message doesn’t seem to be served by lighttpd…and well…it was a php-fpm related issue, beacause php-fpm only processes .php files by default!

You will not find these directive in the official FPM Documentation on php.net – it’s missing including tons of other directives. To get an overview about all possible php-fpm config keys, you should take a look into to default php-fpm.conf file included into the php-sources (sapi/fpm/php-fpm.conf) – also attached to this post!

Important: This directive can’t be used in global context, it’s a pool based config key!

Examle Pool: php-fpm.conf#

[pool-testwww]
; Limits the extensions of the main script FPM will allow to parse. This can
; prevent configuration mistakes on the web server side. You should only limit
; FPM to .php extensions to prevent malicious users to use other extensions to
; exectute php code.
; Note: set an empty value to allow all extensions.
; Default Value: .php
; Recommended: .php .phtml
security.limit_extensions = .php .php3 .php4 .php5 .phtml

Sometime you want to add special links directly to the plugin-page. For example, you can enable an easy access to the plugin’s settings-page or to related docs/resources. All the magic is done within the plugin_row_meta hook.

It’s important to check which plugin is currently processed (there are no plugin/namespace specific hooks). Therefore you have to check which plugin-(main)file is selected: if ($file == 'enlighter/Enlighter.php'){

Additional links can be added to the $links array including I18n support.

Appearance#

How it’s done#

// add links
add_filter('plugin_row_meta', 'addPluginPageLinks', 10, 2);

// links on the plugin page
function addPluginPageLinks($links, $file){
  // current plugin ?
  if ($file == 'enlighter/Enlighter.php'){
    $links[] = '<a href="'.admin_url('options-general.php?page='.plugin_basename(__FILE__)).'">'.__('Settings', 'enlighter').'</a>';
    $links[] = '<a href="https://twitter.com/andidittrich">'.__('News & Updates', 'enlighter').'</a>';
  }
  
  return $links;
}