Mobile Home for concrete5 allows you to automatically redirect mobile visitors to a destination of your choice. Usually a mobile optimized page or area of your site that is especially tailored for mobile devices like iPhones, iPads, Android devices and more.

For more information please visit Mobile Home on the concrete5 Marketplace.

Cheers!

---

Have you ever needed to get into your concrete5 install and I mean quick? Well then, you’re in luck! Faster than an email password reset. Less thinking than a MySQL session. One PHP file and you’re back in business!

How does it work?

Download, unzip and optionally edit the included PHP file (mainly to change the default password which is “borkborkbork”). Upload the file to the root of your concrete5 install. Call up the file up in your web browser and hope for lots of green checkmarks.

No really, how does it work?

Ah, concrete5 Instant Admin reads your site/config.php file and from there is able to figure out how to connect to your database. Once connected it will create a unique account and then promote the new account to the administrators group.

Special Thanks

• Nobiax for this lovely concrete texture.
• MarshallCreative for this lovely blueprint paper.
• Blambot for this lovely font.
• Franz Maruna for this lovely post.
• Reyd Sun for being lovely in general.

---

One of my favorite things to reflect upon when graced with a beautiful logo is… can it be done in CSS? The answer almost always, is yes.

Of course, just because you can build an aircraft carrier out of parts ordered from a 1979 Sears catalog, doesn’t mean it’s a good idea. The fun part is figuring out how to recreate a design with elegance.

Mini How-To

A good example of elegance can be found in recreating the iconic 007 gun barrel. All we need is one HTML tag and a bit of CSS. Neat!

Step 1

Set the body background color and add some basic style to the barrel div.

<div class="barrel"></div>

body {
    background: #eee;
}
.barrel {
    background-color: #444;
    height: 30px;
    width: 145px;
}

Step 2

Add a nice curve to the front of our barrel.

.barrel {
    border-bottom-right-radius: 26% 100%;
}

Step 3

Create a :before pseudo element with a border-radius curve and move it to the top and left of its parent. Don’t worry if it seems too large and just focus on the overlapping area for now.

.barrel:before {
    background-color: rgba(255,155,55,0.5);
    border-bottom-right-radius: 41% 100%;
    content: '';
    display: block;
    height: 49px;
    left: -42px;
    position: absolute;
    top: -7px;
    width: 50px;
}

Step 4

Create a curvy :after pseudo element and move it to the bottom and right.

.barrel:after {
    background-color: rgba(155,255,155,0.5);
    border-top-left-radius: 30% 109%;
    border-top-left-radius: 60% 200%;
    content: '';
    display: block;
    height: 18px;
    left: 78px;
    position: absolute;
    top: 23px;
    width: 59px;
}

Step 5

With everything lined up nicely; set the overflow property of .barrel to hidden to trim anything that wanders outside its shape.

.barrel {
    overflow: hidden;
}

Step 6

Now set the background color of the pseudo elements to the same as the body. Perfection!

.barrel:before,
.barrel:after {
    background-color: #eee;
}

Epilogue

Recreating the 007 logo ranged from the ridiculously simple (zeros) to pleasingly complex (gun trigger/guard). The seven however, was especially difficult. It required multiple attempts to forge it into a shape that not only looked great in all browsers but retained its beauty when zoomed in or out.

Speaking of browsers, you’ll want to make sure you are using IE9 or any recent version of Chrome, FireFox or Safari.

Not having to worry about old browsers is a lovely benefit of working on personal projects. Well that and obsessing over pixel or even sub-pixel details for up to a week of time which is exactly what this project took.

Hope to see you in the theatres this November when James Bond returns in Skyfall.

Cheers! ^_^

---