What I learned during the redesign

I have decided to update my website and turned it into a blog. All “portfolio” content is now presented as articles and is alternating with some tricks and tips mostly related to IT. This post is both the announcement of the new design and a collection of snippets I found while customizing WordPress and the theme.

  1. The sticky header is achieved by setting
    .imageBadge {
    	background-attachment:fixed;
    	min-height: 100px;
    }
    .textBadge {
    	position:fixed;
    }
    .mainContent {
    	z-index: 2;
    	position: relative;
    	background-color: #FFF;
    }
    
  2. The parallax effect for the header is done like this:
    /**
     * Creates a parallax effect for the header when scrolling
     */
    (
    function () {
    	var a = document.getElementById("masthead"),
    		e = $(window);
    	e.unbind("scroll").scroll(function () {
    		a.style.backgroundPosition =  "center "+ -(e.scrollTop()/ 9) + "px";
    	});
    }
    )();
    
  3. The sticky footer or “the curtain reveal effect” is done with
    .footerContainer {
      height:50px;
    }
    .footer {
      position:fixed;
      bottom:0px;
      padding: 10px 0px;
      z-index:0;
      width:100%;
    }
    

    A minimal demonstrator for points one to three can be found here: http://jsfiddle.net/PQS2C/3/

  4. Since there are so many syntax highlighters out there: I prefer the SyntaxHighlighter for WordPress. It does not screw up the indents, it has line numbering and visitors can easily copy the code.
  5. Protecting your WordPress login page (or other sensitive documents) by using .htaccess is a good idea because it reduces the load when your site is attacked and you have an additional protection against security vulnerabilities. But if you want a specific IP address to be excluded from the password query so you don’t have to enter the password every time, add the following to your .htaccess in the WordPress root folder:
    <Files wp-login.php>
      AuthUserFile <path to your .htpasswd>
      AuthName "Admin console"
      AuthType Basic
      require valid-user
      Order allow,deny
      allow from 12.34.567.89
      satisfy any
    </Files>
    # Guard some other sensitive files
    <FilesMatch "(\.htaccess|\.htpasswd|wp-config\.php|readme\.html)">
      order deny,allow
      deny from all
    </FilesMatch>
    

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.