Tutorial Archives - Fat Cat Designs

Both padding and margins are used to create space.

Padding creates space within the element and margins create space between elements.

this is an example of an element without padding

As you can see the text is cramped and is hard to read.

.text-box-1{
	border: 2px solid #000;
	width:300px;
}

Let’s see the same box with padding applied to the sides, top and bottom.

.text-box-2{
	border: 2px solid #000;
	width:300px;
	padding: 10px 15px 10px 15px;
}

As you can see the text now has more room and is easier to read.

If we had two of these boxes together without margins it would look like this.

Instead of being two separate elements they sit on top of each other.

To fix this problem we add a margin in this case we’ll add 10px to the top and bottom

The elements now occupy their own space.

.text-box-3{
	border: 2px solid #000;
	width:300px;
	padding: 10px 15px;
	margin: 10px 0 10px 0;
}

clock Padding and margins work on a clock system

the first number is 12 or the top
the second number is 3 or the right
the third number is 6 or the bottom
the fourth number is 9 or the left

Step 1.
Create a file called print.css
There are a number of styles you can add, but the basic style of print.css is this:

/* Print Style Sheet */
@media print {
body { background:white; color:black; margin:0 }
}

Step 2.
Upload this newly created file to your Genesis child theme directory via FTP or cpanel

Step 3.
Add the call to this new stylesheet in your child theme functions.php

add_action( 'wp_enqueue_scripts', 'child_print_style' );
/**
*Print Style Sheet
 */ 
function child_print_style() {
	wp_enqueue_style( 'child_print_style', $src = CHILD_URL . '/print.css', 'false', '1.0.0', 'print' ); 
}

Step 4.
Next we can add a link and print popup to single posts by creating a new php file. This file will be called print.php and should be added to your child theme directory. Place the following content in the file;
<div class="print"><a rel="nofollow">Print This!</a></div>

Step 5.
Now you will need to show this in your single post template so also add this to your child theme functions.php

// Add Print Button after single post
add_action( 'genesis_after_post_content', 'child_include_print', 9 );
function child_include_print() {
if( is_single() )
require( CHILD_DIR.'/print.php' );
}

Warning: do not add this to functions without first creating and uploading print.php or you may experience errors or white screen on your site.

Step 6.
If you would like to change the font, font size, background or float of your print button add this to your child theme’s style.css file and style as desired.

.print {

}

That’s it!

Tutorial

A Guide To Using Padding and Margins

How To Add A Print Stylesheet & Button To Genesis