Tag Archives: Button Bar

Hot Keys, and Content is Still King

Been really busy here in the Nichols Nuthouse, writing articles and code, and cleaning up various little odds and ends. My main thrust is to flesh out my beginning content so that there will be something here when I start advertising the site. So it’s hot-and-heavy on the keyboard for me!

Here’s what I’ve done so far since yesterday. Much of it wasn’t on my to-do list:

  • Wrote the Tutorial for Contextual Submenus.
  • Wrote the Tutorial on the Image Button Bar Menu/Submenu. I finally settled on a name for it, but I prefer to call it the Button Bar.
  • Set up the contact form with cformsII and changed field color.
  • Wrote the pages for the remaining dummy menu buttons: Tricks, Tips, Newbies, Resources, and Info.
  • Coded four different post announcement boxes for different purposes.
  • Updated the Sociable plugin’s opacity. I like it to be 70% rather than the stock 40%.
  • Researched other Related Posts plugins. Trouble is, most of them won’t work with pages, which is what this site will have the most of. Right now I’m sticking with Simple Tags just because it does pages, too.
  • Worked out an in-page call-to-action. These will actually be part of the page text, since I’ve yet to find a way to append them on selected pages only.
  • Worked on articles about how to set up Google Custom Search, Google Analytics, and Google Webmaster Tools while setting all three up for Thesis Theme Tools. Took screen shots, too.
  • Put Google Search into the sidebar, since I don’t know where else to put it right now. Also set up a search results page.
  • Found a way to display tags on the blog front page and on pages. Just check the box to display them on Archives in Thesis Options. Easy but unintuitive.

My to-do list hasn’t changed much since yesterday, since it has open-ended projects that will take a while to accomplish. Here ’tis:

  • Finish the articles on setting up Google Custom Search, Google Analytics, and Google Webmaster Tools. Includes preparing screenshots in PhotoShop.
  • Continue writing content, focusing on material I already have.
  • Continue more detailed planning of the menu tree.

And as I have time and opportunity (and need a break):

  • Continue thinking and research what it would take to do video tutorials. Find out about post-processing and pro-con of storing on server or with a service like Vimeo.
  • Contact HostGator about some necessary server setting changes for enabling teaser images.
  • Bring into DEVONthink Thesis-related bookmarks from Safari.

That’s all, folks!

Two New Menu System Tutorials for You!

I‘m proud to say that new articles on two different kinds of menus/submenus are up! They’re

I use the Button Bar for the main navigation of Thesis Themes Tools, with the Contextual Menu right under it. Right now, the best places to see them in action are under the “About” or “Tricks” buttons.

The Button Bar is composed entirely of images, with both a selected and an unselected state. You can have any kind of document in the Button Bar in any order you choose, unlike the Thesis nav menu. It can be used either as a main menu substitute for the Thesis navigation bar, or as a submenu.

The Contextual Submenu displays as a strip below the main menu, and changes according to the current menu item. Both of these menuing systems are easy to use and implement, and offer many possibilities for user-friendly navigation.

Take a look at these interesting and functional menuing systems! I’m sure they can enhance your site!

Tutorial: Image Button Bar Menu/Submenu

There are several menu alternatives to the standard Thesis navigation menu. One of them is the Image Button Bar Menu/Submenu, which can either be used as the main navigation — as it is on this site — or as a submenu to the Thesis nav bar, as it is on Jamie Ridler’s site.

The Button Bar is simple to set up and use. Each button has a selected and unselected image. The Button Bar can handle a home/front page, pages, posts, category pages, and tag pages. In conjunction with the Contextual Menu, it can handle parent/child page relationships, as well.

The code to put in custom_functions.php

Following is the code you put into your custom_functions.php file. Read the code comments and the description which is below the code. Values in UPPERCASE must be replaced:

/* =====IMAGE BUTTON BAR MENU/SUBMENU===== */
/* No buttons selected. 
All buttons are unselected. All button images are unselected versions. */
function button_nav_menu_none_selected() {
?>
	<div id="button_nav">
		<ul>
			<li><a href="URL-PAGE-1"><img src="FULL-PATH-TO-UNSELECTED-BUTTON-IMAGE1" alt="PAGE1-NAME"</a></li>
			<li><a href="URL-PAGE-2"><img src="FULL-PATH-TO-UNSELECTED-BUTTON-IMAGE2" alt="PAGE2-NAME"</a></li>
		</ul>
	</div>
<?php
}
/* Page 1 button is selected. 
Page 1 button is selected version, Page 2 button is unselected version */
function button_nav_menu_PAGE1_selected() {
?>
	<div id="button_nav">
		<ul>
			<li><a href="URL-PAGE-1"><img src="FULL-PATH-TO-SELECTED-BUTTON-IMAGE1" alt="PAGE1-NAME"</a></li>
			<li><a href="URL-PAGE-2"><img src="FULL-PATH-TO-UNSELECTED-BUTTON-IMAGE2" alt="PAGE2-NAME"</a></li>
		</ul>
	</div>
<?php
}

/* Page 2 button is selected.
Page 1 button is unselected version, Page 2 button is selected version */
function button_nav_menu_PAGE2_selected() {
?>
	<div id="button_nav">
		<ul>
			<li><a href="URL-PAGE-1"><img src="FULL-PATH-TO-UNSELECTED-BUTTON-IMAGE1" alt="PAGE1-NAME"</a></li>
			<li><a href="URL-PAGE-2"><img src="FULL-PATH-TO-SELECTED-BUTTON-IMAGE2" alt="PAGE2-NAME"</a></li>
		</ul>
	</div>
<?php
}

/* Determines which button version to use. */
/* Example is for pages only. Other kinds of documents below. */
function button_nav_menu() {
	/* For pages only: The first button is selected */
	if (is_page('PAGE1-NAME'))
		add_action('thesis_hook_after_header', 'button_nav_menu_PAGE1_selected', '90');
	/* For pages only: The second button is selected */
	elseif (is_page('PAGE2-NAME'))
		add_action('thesis_hook_after_header', 'button_nav_menu_PAGE2_selected', '90');
	/* Defaults to no buttons selected */
	else
		add_action('thesis_hook_after_header', 'button_nav_menu_none_selected', '90');
}
add_action('thesis_hook_after_header', 'button_nav_menu');

	/* =====SAMPLE STATEMENTS FOR OTHER KINDS OF DOCUMENTS===== */
	/* Add or substitute these in Function 4 as needed */
	/* For both blog home pages and static front pages only */
	/*elseif (is_front_page())
		add_action('thesis_hook_after_header', 'button_nav_menu_PAGE1_selected', '90');*/
	/* For posts only */
	/*elseif (is_single('POST-NAME'))
		add_action('thesis_hook_after_header', 'button_nav_menu_PAGE1_selected', '90');*/
	/* For category pages only */
	/*elseif (is_category('CATEGORY-NAME'))
		add_action('thesis_hook_after_header', 'button_nav_menu_PAGE1_selected', '90');*/
	/* For tag pages only */
	/*elseif (is_tag('TAG-NAME'))
		add_action('thesis_hook_after_header', 'button_nav_menu_PAGE1_selected', '90');*/

There are four functions provided, enough for two buttons.

Function 1 is the unselected state for all buttons, that is, no button has been selected.
1. There need be only one of this function for all buttons.
2. There needs to be one “<li>” statement for each button, so if you have 5 buttons, there will be 5 statements.
3. For each “<li>” statement you will need to provide a URL to the page, the full path to the unselected button, and a page name (for page identification as well as SEO).

Functions 2 and 3 show selected states for 2 different buttons. In function 2 the first button is selected, and in function 3 the second button is selected.
1. There needs to be one of these functions for each button, so if you have 5 buttons, you will have 5 functions.
2. Rename the function to reflect the page it is for. For example, if the page is about red things, name the function “button_nav_menu_red_selected”
3. Like Function 1, you need one “<li>” statement for each button, so if you have 5 buttons, there will be 5 statements.
4. Like Function 1, for each “<li>” statement you will need to provide a URL to the page, the full path to the unselected button, and a page name (for page identification as well as SEO).
5. Make sure that you provide the image path to the one selected button that the function is handling.

Function 4 determines which button version is the right one to use, based on the current page. The example is just for pages, but other kinds of documents can be used (see below).
1. There is only one of these functions for all buttons.
2. In this example, there are 2 buttons for pages, so we have 3 statements: button 1 selected, button 2 selected, and no buttons selected.
3. Add 1 “elseif” pair of statements (consisting of the “elseif” statement and the “add_action” statement) for each button above 2 that you have.
4. Change the PAGE1-NAME in the “elseif” statement. It’s the actual title of the page as you see it in your blog. For example, if the page displays as “Red Page” then the page name is “Red Page.”
5. Change the function name in the “elseif” statement to that of the page function being called. Following the example above, the red page function would be changed to “button_nav_menu_red_selected”.

Below Function 4 are sample statements for other kinds of documents the Image Button Bar Menu/Submenu can handle: home/front pages, posts, categories, and tags. Of course, the home/front page statements would be used only when the button bar is used for the main menu. Add or substitute statement pairs in Function 4 as needed. Note that you must match the elseif statement pair with the document type! A page is not a post is not a category is not a tag!

The code to put in custom.css

The following code should be put into your custom.css file. Read the code comments and the description which is below the code:

/* =====IMAGE BUTTON BAR MENU/SUBMENU===== */
#button_nav {
	list-style: none; 
	/* optional background color */
	/*background:#FFFFFF none repeat scroll 0 0;*/
}

#button_nav ul {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	/* determines vertical and horizontal placement*/
	margin: -1em 0 -.4em .26em;
}

#button_nav li {
	display: inline;
	/* uncomment border for testing*/
	/*border: 1px solid #000000;*/
	/* determines size of button box*/
	padding: 1.1em -.5em 0em -.5em;
	/* determines spacing between button boxes*/
	margin: 0 -.4em 0 0;
}

There are few adjustments to be made in the css code, mainly vertical alignment, and adjustments to get the button box size right. The code comments tell you where to do this. The values in the code are for this site.

Tips for getting it all working:

1. Go ahead and make button images for the button menu, or at least right-sized dummies to work with. Remember that you need to have 2 button images for each button: selected and unselected.
2. Complete Function 1 first. It contains all the lines for your buttons in their unselected state.
3. Cut-and-paste the button lines from Function 1 into Functions 2 and 3. Then just change the selected button image URL according to which function it is.
4. If you need more than 2 buttons, just copy the entire function 1, rename it, and change the URL of the selected button.
5. I suggest uncommenting the “border” property line while you’re working on button box size. It will display a black border around the button box. Note that the button box will always be a little larger than the button image. Delete the “border” property line or comment it out when you are finished.

I hope these instructions have been clear and helpful. And I hope you are encouraged to use the Image Button Bar Menu/Submenu in your next project! As always, your comments and questions are welcome, either here in the article comments, or by emailing me via the “Contact” button at the top of the page.

©2009 Michael L Nichols. All rights reserved.

What next?

Your comments are always welcome, and are important to this blog’s community! Leave a comment now, or read the comments.

You can find several related articles in the “Related Articles” list below. In the footer you will find a lists of Popular Posts, Recent Posts, and you may browse by Categories, or tags. There’s also a Google Custom Search box to help you find just what you want.

Get free updates by RSS or email!

If you have enjoyed this article, please consider subscribing to article updates, using an RSS reader, or by email. It’s free and is a great way to make sure you don’t miss a single article! I also invite you to follow me on Twitter!

Why not share this article with others!

Share this article with your friends using your favorite social media service, such as StumbleUpon, or Digg. Check out the icons below under “Share This Article With Others” for other social media, including del.icio.us, Technorati, Sphinn, Friendfeed, FaceBook, MySpace andLinkedIn! You can also email or print the article, and even tweet it using Twitter!