I know that it’s been a while since I’ve written anything, and I really don’t have a good excuse, but I promise that I’ll have some good content coming soon because tomorrow, I’ll be attending WordCamp Minneapolis. WordCamp is a… Continue Reading
I received word recently, that a site I have previously done work on, was getting some syntax errors. After checking those errors out, and seeing that certain files were giving the error Warning: Cannot modify header information – headers already… Continue Reading
If you use WordPress regularly, you know that it is often the target of hacking attempts, and rightfully so. It accounts for nearly a quarter of all websites! Why wouldn’t a hacker want to target WordPress? That, plus the plethora… Continue Reading
I’ve made a few changes to the Edit Hopper WordPress plugin that I developed and I’m glad to say that it now supports Custom Post Types and Posts. Plus, thanks to Jimmy (@sporifolous on Github), it now has an options… Continue Reading
A long, long time ago, I worked on a website that utilized an almost insane amount of pages and child pages in WordPress. While I was adding content to those pages, I realized that I hated having to click the Pages… Continue Reading
I’m trying to be a better developer. And somewhere in the vastness of the internet, someone told me I should be using Vagrant. So I did. It was cool and I liked it, but then I found out about VagrantPress and… Continue Reading
I like the hamburger menu. It makes sense. So this is the one that I use when building a menu for mobile devices. Here’s the HTML:
|
1 2 3 4 5 |
<nav id="mobile-navigation" class="site-navigation mobile-navigation" role="navigation"> <a href="#" class="mobile-menu-link">MENU<span></span></a> </nav> |
And the SCSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
.mobile-navigation { display: none; .mobile-menu-link { display: block; position: relative; width: 90px; height: 30px; left: 0; color: #2f6b68; font-size: 20px; text-align: right; margin: 10px; @include transition(all, 200ms, ease); span { content: " "; display: block; position: absolute; width: 24px; height: 4px; left: 50%; top: 44%; margin-left: -43px; background: transparent; @include transition(all, 200ms, ease); &:before { content: " "; display: block; position: absolute; width: 24px; height: 4px; background: #2f6b68; left: 50%; margin-left: -12px; transform: rotate(45deg); top: 0; @include transition(all, 200ms, ease); } &:after { content: " "; display: block; position: absolute; width: 24px; height: 4px; background: #2f6b68; left: 50%; margin-left: -12px; transform: rotate(-45deg); top: 0; @include transition(all, 200ms, ease); } } } .menu-mobile-container { height: auto; background-color: #ffffff; .nav-menu { position: relative; z-index: 50; width: 100%; .menu-item { display: block; margin: 0; a { display: block; border-radius: 0; } } } } } .mobile-navigation.closed { .mobile-menu-link { span { background: #2f6b68; &:before { top: -7px; transform: rotate(0); } &:after { top: 7px; transform: rotate(0); } } } .menu-mobile-container { height: 0; overflow: hidden; position: relative; } } |
Here’s my transition mixin:
|
1 2 3 4 5 6 7 8 9 |
@mixin transition($property, $time, $type: ease) { -webkit-transition: $property $time $type; -moz-transition:$property $time $type; -ms-transition:$property $time $type; -o-transition:$property $time $type; transition:$property $time $type; } |
And here’s some of… Continue Reading
Recently, I’ve been trying to find ways to speed up my development time, and I came across a great video showcasing Vagrant. I could spend a lot of time writing a bunch of mumbo jumbo here for you to read,… Continue Reading
It’s been pretty slow on the web development front for me lately, but I have discovered something new and interesting. It’s called DemocracyOS. What is DemocracyOS? Oh, I’m so glad you asked. Well it’s an open-sourced platform that aims to… Continue Reading
If you want to replace the WordPress logo on your admin login page with your own custom image, you can do it with just a couple simple lines in your functions.php file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
add_action("login_head", "my_login_head"); function my_login_head() { echo "<style> body.login #login h1 a { background: url('".get_bloginfo('template_url')."/images/logo_login.png') no-repeat scroll center top transparent; height: 181px; width: 269px; padding:0 25px; } </style>"; } |
Simply upload your file to the proper path… Continue Reading