HTML5 Master Page in Sharepoint

Unfortunately I haven’t gotten around to customizing my own, because instead I ran across Kyle Schaeffer’s HTML5-ready Master Page for Sharepoint 2010. So far it seems to work pretty well, but had a bit of trouble up front on a mac. Seems to be working now.

Time will tell how well the replacement of Sharepoint’s ribbon-controlling javascript with using custom CSS & javascript to control it will work well for all situations. I’m really hoping it will though!

So shout-out to Kyle for awesome work. Go to his site, download it and try it out!

Turning Off Comments for a Page in WordPress

Want to turn off (or on) comments for a page in wordpress. It’s actually quite easy…they just hid the option waaaaay up in the top corner of your screen. So edit your page, and then you go up to the top right and click “Screen Options”. When this little drop-down appears, make sure the option for “Discussion” is checked. Then scroll to the bottom of your page, and you’ll see an option for enabling/disabling comments and pingbacks.

Happy un-commenting!

The Perfect Text Editor: TextMate

I code in html, css, php, javascript, the list goes on. The most important feature of an editing program to me is speed. For several years I have used Textwrangler, but this week I have switched. In fact…I paid actual money for a text editor. The features it has are great. Here is my synopsis of TextMate (for mac).

1. lightweight. loads very fast, no frills
2. powerful. it understands many many languages. autocomplete tags, auto-close brackets.
3. shortcuts. for end tags, forward and backwards indent, selecting whole lines, typing MULTIPLE LINES at the same time (think large list of ‘li’ tags you want to setup)
4. ability to open a folder structure in the program and keep the folder structure visible and in place as you flip between pages to edit. Very useful for editing themes in wordpress & drupal. in fact, you can save that folder structure as a project for re-opening.
5. pasting from history. that’s right, there is a clipboard history that will allow you to copy things from multiple places in the document, then iterate through your clipboard to paste them one by one elsewhere.

I work for a school, meaning I was able to get the educational discount. But I think with the time that this is going to save me would be well worth the investment even of the full price version.

Download your copy at Macromates.com

Happy coding!

Creating Custom Themes in WordPress

Anyone ever created a custom theme for wordpress? Like, from scratch? Not a child theme, but an actual custom theme? Harder than you might think. A solid knowledge of PHP, HTML, and CSS are essential. My PHP skills are a little lacking, so it’s turning out to be a bit harder than I had hoped.

Conclusion. Starting from a stripped down theme (my personal favorite is Toolbox) seems to be the way to go. A lot of the coding has been done already, and you are pretty much ready to customize and get your client’s site up and running without losing (and in most cases actually gaining) functionality.

How to create a wordpress custom menu

When creating a custom menu in a wordpress custom theme, here are the steps to follow.

1. declare the custom menu in functions.php
2. call the custom menu in header.php
3. style with CSS

Step 1
Put the following code in functions.php in your theme file:

    // Declare a custom menu
    if (function_exists('register_nav_menus')) {
    register_nav_menus(array('main_nav' => 'Main Navigation Menu'));
	}

Step 2
Put the following code in your header.php to call the menu:

<nav id="main-menu">
 <h2>Main Navigation</h2>
 <?php wp_nav_menu(array('menu' => 'JM Menu')); ?>
</nav>

Step 3
Place the following CSS in your style.css file (sorry if it’s a bit hard to read, just copy/paste and go through it).

nav#main-menu h2{display:none;}
nav#main-menu{
display:block;float:left;width:100%;background:#990000;}
nav#main-menu ul{list-style:none;margin-left:0px;}
nav#main-menu ul li a{display:block; float:left; color:#fff; text-decoration:none; padding:5px 10px;}
nav#main-menu li{float:left;position:relative;}
nav#main-menu ul ul{background:#990000; display:none;float:left; position:absolute; top:20px; left:0; width:188px ;z-index:99999;}
nav#main-menu ul ul ul{left:100%;top:0;}
nav#main-menu ul ul a{height:auto;width:168px;}
nav#main-menu li:hover > a,
nav#main-menu ul ul :hover > a,
nav#main-menu a:focus {background:#660000;color:#efefef;}
nav#main-menu ul li:hover > ul{display:block;}cs

What to do when floated divs break their parent div

Insert the following CSS code into your stylesheet, and then declare a class of “group” on the parent div.

.group:before,
.group:after{content:"";display:table;}
.group:after{clear:both;}
.group{zoom:1;/* For IE 6/7 (trigger hasLayout) */}

Credits to this site for the fix.

Declaring document type with HTML5

Because of the new markup in HTML5, declaring your document type is WAY easier than before. Check this sample below for a basic structure of an html5 page.

<!doctype html>
<html lang="en">
<head>
<title>title of the page</title>
</head>
<body>
</body>
</html>