It just aint worth it…

Do you realize that you have far more flexibility to make your own box in html? When you make a simple box, it is a multimedia box! You can put any type of code in it you want. You can insert images, video, php code, javascript. Anything you put in the Thesis multimedia box or the feature box, you can put into your own custom box!

Don’t get me wrong, the mm box and feature box are cool things to have but if you really want to take your customization to the next level then read on…

Look how limited the feature box is. You can only put it above content or above content and sidebars. Not only that, just to get it working is kind of a pain in the rear. Look at the multimedia box, it seems to be forever stuck in the upper right hand side.

People, look outside the box (pun is intentional) Make your own custom box and put it wherever you want

How do you make your own box? Check out this tutuorial

Now, just to give you an idea of what I’m talking about. I made a simple box and just for the heck of it I placed it in a bunch of places. Check it out…

Now remember, you can make these boxes any way you want. The possibilities are endless. Stretch them any way you want. You can make them wider, smaller, bigger, taller, different colors, different borders, and all the while, inserting your own custom code inside them!

I left the multimedia box in the example to show you how stagnant it is and how dynamic your own custom box can be

Check out the hook map to see where all the hooks are placed

Check it out…

First you want to create the box with a simple function in your custom.functions.php file…

function mymmbox() { ?>
<div class="mymmbox"></div>
<?
}

I gave it a class name of “mymmbox” so that I can style it in my custom.css file. Name it whatever you want

Next I styled it in my custom.css file

.custom .mymmbox {
width: 91em;
height: 20em;
border: 1px solid
margin-left: 2em;
margin-bottom: 2em;
}

Then I decided I wanted to place it under my header so I added it with a hook

function mymmbox() { ?>
<div class="mymmbox"></div>
<?
}
add_action(’thesis_hook_after_header’ , ‘mymmbox’);

So there you have it. A real basic box that you can put anything into. Whatever you want to put in the new box, you place the code between the two <div> tags in the function.

You can now move it around anywhere you want with hooks in your custom.functions.php file, and you can change everything from the color, borders, size, etc, all in your custom.css

Dashboard —-> Appearance —-> Thesis Options….

Pick your choices from the drop down menus. Hit the save button.

]]> http://www.thesishacker.com/change-font-of-multimedia-box/feed 0 http://www.thesishacker.com/add-text-with-styling-to-multimedi-box http://www.thesishacker.com/add-text-with-styling-to-multimedi-box#comments Tue, 27 Jan 2009 02:38:25 +0000 Nasty http://www.thesishacker.com/?p=864 If you want to add some basic text to the mm box with some styles to it go to Dashboard —-> Appearance —-> Thesis Options…

I gave the text an id of “mmtext” so I could style it in my custom.css. You can name it whatever you want.

In your custom.ss file add the following code. You can put it anywhere you want but I recommend putting it at the top. Remember, once you make the change, save it, and upload the new file to your server. Always describe what you’re doing by putting your descripton between the comment tags /*  */ at the beginning shown below in green. The comments aren’t shown on your rendered page and it just makes things easier for you to remember…

/*mm box text styling*/
.custom #mmtext {font-size: 2em;
font-style: italic;
color: red;
}

This is a real basic styling. Use your imagination to create your desired effect.

Dashboard —-> Appearance —-> Thesis Options….

Choose “custom code” from the drop down menu. Type whatever you want in the yellow box. Hit the save button.

In your custom.ss file add the following code. You can put it anywhere you want but I recommend putting it at the top. Remember, once you make the change, save it, and upload the new file to your server. Always describe what you’re doing by putting your descripton between the comment tags /*  */ at the beginning shown below in green. The comments aren’t shown on your rendered page and it just makes things easier for you to remember…

/*move the mm b0x down*/
.custom #multimedia_box { margin-top: 10em;}

Change the em’s to whatever fits your taste

/*border around mm box*/
.custom #custom_box {border: 5px solid #000000; }

You can change the value of px to whatever you want

You can change the hexidecimal # to whatever you want

You can change solid to one of the following….

dashed, dotted, double, groove, inset, outset, ridge

If you don’t want a border just type in the word “none”

If you’re using the mm box for rotating images use this…

/*mm box color*/
.custom #image_box { background: #ff9955; }

If you’re using the mm box for embedding video use this…

/*mm box color*/
.custom #video_box { background: #ff9955; }

If you’re using the mm box for custom code use this…

/*mm box color*/
.custom #custom_box { background: #ff9955; }

Replace the hexidecimal # with any value you want.  To get a choice go here to the cool color picker.

In your custom.ss file add the following code. You can put it anywhere you want but I recommend putting it at the top. Always describe what you’re doing by putting your descripton between the comment tags /*  */ at the beginning shown below in green. The comments aren’t shown on your rendered page and it just makes things easier for you to remember…

/*custom mm box size*/
.custom #custom_box {  height: 20em; }

Now your box will look like this…..

You can change the height to whatever numercial value you want.  You can also add a width attribute and style it the same way.  Something like this….

.custom #custom_box { height: 20em; width 18em; }

You can also use percentages instead of em’s.  Check out the following example…

.custom #custom_box { height: 40%; width 10%; }