Helpful LESS mixin to convert hex value to rgba

Recently I was trying to come up with a way to assign a LESS color variable to an element’s background and give it some transparency (WITHOUT using opacity). The rgba function seemed to be the wisest choice, but I had a bunch of hex colors defined in my LESS sheet, not rgba values. Luckily, I was able to come up with a useful mixin to convert my hex colors into rgba so I could assign an alpha level to them.

.bg-transparent(@color, @alpha: 1) {
  background: rgba( red(@color), green(@color), blue(@color), @alpha);
}

Example

.rule-1 {
  .bg-transparent(#0b3307, .5);
}

will output the following after being compiled by LESS:

.rule-1 {
  background: rgba(11,51,7,0.5);
}

Making wp_nav_menu work with Bootstrap 3 navbar

Notice! This only works with single level navigation. If your nav needs a dropdown, follow this tutorial which uses a custom nav walker. If you’re using a single level nav, this will do the trick.


I’m currently re-designing my homepage functionally and aesthetically and I wanted to use the Bootstrap 3 navbar on the re-design. After wrestling with the code for a little bit, I finally got it to work.

The following is in header.php

Leave any questions in the comments below.

MAMP: Working around phpMyAdmin’s MySQL file size limit when importing a database

Working locally has many advantages. I try to stay away from developing on a production server whenever possible for a number of reasons. The major reason is that I don’t want to make a mistake that can corrupt my data or bring the server down.

I’m currently working on a project that involves calling data from a large database (> 100MB) using some old PHP code a previous developer wrote. I *could* just tinker with it on production but I don’t think that’s a good idea. So I decided to export the database from the production server and then tried bringing it into phpMyAdmin so I could work locally. I kept getting a very ambiguous error saying:

You probably tried to upload too large file. Please refer to documentation for ways to workaround this limit.

Error messages that use the word “probably” kind of irk me, but that’s another post. The documentation was no help either, I tried all the things they recommended but still no luck. I could use a tool they recommended to use in order to split the file up but the disclaimer on the site saying “We are not responsible for lost data” made me not want to use it. It dawned on me that there had to be a way to import this via the command line, and indeed there was. Why didn’t I think of that first.

First create the database you want to import the data to. Either in phpMyAdmin or in the terminal.

To import your abnormally large DB, type this in a terminal:

/Applications/MAMP/Library/bin/mysql --host=localhost -uroot -proot dbname < /path/to/database/you/want/to/import.sql

Obviously if you have a different username, password and database name, change the appropriate parameters. If it is a really large file it may take a while but viola! No more being at the whim of phpMyAdmin, you just took matters into your own hands.

Simple Sticky Footer Using jQuery

I was recently working on a project that required a sticky footer. I needed the footer to always be aligned flush with the bottom of the screen. This was no problem when there was enough content to push the footer against the bottom edge. But what happens when there isn’t enough content? You end up with a floating footer and that’s no fun.

I immediately Googled the problem and found a bunch of various jQuery and CSS solutions. When I tried them though, none of them seemed to do exactly what I wanted them to do. Plus my code was structured a little differently than the examples. I decided to just try to come up with my own solution using jQuery. I’ve had enough of dealing with IE’s quirks, IE understands JQuery so it seemed like the easiest solution.

In order for this to work, the footer can’t be in a wrapper class. The code would have to be structured like this example:

<div id="page"></div>
<footer id="colophon"></footer>

Also, it is required that you set margin and padding for body to 0. These are the only requirements as far as I know of that have to do with CSS.

body {
    margin: 0;
    padding: 0;
    }

The idea behind the jQuery was pretty simple. Check the height of the element, then check the height of the viewport. If the viewport height is greater than #page’s height, then we need to set some CSS on the footer. That CSS will just absolutely position it at the bottom of the frame. It’s a good idea to make sure your footer’s width is 100% so it looks right.

I brought in jQuery and inserted the code.

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script><script type="text/javascript">
$(document).ready(function() {
  var bodyHeight = $("body").height();
  var vwptHeight = $(window).height();
  if (vwptHeight > bodyHeight) {
    $("footer#colophon").css("position","absolute").css("bottom",0);
  }
});
</script>

In order to make this work with older versions of IE (< IE9), include Google's HTML5 shiv. [html] <!-- Add conditional for IE7 + 8 support --> <!--[if lte IE 8]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> [/html]

See the demo

Worked like a charm for my purposes. Feel free to modify it for your own use. If you have any questions or comments, feel free to leave a comment! 🙂