Category Archives: Web

Using Divi theme with LifterLMS

When establishing an LMS with WordPress, LifterLMS is a solid LMS plugin, and Divi an excellent theme. But they don’t play together seamlessly out-of-the-box.

Specifically, you need to go to extra efforts to enable Divi builder and Divi settings for custom post types that come with LifterLMS: Course and Lesson.

But there is a solution!

The longcut

For all the instructions to do this yourself, see Nagdy’s post.

Pay to progress

Another good option, if you’re happy to pay a nominal fee is to use Divi Booster. This plugin allows you to enable Divi on custom post types without getting your hands dirty by touching the code below—I mean, eww, who knows where it’s been??

Free shortcut: My child theme

  1. Download this child theme
    Divi child theme – enables Divi on custom post types for LifterLMS
  2. Unzip it
  3. Tweak as necessary (should work out of the box)
  4. Upload to your WordPress instance
    Path to child theme
  5. Activate the child theme in your WordPress backend: Appearance > Themes

You can use this for any custom post types, just keep adding to the $post_types array at the top of the functions.php file.

function my_et_builder_post_types( $post_types ) {
    $post_types[] = 'course';
    $post_types[] = 'lesson';
    $post_types[] = 'another'; // Repeat this line and tweak
 
    return $post_types;
}
add_filter( 'et_builder_post_types', 'my_et_builder_post_types' );

Results

You should now see the Divi builder and Divi settings options appear when you edit those custom post types.

Divi examples in custom post

Let me know how you go!

Posted in

Custom app icons updated

Spent a little time revisiting the Custom app icons plugin for WordPress.

It was well overdue for a revisit, since initial release in 2010, Apple have released a bunch of new devices of differing display resolutions and with them a range of different dimensions of app icon to support. This plugin update allows you to specify a different sized app icon for each device.

I’ve also added the ability to specify if you’d rather Apple didn’t add the glossy effect on top of your icons (select ‘My icons are pre-composed’) in the configuration screen.

Thanks to Stephan S for saying hi and suggesting the idea!

Posted in

Pure CSS ‘tags’—ala SoundCloud

For the recent irama.org realignment I wanted to emulate the cute little ‘tags’ that sit below a track on SoundCloud.

I wanted to try to do as much as possible using CSS alone—without background images, too many extra elements, or general hackery. Ideally, the markup would be:

<a href="…">Tag text</a>

There are lots of posts around the interwebs about CSS triangles, but it’s hard to find a concise tutorial for putting an arrowhead on the end of a box. So I started by pinching borrowing a technique Ben pulled together for a site we were working on.

I noticed the negative margins were not playing nicely with iOS so I switched to relative positioning to offset the arrowhead. This also simplifies the padding/margin calculations, makings the final solution easier to tweak.

.tags a {
	float: left;
	background: #c5c5c5;
	color: #fff;
	text-decoration: none;
	margin: 0 0 10px 18px;
	padding: 2px 10px 1px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	position: relative;
	transition: all .25s linear;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
	white-space: nowrap;
	line-height: 21px;
}

.tags a:before {
	content: "";
	border-style: solid;
	border-color: transparent #c5c5c5 transparent transparent;
	border-width: 12px 13px 12px 0;
	position: absolute;
	left: -13px;
	top: 0;
	transition: all .25s linear;
}

Hover states need to cover the anchor background and the triangular border colour…

.tags a:hover {
	background-color: #39F;
}
.tags a:hover:before {
	 border-color: transparent #39F transparent transparent;
}

For the ‘hole’ punched in the tag, I thought I’d have to rely on a background image. Ben made a good point about reusing the bullet from a list item (which worked, with some negative margin trickery).

I finally thought to check the approach that soundcloud actually take and I was pleasantly surprised… clean minimal markup and a CSS-only solution!

Why didn’t I check their implementation sooner??

In the end, I borrowed their approach for the hole…

.tags a:after {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 50% 50% 50% 50%;
    box-shadow: 0 1px 1px #737373 inset;
    content: "";
    height: 5px;
    left: -1px;
    position: absolute;
    top: 10px;
    width: 5px;
}

Which ends up looking like this…

Screenshot of two tags in situe next to a blog post

Hats off to the designers and front end devs at soundcloud, they know what they are doing!

Posted in

Get the text within an element—including alt text—using jQuery

When working on the butterfly lightbox I needed a way to grab the text with a link including the alt text from any images within.

I couldn’t find any existing approaches, so I put together this small plugin to do the job. I thought I should post it here before I forget, or in case anyone else might find it useful too.

Example

If you had the following html:

<a id="smiley" href="">The symbol for happiness is <img src="smiley.png" alt="a smiley face" /></a>

You could grab the accessible text using the jQuery plugin like this:

$('#smiley').accessibleText();

Which would return the text ‘The symbol for happiness is a smiley face‘.

Plugin code

/**
 * jQuery plugin that returns the text nodes within the target element, combined/concatenated 
 * with any alt text or input values.
 */
$.fn.accessibleText = function() {
	if (this.is('img')) {
		return this.attr( 'alt' );
	} else if (this.is('input')) {
		return this.attr( 'value' );
	} else {
		return $.map( this.contents(), function( domElement ) {
			if ( domElement.nodeType === 3 ) {
				return domElement.data;
			} else if ( domElement.nodeType === 1 ) {
				var $element = $( domElement );
				if ( $element.is( 'img, imput' ) || $element.find( 'img[alt], input[value]' ).length > 0 ) {
					return $element.accessibleText();
				} else {
					return $element.text();
				}
			}
		}).join( '' );
	}
};

Let me know if you found this useful, or if you know of a better solution!

Edit: Much improved version above, thanks to Ben!
Edit again: I have updated it again to support input elements, and support using the plugin on inputs and imgs directly (this should really go on github).
Final edit: Here it is, accessibleText on github.

Posted in

Butterfly lightbox, now with gallery support

By popular demand (thanks Ray) the butterfly lightbox has been extended with new functionality.

The biggest new feature is the addition of support for galleries. Specify a gallery using either a container element to wrap the related links, or by using the same rel attribute on related links allows a series of lightbox links to work together, with ‘next’ and ‘previous’ controls presented beside the lightbox content to allow navigation between each gallery item.

Try it out here:

See full examples, downloads and changelog for more detail.

Posted in