Cheesetoast » Snippets http://www.cheesetoast.co.uk Brain Food for Web Developers Mon, 07 Jul 2014 23:18:22 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.9 Adding HTML5 Telephone Numbers http://www.cheesetoast.co.uk/adding-html5-telephone-numbers/ http://www.cheesetoast.co.uk/adding-html5-telephone-numbers/#comments Mon, 20 Jan 2014 21:40:50 +0000 http://www.cheesetoast.co.uk/?p=1240 Using the href attribute, HTML5 offers a way to add phone numbers as an anchor link in the same way you can link to a url. Clicking on the number on a smartphone will initiate a call. Continue reading

The post Adding HTML5 Telephone Numbers appeared first on Cheesetoast.

]]>
Using the href attribute, HTML5 offers a way to add phone numbers as an anchor link in the same way you can link to a url. Clicking on the number on a smartphone will initiate a call.

Here’s an example:

<p>Call <a href="tel:+12095551234">555-1234</a></p>

Since your site can be viewed from any location you should include the international dialing prefix.

You can also add a extensions to the number by using a pause:

<p>Call <a href="tel:+12095551234p148">555-1234</a></p>

Tel or Skype

If you’d rather direct users to Skype you can use the callto: attribute like so:

<p>Call <a href="callto:+12095551234">555-1234</a></p>

The post Adding HTML5 Telephone Numbers appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/adding-html5-telephone-numbers/feed/ 0
Lined Paper with CSS http://www.cheesetoast.co.uk/css-lined-paper/ http://www.cheesetoast.co.uk/css-lined-paper/#comments Thu, 11 Apr 2013 23:06:37 +0000 http://www.cheesetoast.co.uk/?p=1140 Continuing on from my previous article on a CSS paper stack, I found a way to take the paper theme a little further with lined paper. Basically we use a repeat CSS3 gradient to create the lines on the page. Read … Continue reading

The post Lined Paper with CSS appeared first on Cheesetoast.

]]>
Lined PaperContinuing on from my previous article on a CSS paper stack, I found a way to take the paper theme a little further with lined paper.

Basically we use a repeat CSS3 gradient to create the lines on the page. Read more about CSS gradients and stop colours from Dynamicdrive.

View the demo on codepen. Here’s the code:

.page {

/* Setup the basic presentation of the div */
font-family: 'Just Another Hand', cursive;
width: 700px;
position: relative;
margin: auto;
padding: 15px 0;
color: #212121;

/* Curl the corners to make it look more like paper */
-webkit-border-bottom-left-radius: 20px 500px;
-webkit-border-bottom-right-radius: 500px 30px;
-webkit-border-top-right-radius: 5px 100px;

-moz-border-radius-bottomleft: 20px 500px;
-moz-border-radius-bottomright: 500px 30px;
-moz-border-radius-topright: 5px 100px;

border-radius-bottomleft: 20px 500px;
border-radius-bottomright: 500px 30px;
border-radius-topright: 5px 100px;

/* Set the background */
background: white;
background:
-webkit-gradient(
linear,
left top, left bottom,
from(#333),
color-stop(2%, white)
);

background:
-moz-repeating-linear-gradient(
top,
#fff,
#fff 38px,
#81cbbc 40px
);

background:
repeating-linear-gradient(
top,
#fff,
#fff 38px,
#81cbbc 40px
);

-webkit-background-size: 100% 40px;

-webkit-box-shadow: 0 2px 10px 1px rgba(0,0,0,.2);
-moz-box-shadow: 0 2px 10px 1px rgba(0,0,0,.2);
box-shadow: 0 2px 10px 1px rgba(0,0,0,.2);

}
p {
padding: 0 100px;
line-height: 40px;
margin-bottom: 40px;
font-size: 30px;
}

Original article on NetTuts.

The post Lined Paper with CSS appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/css-lined-paper/feed/ 0
CSS Paper Stack Effect http://www.cheesetoast.co.uk/css-paper-stack-effect-pseudo-pile-notes/ http://www.cheesetoast.co.uk/css-paper-stack-effect-pseudo-pile-notes/#comments Mon, 25 Mar 2013 20:45:28 +0000 http://www.cheesetoast.co.uk/?p=1108 This bit of CSS helps to add some decoration to a standard box area. Using the rotate effect we can make an area appear like a stack of paper notes. Continue reading

The post CSS Paper Stack Effect appeared first on Cheesetoast.

]]>
This bit of CSS helps to add some decoration to a standard box area. Using the rotate effect we can make an area appear like a stack of paper notes.

Box made to look like a stack of paper notes

View the demo at Codepen.

All we need to do for the HTML is to add a class to a standard div:

<div class="paper-stack">
   <h1>Notes</h1>
   <p>Paragraph</p>
</div>

Now the CSS. To add two extra pages to the box without using additional divs (which is not semantic) we use the pseudo elements :before and :after.

We start with the general styling that applies to all paper sheets.  We give the pages both inset and outset shadows to give the impression of depth:

.paper-stack, .paper-stack:before, .paper-stack:after
{
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 0 30px rgba(0,0,0,0.1),
                  1px 1px 3px rgba(0,0,0,0.2);
}

Now we’ll get more specific:

.paper-stack

{
position: relative;
width: 200px;
padding: 2em;
margin: 35px auto;
}

/* Setup height, width, rotation, etc. for both underlying papers */
.paper-stack:before, .paper-stack:after
{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: rotateZ(1deg);
-o-transform: rotate(1deg);
transform: rotateZ(1deg);
z-index: -1;
left: 10px;
top: 7px;
}

/* Tweak the lower paper note so that it sticks out further still */
.paper-stack:after
{
-webkit-transform: rotateZ(0.5deg);
-o-transform: rotate(0.5deg);
transform: rotateZ(0.5deg);
left: 5px;
top: 3px;
}

*/ Dress up the header a little */
.paper-stack h1
{
font-size: 1.8em;
font-weight: normal;
text-align: center;
padding: 0.2em 0;
margin: 0;
border-bottom: 2px solid #ddd;
}

.paper-stack p
{
text-align: left;
margin: 1.5em 0;
}

View the demo at Codepen.

Original article on SitePoint.

I tried playing around with CSS animations to make the pages shuffle out a little on hover but unfortunately the animation effects on pseudo elements like :before and :after are not well supported. For more info visit CSS Tricks – Transitions and Animations on CSS Generated Content.

The post CSS Paper Stack Effect appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/css-paper-stack-effect-pseudo-pile-notes/feed/ 1
Add Grayscale to Images on Hover Using CSS http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/ http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/#comments Thu, 14 Feb 2013 01:00:03 +0000 http://www.cheesetoast.co.uk/?p=1057 Here's a useful bit of code for converting images to black and white using CSS. This can be useful when you want to add a grayscale-to-colour hover effect to your images. Continue reading

The post Add Grayscale to Images on Hover Using CSS appeared first on Cheesetoast.

]]>
Here’s a useful bit of code for converting images to black and white using CSS. This can be useful when you want to add a grayscale-to-colour hover effect to your images.

Add the following CSS class to your image elements:

img.grayscale{ 
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);  /* For Webkit browsers */
    filter: gray;  /* For IE 6 - 9 */
    -webkit-transition: all .6s ease;  /* Transition for Webkit browsers */
}

The hover effect:

img.grayscale:hover{ 
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    filter: none;
}

See the Pen sfCKa by Graham Clark (@Cheesetoast) on CodePen.

The above CSS code currently works for Chrome and IE. Safari won’t work yet, but version 5.2 (coming soon) should support the filter. Until then the code will degrade gracefully.

To get it working on Firefox we need to use the following SVG layer:

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */

Here is the complete snippet:

img.grayscale{
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
}

img.grayscale:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

The post Add Grayscale to Images on Hover Using CSS appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/feed/ 6
Highlight Post Categories in WordPress using the_category() http://www.cheesetoast.co.uk/highlight-post-categories-wordpress/ http://www.cheesetoast.co.uk/highlight-post-categories-wordpress/#comments Fri, 16 Nov 2012 19:41:35 +0000 http://www.cheesetoast.co.uk/?p=1000 Here's a quick code snippet that allows you to style the post categories displayed alongside each Wordpress post by wrapping them in a span tag using the_category function. Continue reading

The post Highlight Post Categories in WordPress using the_category() appeared first on Cheesetoast.

]]>
Categories "Featured" and "Services" have been separately highlighted in blue.Here’s a quick code snippet that allows you to style the post categories displayed alongside each WordPress post.

Basically, during ‘the loop’ you’d use the_category() function to output the categories that the current post belongs to. Here is a simple example of the_category function in use:

<p>Posted in <?php the_category(', '); ?></p>

Example output: Posted in Featured, Services

The first parameter in the_category() function is the separator. In the above example I’ve used a comma to separate the categories listed but it’s also common to add arrows, blank spaces, or bullet points.

What I want to accomplish is to highlight each category by wrapping them in a span tag. The problem is that the separator is only placed between categories so in order to wrap each one I need to place an open span before and after I call the_category function. Then I can place a closing and opening span as the separator. Like so:

<p>Posted in <span class="round label"><?php the_category('</span> <span class="round label">'); ?></span></p>

Which will output the following code for two categories:

<p>Posted in
<span class="round label> <!-- First category link code --> </span>
<span class="round label> <!-- Second category link code --> </span>
</p>

Read more about the_category function and it’s parameters from the WordPress codex.

The post Highlight Post Categories in WordPress using the_category() appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/highlight-post-categories-wordpress/feed/ 0
Custom Scrollbars for Webkit Browsers http://www.cheesetoast.co.uk/custom-scrollbar-webkit-browsers/ http://www.cheesetoast.co.uk/custom-scrollbar-webkit-browsers/#comments Tue, 06 Nov 2012 21:23:56 +0000 http://www.cheesetoast.co.uk/?p=977 Having just learned how to customize the scrollbar on webkit browsers I thought I'd update Cheesetoast with a shiny new scrollbar and share the process. If you're already using a webkit browser you should already see that this site now has new vertical and horizontal scrollbars. Continue reading

The post Custom Scrollbars for Webkit Browsers appeared first on Cheesetoast.

]]>
A comparison of the scrollbar with and without webkit

Having just learned from CSS Tricks how to customize the scrollbar on webkit browsers I thought I’d update Cheesetoast with a shiny new scrollbar and share the process.

If you’re already using a webkit browser you should already see that this site now has new vertical and horizontal scrollbars.

First I set the dimensions of the scrollbar itself. The width will apply to the vertical bar and the height applies to the horizontal.

::-webkit-scrollbar {
width: 10px;
height: 8px;
}

Next up is the track, the part of of the scrollbar behind the handle. It’s possible to use other webkit features such as box-shadow and border-radius:

::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,155,194,0.7);
-webkit-border-radius: 10px;
border-radius: 10px;
}

Finally I setup the “thumb”, the handle part of the scrollbar:

::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(0,155,194,0.5);
-webkit-box-shadow: inset 0 0 3px rgba(0,155,194,0.6);
}

I used the selector :horizontal for this part so that I can style the horizontal bar differently from the vertical bar (you can use :vertical too).

::-webkit-scrollbar-thumb:horizontal {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(0,0,0,0.9);
}

That’s all there was to it. For more information on webkit scrollbars you can read the webkit blog.

The post Custom Scrollbars for Webkit Browsers appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/custom-scrollbar-webkit-browsers/feed/ 0
Safely Include Scripts or Stylesheets In WordPress Header http://www.cheesetoast.co.uk/safely-include-scripts-style-files-wordpress-header/ http://www.cheesetoast.co.uk/safely-include-scripts-style-files-wordpress-header/#comments Thu, 11 Oct 2012 21:23:43 +0000 http://www.cheesetoast.co.uk/?p=892 There are a couple of ways to include files in your Wordpress header. One way is to manually add the code to your header file. Although this works just fine, the recommended way to is use the Wordpress function wp_enqueue_script() function. Continue reading

The post Safely Include Scripts or Stylesheets In WordPress Header appeared first on Cheesetoast.

]]>
There are a couple of ways to include files in your WordPress header. One way is to manually add the <script src=”…”></script> code to your header file. Although this works just fine, the recommended way to is use the WordPress function wp_enqueue_script() function.

Use this code in your functions.php file:

<?php 
add_action( 'wp_enqueue_scripts', 'add_custom_script' ); 
function add_custom_script() { 
   wp_enqueue_script( 
      'custom_slideshow_script',
      get_template_directory_uri() . '/js/custom-script.js',
      array('jquery') 
   ); 
}
add_action('wp_enqueue_scripts', 'add_custom_script');
?>

This particular use of the wp_enqueue_script function loads a script that is dependent on another WordPress script, in this case JQuery. There are several variations of this function that you can find on the WordPress Codex.

The function wp_enqueue_style can be used for stylesheets.

The post Safely Include Scripts or Stylesheets In WordPress Header appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/safely-include-scripts-style-files-wordpress-header/feed/ 0
Customize the WordPress Login Screen CSS http://www.cheesetoast.co.uk/customize-wordpress-login-screen-logo-css/ http://www.cheesetoast.co.uk/customize-wordpress-login-screen-logo-css/#comments Mon, 01 Oct 2012 15:42:24 +0000 http://www.cheesetoast.co.uk/?p=861 Here's a useful little code snippet that you can use to edit the Wordpress login screen styling without altering the core CSS files. In this example I'll demonstrate how to replace the Wordpress logo on the login page. Continue reading

The post Customize the WordPress Login Screen CSS appeared first on Cheesetoast.

]]>
Here’s a useful little code snippet that you can use to edit the WordPress login screen styling without altering the core CSS files. In this example I’ll demonstrate how to replace the WordPress logo on the login page.

Open up your functions.php file and paste this function:

function my_custom_login_logo() {
echo '<style type="text/css">
.login h1 a { 
background-image:url('. get_stylesheet_directory_uri() .'/images/your_logo_file.jpg) !important;
background-size: 145px 62px !important;
}
</style>';
}
add_action('login_head', 'my_custom_login_logo');

To set the background image url I’ve used the function get_stylesheet_directory_uri(), which retrieves the stylesheet directory of the current theme/child theme. You should always use the dynamic WordPress functions to locate files, as opposed to using a static address.

Since this styling code is called before the default WordPress CSS for the login page I’ve used the !important property to ensure that it’s not overwritten. This apples to any other changes you decide to make.

For reference, here’s the default styling for the login page header anchor:

.login h1 a {
background-image:url('../images/wordpress-logo.png?ver=20120216');
background-size:274px 63px;
background-position:top center;
background-repeat:no-repeat;
width:326px;height:67px;
text-indent:-9999px;
overflow:hidden;
padding-bottom:15px;
display:block
}

Good luck customizing your own login screen.

The post Customize the WordPress Login Screen CSS appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/customize-wordpress-login-screen-logo-css/feed/ 0
Basic HTML5 Starter Template http://www.cheesetoast.co.uk/html5-starter-basic-bare-bones-template/ http://www.cheesetoast.co.uk/html5-starter-basic-bare-bones-template/#comments Thu, 20 Sep 2012 22:22:08 +0000 http://www.cheesetoast.co.uk/?p=843 Need to start a new HTML5 page in a hurry? Just copy and paste this code. Includes a conditional tag that loads the html5 shiv for IE. Continue reading

The post Basic HTML5 Starter Template appeared first on Cheesetoast.

]]>
Need to start a new HTML5 page in a hurry? Just copy and paste this HTML5 starter code. It uses a conditional tag that loads the html5 shiv for IE. Adjust your css & js file locations accordingly.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" href="css/styles.css">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <!-- Content goes here -->
    <script src="js/scripts.js"></script>
</body>
</html>

If you haven’t already, you should look at the HTML Boilerplate project. It’s a very quick way to get a site started with HTML5.

The post Basic HTML5 Starter Template appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/html5-starter-basic-bare-bones-template/feed/ 0
Create Custom Thumbnails for WordPress Posts http://www.cheesetoast.co.uk/create-custom-thumbnail-size-wordpress-posts/ http://www.cheesetoast.co.uk/create-custom-thumbnail-size-wordpress-posts/#comments Sun, 09 Sep 2012 20:55:12 +0000 http://www.cheesetoast.co.uk/?p=760 By using a post's featured image you can display a custom thumbnail beside your latest posts.
Although Wordpress creates thumbnail images automatically (small, medium, and large) you can tell Wordpress to create custom thumbnail sizes. Continue reading

The post Create Custom Thumbnails for WordPress Posts appeared first on Cheesetoast.

]]>
Custom thumbnails displayed next to post excerpts

By using a post’s featured image you can display a custom thumbnail beside your latest posts.

Custom thumbnail size

Although WordPress creates thumbnail images automatically (small, medium, and large) you can tell WordPress to create custom thumbnail sizes.

Firstly of all, decide on the image dimensions that will best suit your page. For this example I’ve chosen a square of 75 x 75 px.

Now we make use of the WordPress function add_image_size(). Just add the following code to your functions.php file (or try the alternative to using the functions file):

add_image_size( 'tiny-thumb', 75, 75, true );

The parameters for this function are:

  • $name (string – required)
  • width (int – optional)
  • height (int – optional)
  • crop (boolean – optional)

For this example I’ve chosen to set the ‘crop’ boolean to true so that images are automatically cropped to my specified dimensions. This way I can make sure all my thumbnails will appear square.

Now just attach an image to your post using the featured image.

Note: Only images uploaded after you add this function will have the new cropped thumbnail size.

Adding thumbnails to your blog page

Now that you have these new thumbnail sizes you need to display them next to your posts.

To display the new thumbnails on your blog listings page open up your index.php file. If you want the thumbnails to appear on the full articles you can also edit your single.php file. Either way, look in ‘the loop’ for the entry div add some new code.

<div class="entry">
   <?php if(has_post_thumbnail()): ?>
      <a href="<?php the_permalink() ?>" title="Link to <?php the_permalink() ?>">
         <?php the_post_thumbnail('tiny-thumb');?>
      </a>
   <?php endif ?>
   <?php the_content(); ?>
</div>

The second line in the code above tests to see if a thumbnail exists for each post. If one does exist, we create an anchor link to the main article using the_permalink() function and display our custom thumbnail inside it.

To style the new thumbnail image we can use the class ‘attachment-[thumbnail-name]’ that WordPress automatically generates for us (in my example this would be ‘attachment-tiny-thumb‘. Alternatively you can wrap the image in your own div and give it your own class.

You might want to add some margins and a float:

.attachment-tiny-thumb { 
   float: right;
   margin: 0 0 10px 10px;
 }

I hope this tip comes in handy. Let me know if you found it useful or if you know of any improvements that can be made!

The post Create Custom Thumbnails for WordPress Posts appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/create-custom-thumbnail-size-wordpress-posts/feed/ 0