Child Theme for Twenty Twelve – Pink Xmas

Summer Day

Live Preview

Pink Xmas is a child theme for Twenty Twelve with Christmas/holiday accent. It comes with a snow falling effect. 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 Twenty Twelve theme
  • Use the following custom css

Copy everything after:

/* =========================================================================
 *   Pink Xmas
 * ========================================================================= */

/* customized by pure-essence.net */

here.

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

Child Theme for Twenty Twelve – Casually

Black Cat

Live Preview

Casaully is a child theme for Twenty Twelve. 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 Twenty Twelve theme
  • Use the following custom css

Copy everything after:

/* ========================================================================= Causally ========================================================================= */
/* customized by pure-essence.net */

here.

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

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