Dine with Me – child theme for Responsive

Version 1.0.0 update under review!

Live preview


Child theme for responsive with a restaurant accent. It comes with a menuitem shortcode that allows you to easily create a menu page.

  • version 1.0.0 – Hello world!

Date created: 04/13/2013
Last updated: 07/03/2013
WordPress: Version 3.5.1
Tags: black, brown, pink, red, tan, white, dark, one-column, left-sidebar, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, post-formats
Ticket: http://themes.trac.wordpress.org/ticket/12743

Download | Donate

Child Theme for Twenty Eleven – It’s a Boy

Black Cat

Live Preview

It’s a Boy is a child theme for twentyeleven. You may download it. It may also be used on wordpress.com if you have custom CSS purchased.

To use this style on wordpress.com with custom css:

  • Activate the Hum theme
  • Use the following custom css

Copy everything after:

/* =========================================================================
 *   It's a Boy
 * ========================================================================= */

/* customized by pure-essence.net */

here.

Replace all image URLs
url(images/
with
url(//regretless.com/oriental/wp-content/themes/itsABoy/images/

CSS3 – add arrows to boxes

To add arrows for any boxes in CSS3 is relatively easy. You may use the border, absolute position along with the :before pseudo selector to add arrows in any directions.

To make a triangle with CSS border:

border: 20px solid transparent; /* box width for your triangle */
border-right-color: #fff; /* color for your triangle, the direct is opposite of what you want. For example, if you want a left pointing arrow, then set the right border color. */

More on CSS3 shapes

To position the arrow, make sure the box container is positioned relative so the arrow may be absolutely positioned based on the box container

.box {
	position: relative;
}
.box:before {
	content: ' ';
	height: 0;
	position: absolute;
	width: 0;

	/* your arrow and the positioning css here */
}

View jsFiddle Live Demo

You can generate the arrows using this tool.

It’s a Girl WordPress Theme

Live!


It’s a Girl is a responsive theme designed for baby girl blogs. It features a front page center widget area under high resolution that’s ideal for a gallery widget. It supports Jetpack infinite scroll.

  • version 1.0.0 – Hello world!

Date created: 04/09/2013
Last updated: 06/13/2013
WordPress: Version 3.5.1
Tags: black, blue, brown, gray, green, red, tan, white, yellow, light, three-columns, right-sidebar, fixed-width, blavatar, custom-background, custom-header, custom-menu, editor-style, featured-images, full-width-template, microformats, sticky-post, theme-options, threaded-comments
Ticket: http://themes.trac.wordpress.org/ticket/12357

Download | Donate

TinyNav – browser resize friendly

I use the TinyNav jQuery plugin to transfer a list menu into a dropdown for mobile devices.

I notice when I resize my browser on my desktop, the TinyNav leaves kind of a nasty look. For example, after I resized my browser into mobile size like 450px wide, I have to refresh the page for the tinynav to take effect and then when I resize my browser back to the normal size, I may see the leftover TinyNav dropdown like:
tinynav

To make tinynav more resize friendly, I implemented the following concept.

To detect mobile, I check if a certain layer is no longer display none. This way I let the CSS media query take full control of when it’s considered mobile. I don’t have to do any javascript detection. So it could be considered mobile just when you resize your browser window on your desktop. This is the concept I’m using; you may not like it but that’s ok.

My implementation also caches the tinyNav plugin so it doesn’t create a new dropdown every time you resize the window.

Here’s an example of the implementation.

  • Load the page
  • Resize your window to be less than 450px wide
  • You’d see the dropdown menu
  • Resize your window slowly to normal size, the dropdown will disappear and the normal menu will show
  • Repeat the steps
  • View source to see the implementation

Continue reading

Playing with CSS3 border-image

I spent some time to understand how border-image works in CSS3. It does take a bit of visualization to wrap your head around it. On top of that, they really look different in different browsers depend on the browsers’ rendering engine. This is the best tutorial I found on this topic.

I came up with three borders in the new theme I’m working on for wordpress. You can take a look and see whether your browser supports it. (Or you can run your browser against the CSS3 test.)

See examples in jsFiddle

Child Theme for Twenty Eleven – Black Cat

Black Cat

Live Preview

Black Cat is a child theme for twentyeleven. You may download it. It may also be used on wordpress.com if you have custom CSS purchased.

To use this style on wordpress.com with custom css:

  • Activate the Hum theme
  • Remove your custom header image (Recommended)
  • Use the following custom css

Continue reading

Cute Frames WordPress Theme

Version 1.0.0 update under review!


Cute Frames is a responsive pin board styled theme with unique frames for post formats: aside, image, link, quote and featured images. It supports sidebar, footer widgets, Jetpack infinite scroll.

  • version 1.0.0 – Hello world!

Date created: 03/29/2013
Last updated: 06/03/2013
WordPress: Version 3.5.1
Tags: fixed-width, three-columns, threaded-comments, sticky-post, microformats, right-sidebar, blue, brown, green, orange, pink, purple, red, white, yellow, light, custom-menu, editor-style, full-width-template, blavatar, post-formats, featured-images
Ticket: http://themes.trac.wordpress.org/ticket/12847

Download | Donate

Interesting recruiter email

look the subject

look the subject

I’m trying to figure this out. Was the subject for this email intentional?

I hope he’s talking about pucca
pucca
- you know the character I use for my twitter account.
There is a remote chance he has seen my twitter account and is referring to that. But it’s not an avi. So what does he mean? I’m trying to think if I’ve shared any pucca avi lately or anywhere? I cannot think of anything.

- Is it possible it’s a mix up? He pasted some text he meant for another email as the subject?

- Or is it an extremely creative way to catch my attention?

Either way I’m replying. Whether I’m interested in the job is almost secondary. I just want to find out what the subject means.

Update, reply from Justin:

I found you using a service from Dice.com that aggregates people’s
various social networking profiles (LinkedIn, Google+, Facebook, etc)
and your profile was sporting the aforementioned avatar. I am a fan of
the show and thought that was cool.
….