Tag Archives: Custom Element

New Article in Tips! How to Build Two-Column Sidebar Boxes

We often don’t think of the possibilities of two-column sidebar boxes because the multimedia box is so predominant. However, Thesis makes it easy to build and use sidebar boxes that span both columns of the sidebars. They can be placed above or below the multimedia box or at other locations along the sidebar — even at the bottom.

These boxes might be used for an opt-in box form, advertisements, pictures of Spot, a flash movie, or almost anything you might dream up to put in them. In fact, many people use them instead of the multimedia box because of their flexibility.

A new article, “How to Build Two-Column Sidebar Boxes,” shows you how simple it is to build these sidebar boxes, and provides illustrations of where they can be located on the sidebar. It is an easy-to-follow tutorial that will leave you itching to try it!

Later today I will publish two more articles for newbies (and oldies, too!) about basic CSS and PHP syntax and how they are used in the custom.css and custom_functions.php file.

How to Build Two-Column Sidebar Boxes

Many Thesis users want to use boxes spanning two sidebars for announcements, images, ads, or other purposes. Requests for instructions for making and using sidebar boxes are frequent on the DIYthemes Forums.

Sidebar boxes are easy to build and use, and this article gives you all you need to get started. The illustrations show how using different hooks places the sidebar box in different locations along the sidebar.

Build a two-column box in custom.css

Put the following code into your custom.css file. The code’s comments tell you how to set up the box.

It is very important that the width of your sidebar box not exceed the sum of your sidebar column widths. If it does, the best that will happen is that it will hang over into the border around your page — and it can completely mess up your sidebars if very much wider than it should be!

/* Build a two-column box for sidebars */
#sidebar_two_column_box {
	/* width should be no wider than the sum of your sidebar column widths */
	width: 390px;
	/* height to suit */
	height: 140px;
	/* border width style color */
	border: 1px solid #000000;
	/* background if desired */
	background: #FFFFFF;
	/* keeps box contents away from the edges of the box */
	padding: 1em 1em 1em 1em;
	/* separates box from elements around it */
	margin: 2em 0 2em 0;
}

Put the box to work in custom_functions.php

The basic job of the following function is to wrap your text, images, or ads in a div whose id calls the box-building code you put in custom.css — think of it as a container for your box. Within the div is the code for the contents of the box. Then after the function, the “add_action” statement hooks the box where you want it to go.

Here is the basic function to put into your custom_functions.php file, along with all the possible “add_action” statements for the sidebars. The “add_action” statements will be discussed individually below.

/* Two-column box in sidebars */
function sidebar_box() { 
?>
	<div id="sidebar_two_column_box">
		YOUR CODE OR TEXT
	</div>
<?php
}
/* 1. hooks sidebar box above multimedia box & sidebars */
add_action('thesis_hook_before_sidebars','sidebar_box');
/* 2. hooks sidebar box below multimedia box & above sidebars */
add_action('thesis_hook_after_multimedia_box','sidebar_box');
/* 3. should hook sidebar box after the last widget in sidebars */
add_action('thesis_hook_after_sidebars','sidebar_box');
/* 4. hooks sidebar box below the last widget in sidebar 1 */
add_action('thesis_hook_after_sidebar_1','sidebar_box');
/* 5. hooks sidebar box below the last widget in sidebar 2 */
add_action('thesis_hook_after_sidebar_2','sidebar_box');

Where the different hooks locate the sidebar box

You can’t help but have noticed that there are 5 “add_action” statements. Each one places the sidebar box in a different spot along the sidebars. All of the possible sidebar hooks are listed for your convenience. Important! You can only use one “add_action” statement at a time, so delete or comment out the ones you will not be using!

Figure 1: Sidebar box above the multimedia box
Figure 1: Sidebar box above the multimedia box

The first add_action statement uses the hook “thesis_hook_before_sidebars”, which puts the sidebar box above the sidebars and the multimedia box, if it is present.

Figure 2: Sidebar box below the multimedia box and above the sidebars
Figure 2: Sidebar box below the multimedia box and above the sidebars

The second statement uses the “thesis_hook_after_multimedia_box” hook, which puts the sidebar box below the multimedia box if it is present, and above any widgets in either sidebar.

Figure 3: Sidebar box below the sidebars
Figure 3: Sidebar box below the sidebars

The third statement uses the “thesis_hook_after_sidebars” hook, and puts the box below the last widget in the sidebars — that is, if it can be made to work! More often than not, it places the box in the middle of your widgets! The better solution is to determine which of your sidebars is longer, and use the “add_action” statement for that sidebar to place the box below the sidebars, as in Figure 3.

In Conclusion

Though short, this article has shown you the principles of how to build a sidebar box, how a function wraps around the div that calls the box, and how to put the box where you want it.

I hope you find this article useful on your blog! Remember that your comments are always welcome, and that you can email me directly using the “Contact” button in the menu.

©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!

New Article! Create an Element and Place It on the Screen

One of the most frequent tasks in customization is creating a screen element and placing it. It could be an ad, or an image, or an opt-in box. Despite all these different uses, screen elements share a basic setup — and this article shows you how to do it!

Create an Element and Place It on the Screen” first shows you how to set up a basic box with an id in custom.css and a simple function in custom_functions.php. Then it provides you with a real-life example of putting a “Subscribe by RSS” phrase and icon on a Multilevel Dropdown menu bar. The example includes all the code required, plus illustrations showing the various stages of getting the subscribe box into place.

I have lots of interesting and useful articles on tap, some big, some small. For example, a couple of little articles on finding hex color codes and controlling spam with the .htaccess file. Then a larger article on how to build and place two-column sidebar boxes.

On another matter, my Resources tab is empty right now, and may remain so. The DIYthemes Forums have started a new section, “Resources and Tutorials” that does much of what I intended my Resources section to do. Grouped under headings are listed external internet resources for many Thesis subjects, which is exactly what my Resources section is intended to do.

As a basic principle of this site, I have said that I will not duplicate material found elsewhere, so I’m thinking about doing away with the section and finding something else to fill its place.

What do you think?

Create an Element and Place It on the Screen

All Thesis users at some time want to put a new element somewhere on the screen — from an announcement, to ads, to a picture of Spot in the header. Wherever you want to put it, Thesis almost certainly will let you!

The basic principle for creating elements and placing them on the screen is almost always the same two-step process:

1. In custom.css create an id for building the element, and maybe an id or class for styling the contents.

2. In custom_functions.php create a function to hold the box contents, then hook it somewhere.

This tutorial will show you the basics of how to create an element, then provides a real-life example of actually creating an element and placing it on the screen.

Creating the container element in custom.css

First, let’s create the element id, which defines the size and other properties of the box that will hold the content. Note that when you create your own class or id, you do not have to put “.custom” in front of it.

/* create a custom element id */
#custom_element {
	/* width for the box */
	width: 50px;
	/* height for the box */
	height: 60px;
	/* background if desired */
	background: #FFFFFF;
	/* border if desired or for testing */
	border: 1px solid #000000;
	/* padding to keep the contents away from the border */
	padding: 1em 1em 1em 1em;
	/* margin outside box to separate if from other elements */
	margin: 0em 0em 0em 0em;
}

Now a few notes on the code:

1. The width and height are obvious. But make sure that it isn’t larger than the area where you want it to go, otherwise it will hang over the edges! For example, if you make a 600 pixel box for a 550 pixel content column, the box will partially cover the sidebar.

2, If you don’t want a background for the element, either delete the property or comment it out. But the background may be useful in testing, so don’t get rid of it too soon! The color code must in in hex — remember the pound sign!

3. I find a border good for testing placement of the element sometimes, so it’s a good idea to just comment it out if you don’t need it right away. Same instructions for the color code as the background.

4. Padding is useful, especially for text, to keep the contents from bumping against the borders of the box. Remember the padding numbering sequence goes clockwise from the top: top, right, bottom, left. The first number is the top, the second the right, and so on. The numbers can be negative, and can be a decimal, for example “-5.5em”. Positive numbers push the element away, and negative numbers pull it toward them. Always remember to add the “em” or “px” units, or it won’t work!

5. The margin will be used for moving the element around the screen. The numbering sequence and number instructions are the same as for padding.

Creating the function and hooking it to a Thesis hook

The function in custom_functions.php declares the element-building id you just made, and within that, your content. It is followed by a statement that attaches the function to a Thesis hook. The code looks like this:

function custom_content_element() {
?>
	<div id="custom_element">
		PUT YOUR CONTENT HERE
	</div>
<?php
}
add_action('THESIS_HOOK_NAME','custom_content_element');

1. This is a standard Thesis function.

2. Note that we’re going to be using HTML, so PHP needs to be turned off with a “?>” statement at the beginning of the function, and turned back on at the end of the function with a “<?php” statement.

3. The “div” associates the content the function will hold with the container id you created in custom.css. Be sure to close it with a “</div>”.

4. The “PUT YOUR CONTENT HERE” is obvious. It’s where the HTML code goes that makes up the contents of the container you created.

5. Now for the hook statement. Put your Thesis hook where it says “THESIS_HOOK_NAME.” Put the name of the function you just created in the second part of the statement. A good visual reference for the hooks is Roberto Gerola’s site.

That’s all there is to it! It is so simple, yet so powerful that it forms the basis of many customizations in Thesis. Now for a simple real-life example of how it works.

An example of creating, placing, and moving a “Subscribe By RSS” element

A reader asked how to move the “Subscribe” tab on his Multilevel Dropdown menu to the right end of the menu bar. Unfortunately, it can’t be done like it can be with the Thesis nav menu. So I suggested building an element to place the “Subscribe by RSS” where he wanted it. That gave me just the right example for this article that I had been planning.

Put the code into custom.css and also create some styling for the words

Following is the code to do this:

/* RSS in nav bar*/
#subscribe_element {
	/* BOX PROPERTIES */
	/* width for the box */
	width: 13.5em;
	/* height for the box */
	height: 1.65em;
	/* background if desired */
	background: #408000;
	/* border if desired or for testing */
	/*border: 1px solid #000000;*/
	/* padding to keep the contents away from the border */
	padding: 0.25em 0em 0em .5em;
	/* margin outside box to separate if from other elements */
	margin: .3em 0em 0em 10em;
	/* we want the box to float to the right */
	float: right;
	/* TEXT STYLING */
	/* align the text to the left */
	text_align: left;
	/* make the words uppercase */
	text-transform: uppercase;
	/* make the font bold*/
	font-weight: bold;
	/* size of font */
	font-size: 1.15em;
	/* height of line */
	line-height: 1.1em; 
	/* font family if desired*/
	font-family: Verdana, Arial, sans-serif;
	/* cursor a little hand */
	cursor: pointer;
	/* font color */
	color: #FFFFFF; 
}

/* make the link white and no underline */
#subscribe_element a:link { color:#FFFFFF; text-decoration:none; }

/* make the font white when visited, no underline*/
#subscribe_element a:visited { color:#FFFFFF; text-decoration:none; }

/* cursor hovering over element */
#subscribe_element a:hover{ color: #FFFFFF; text-decoration: underline; }

This id definition in custom.css is a handy-dandy all-in-one contraption that defines the box as well as the text that will go in it. I could have written two id definitions — one for the box and one for the text — but I am too lazy.

The code is heavily commented, so I won’t go into detail about the more obvious properties and values. Incidentally, the values are the ones used to build the box in the following illustrations.

The padding property determines the space around the letters or objects inside a box. The margin property moves the box around. Refer to the instructions above about how the padding and margin numbers work.

Create a function in custom_functions.php and hook it to the menu bar

This function contains the code that builds the box, and within that box, the code that links words and an image to a feed URL.

/* RSS in nav bar */
function rss_subscribe() {
?>
	<div id="subscribe_element">
		<a href="http://thesisthemetools.com/?feed=rss2">subscribe by rss</a>
		<a href="http://thesisthemetools.com/?feed=rss2"><img src="http://thesisthemetools.com/wp-content/themes/thesis/images/icon-rss.gif"></a>	
	</div>
<?php
}
add_action('thesis_hook_after_header','rss_subscribe');

1. Notice the div with the id of the “subscribe_element” box and text styling in custom.css. It holds all the HTTP in the function, and the id tells the contents how to behave.

2. There are two similar “href” statements: one is for the word “subscribe” and one is for the RSS icon. Both of them use the Thesis Theme Tools rss URL. (Actually, I use Feedburner, but I wanted to keep it simple.)

3. Note that I’m using an image from the Thesis /images folder, not the /custom/images folder. There is also an email icon in there if you need it.

4. The Thesis hook “thesis_hook_after_header” puts the element right into the nav bar.

Illustrations of positioning the element

Figure 1: Initial positioning of the element
Figure 1: Initial positioning of the element

The “thesis_hook_after_header” hook in custom_functions.php and the “float:right” property in custom.css put the box right into the menu bar. Most of the time, the combination will get you close. If not, try another hook or float it to the other direction.

Notice that I have used the “background: #FFFFFF” property to make the box white so I can see it better as I move it around. Other times I use the border property to see the box, according to the color of the background behind it.

Figure 2: Start moving the box around with the margin property
Figure 2: Start moving the box around with the margin property

I started moving the box down using the “top” value in the margin property. It only took .3em to center it on the bar. Then 10em in the “left” value nudged it a little to the right.

Figure 3: Applying padding to get the words centered
Figure 3: Applying padding to get the words centered

Again, it only took a little pushing to get the words centered in the box: .25em from the top and .5em from the left.

Figure 4: The completed RSS Subscribe box
Figure 4: The completed RSS Subscribe box

Once I got it positioned, I removed the white background and Tah-Dah! there’s the subscribe box in all its glory! You can see it in action on my Thesis Demo site.

I hope you have found this article informative and helpful. Please feel free to comment below, or you can send me an email by using the “Contact” button in the menu.

©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!