Logic Pro X Tips

Time Stretch

  1. Get the 1 on the 1
  2. Open the Editor for the desired track
  3. Click on the Flex button and select a type. Start with rhythmic.
  4. Open Inspector column
  5. Under Region: MIDI Thru set Quantize to 1/8 notes. this is a good starting point.
  6. If anything sounds off open the track’s Editor window and adjust the Flex Hit Points by selecting and moving the Hit Point or turning the Hit Point off by clicking on the X at the top of the point.
Logic X Hit Point
Logic X Hit Point


Logic X Quantize Amount
Logic X Quantize Amount

Get Drummer to play along

Open Logic Pro>Preferences>Audio>General in the middle of the window is Plug-in Latency and confirm if Compensation is  enabled.
NOTE: This is a universal preference. If you have Drummer on other songs recorded without Latency Compensation this will effect them and therefore should be turned off until adjustments are made to the audio placement.

Logic X Plugin Latency
Logic X Plugin Latency

Open Office Tricks

Disable Text Overflow

  1. Format Cells
  2. Select Alignment tab
  3. Set alignment Horizontal to Filled
  4. Actually Never mind, Filled will repeat the content indefinitely! I am curious why this is achievable (for what purpose?) and simply turning overflow on is not.
  5. The hack solution is to put a space in the neighboring cell. How barbaric!

Special Characters in HTML


© Copy Right ©
® Registered ®
™ Trade Mark &amp#8482;
№ Number №
¼ Quarter ¼
½ Half ½
¾ Three Quarters ¾
¿ Inverted Question Mark ¿
¡ Inverted Exclamation Mark ¡
& Ampersand &
¢ Cent 162;
€ Euro €
£ Pound £
| Pipe |
¦ Broken Pipe ¦
― Horizontal Bar ―
[ Left Bracket [
] Right Bracket ]
‘ Single Quote &amp#39;
• Bullet •
° Degree Sign °
○ Hollow Bullet ○
· Middle Dot ·
← Left Arrow ←
→ Right Arrow →
↑ Up Arrow ↑
↓ Down Arrow ↓
◄ Left Delta ◄
► Right Delta ►
▲ Up Delta ▲
« Left Angle Double Quote «
» Right Angle Double Quote »
‹ Left Angle Quote ‹
› Right Angle Quote ›
#62; Greater Than >
#60; Less Than <
☺ Smiley ☺
☻ Grey Smiley ☻
♠ Spade ♠
♣ Club ♣
♥ Heart ♥
♦ Diamond ♦
♪ Eighth Note ♪
♫ Beamed Eighth Note ♫
π pi π
∞ Infinity ∞
√ Square Root √
☼ Sun ☼
♀ Female ♀
♂ Male ♂
◊ Hollow Diamond ◊
† Cross †
Ω Omega Ω
⌂ House ⌂

CSS / HTML Cheat Sheet

CSS class vs. ID

The ID selector specifies a style for a unique element, defined with a “#”. Do not start an ID with a number!
The Class selector specifies a style for a group of elements, defined with a “.”

Disable links

pointer-events: none !important;
cursor: default !important;

Make an .htaccess file with these parameters to display the entire file name of content in a directory without using an index file

Options +Indexes
IndexOptions FancyIndexing FoldersFirst NameWidth=* DescriptionWidth=*

Basic text link

a:link {text-decoration: none; color: #000;}
a:visited {text-decoration: none; color: #000;}
a:hover {text-decoration: none; color: #777;}
a:active {text-decoration: none; color: #777;}

For an alternate link style

a.alt:link {text-decoration: none; color: #000; font-weight:bold;}
a.alt:visited {text-decoration: none; color: #000; font-weight:bold;}
a.alt:hover {text-decoration: none; color: #777; font-weight:bold;}
a.alt:active {text-decoration: none; color: #777; font-weight:bold;}
and the HTML is:
<a href=”yourlink.html” class=”alt”>link</a>


<a href=”mailto:johndoe@website.com”>Contact John</a>

Inline Style

<div style=”margin-left:50px;”></div>
or add a style to any tag
<p style=”margin-left:50px;”></p>

Text Styling

font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #000;
letter-spacing: 0px;
line-height: 0px;

No Break Space


Horizontal Rule

hr {background:#000; width:100px; height: 1px;}

Centering can be frustrating! Put this in your HTML

<div align=”center”></div>


<span class=“xxx”></span>

Text Shadow

rgba is: red (0-255), green (0-255), blue (0-255), alpha (0.0-1)
The 3 positions (shown as px) are: X axis for centering left and right, Y axis for centering top and bottom, and the amount of blur. You can use negative numbers for the position and even apply multiple shadows at different positions and opacity for effect!
text-shadow: 1px 1px .5px rgba(0, 0, 0, 0.5);

Box Shadows – Make sure you cover all of the browsers!

-moz-box-shadow: 3px 3px 4px #444;
-webkit-box-shadow: 3px 3px 4px #444;
box-shadow: 3px 3px 4px #444;
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#444444′)”;
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#444444′);

Box Shadows OFF!

-moz-box-shadow: 0px 0px 0px #444 !important;
-webkit-box-shadow: 0px 0px 0px #444 !important;
box-shadow: 0px 0px 0px #444 !important;
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=135, Color=’#444444′)” !important;
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=135, Color=’#444444′) !important;

Leave yourself notes in CSS

/* Enclosing a reminder about your CSS code within a /* */ comment is a great idea */

Leave yourself notes in HTML

<!– Enclosing a reminder about your CSS code within a <!– –> comment is a great idea –>

CSS Override (add this to the end of a CSS string to override any existing CSS)


Want to turn an element off?

display: none;

Turn off that hyphenation!

-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
word-wrap: normal;

Gradient Backgrounds

background: rgb(110,0,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(110,0,0,1) 0%, rgba(176,0,16,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(110,0,0,1)), color-stop(100%,rgba(176,0,16,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(110,0,0,1) 0%,rgba(176,0,16,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(110,0,0,1) 0%,rgba(176,0,16,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(110,0,0,1) 0%,rgba(176,0,16,1) 100%); /* IE10+ */
background: linear-gradient(top bottom, rgba(110,0,0,1) 0%,rgba(176,0,16,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#6e0000′, endColorstr=’#b00010′,GradientType=0 ); /* IE6-9 */

Background Image No-Repeat

background-image: url(‘images/logo.png’);
background-repeat: no-repeat;

Float & Clear

If you float left or right you will generally want to clear the float so that text will wrap under the object you are floating. Unfortunately, there is still no float center.
<div style=”float:left;”>&nbsp;</div>
<div style=”float:right;”>&nbsp;</div>
<div style=”clear:left;”>&nbsp;</div>
<div style=”clear:right;”>&nbsp;</div>
<div style=”clear:both;”>&nbsp;</div>

Round Corners or Radius

-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
border:1px solid #fff;

Text Selection Color

::-moz-selection {
background: none repeat scroll 0% 0% #888888;
color: #fff;

::selection {
background: none repeat scroll 0% 0% #888888;
color: #fff;

Woocommerce Variations (Sizes, Colors, etc.)

Go to the Product

  1. Scroll to Product Data.
  2. Change drop-down menu to Variable product.


  1. Select the Attributes tab on the left.
  2. Change drop-down menu to Custom product attributes and click the Add button.
  3. Name the attribute. In this case “Sizes”.
  4. Enter the Values separated by a “pipe” |. In this case “Small | Medium | Large”.
  5. Select Visible on the product page.
  6. Select Used for variations.
  7. Save Attributes.


Here are some vatriations you can copy and paste

  • Small | Medium | Large | XLarge | XXLarge
  • Red | White | Blue | Black




You can have different information for each variation, i.e. price.
For this example I will assume all variations will share information.

  1. Select the Variations tab on the left.
  2. Change drop-down menu to Add variations and click the Go button.
  3. Select a Default Form Value. In this case “Small”.
  4. You can select specific variations. For the example “Any Sizes” is selected.
  5. Click on Expand variation or click on the down arrow when you rollover the “Any Sizes” variation.

Here are some vatriations you can copy and paste

  1. Small | Medium | Large | XLarge | XXLarge
  2. Red | White | Blue | Black

Woocommerce Variations window closed



Variations – expanded

  1. Regular Price is the only required field.
  2. If there is specific differences in variations, i.e. price, weight, stock, that will affect price or shipping select Add variation for each difference.

Woocommerce Variations window open

Woocommerce Products Step-by-Step

From the left side of your wp-admin page click on Products then choose Add Products or select the product you want to edit.

Center Column

  1. Add Product Name
  2. Ignore the main text widow
  3. Fill in Product Short Description

Center Column > Product Data – Simple Product

  1. Choose Simple Product from the drop-down menu
  2. Select the General tab
  3. SKU and Price must be filled in
  4. Select the Inventory tab
  5. Confirm Stock status is In stock
  6. Select the Shipping tab
  7. Input Weight and Dimensions
  8. Apply a Shipping class (I have defined this on Products > Shipping Classes and set the cost of each rate on Woocommerce > Settings)
  9. click on the Shipping tab then click the link Flat Rate below the tab.

Center Column > Product Data – Variable Product

Use this if the product has variations such as different sizes or colors.

All of the above Product Data for a simple product still applies.

  1. Choose Variable Product from the drop-down menu
  2. Select Attributes
  3. Click the Add button for Custom Product Attributes
  4. Name the attribute and give it values separated by pipes. i.e. Small|Medium|Large
  5. Check the Used for variations box
  6. Select Variations
  7. Choose Add Variations and click the Go button for each variation
  8. Choose a default variation
  9. From the drop-down select each variation
  10. On the right of the drop-down there are 3 options. The three bar icon is to arrange the variations. Up arrow is to expand the variation window to edit options. Remove should be clear.
  11. Click the expand icon
  12. Price is  the only required field

Right Column

  1. Select all applicable Product Categories. (These are defined under Products > Categories)
  2. Enter Product Tags. These are keywords that will help filter this product
  3. Upload your product image. Images should be at least 1000×1000 pixels. Square is easiest to manage.
  4. If there are multiple images add the remaining images to Product Gallery. You can move these images to rearrange.

Woocommerce Cheat Sheet

Increase Your PHP Memory

Add this to wp-config.php

// Increase PHP Memory as recommended by Woocommerce
define( ‘WP_MEMORY_LIMIT’, ’64M’ );

Move WooCommerce Product Tabs under Product Summary

Add this to functions.php

// Remove tabs from the original location
remove_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 10 );


// Insert tabs under Product Summary
add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 60 );

Remove sidebar from Woocommerce

Remove this from wp-content/plugins/woocommerce/single-product.php

* woocommerce_sidebar hook
* @hooked woocommerce_get_sidebar – 10

Remove this from wp-content/plugins/woocommerce/archive-product.php

* woocommerce_sidebar hook
* @hooked woocommerce_get_sidebar – 10

Add this to style.css

#content-woocommerce {

Change the number of Woocommerce related products and columns

Add this to functions.php

* Change number of related products on product page
* Set your own value for ‘posts_per_page’
function woo_related_products_limit() {
global $product;

$args[‘posts_per_page’] = 6;
return $args;
add_filter( ‘woocommerce_output_related_products_args’, ‘jk_related_products_args’ );
function jk_related_products_args( $args ) {
$args[‘posts_per_page’] = 3; // 3 related products
$args[‘columns’] = 3; // arranged in 3 columns
return $args;