Terrys Playpen: Saturday, 19 May 2007

This is your 'leap of faith'. This is where you have to make a decision as to whether stepping out into the unknown is worth the end result. I have shown you what you can achieve; you have to decide whether it is worth the effort. I will hazard a guess that most of you decide that it probably is!

So, let us make a start.

---------------------------------------------------------------------------------

1. Call up your page in a new window and check that you're 'signed in'. You should now have this tutorial and your homepage open, either as two separate windows or two tabs (IE7 or Firefox or whatever), and you will need to switch between windows to complete the various steps I will outline.

---------------------------------------------------------------------------------

2. Click on 'Customize' (I vill zay zis only vunce - all editing is being done on YOUR page!).

---------------------------------------------------------------------------------

3. Choose to 'Edit HTML' when you are faced with these choices.

---------------------------------------------------------------------------------

4. Save your template (but see below) . . .

---------------------------------------------------------------------------------

5. My preference for saving a template is to copy the template from the editing window by positioning the cursor in the window, pressing 'Ctrl+A', then 'Ctrl+C' (this will select all the text in the window and copy it to the clipboard). Now paste the copied text into your text editor (Notepad or one of the editors I've recommended previously), by opening it and pressing 'Ctrl+V'. Then SAVE that as a text file, with a name you can recognise easily, and in a place that, if you need to, you can find it quickly.

Note: do NOT use a word-processing package like 'Word' as this will corrupt the text you've just saved. For the 'geeky', the difference is between UTF-8 and UTF-16, but that's another story for another time!

---------------------------------------------------------------------------------

6. Find the last 'close brace' above the '</head>' tag. You could scroll down (see image), but the easiest way is to click the 'Edit ---> Find on this page' link in your browser and type '</head>' (without the quotes) into the box and click 'Next'.

---------------------------------------------------------------------------------

7. Insert two or three returns between the curly bracket and the line that reads "]]></b:skin>". If your template doesn't have this line, insert the following code just above the '</head>' tag and it will still work! Copy & paste the code in the box:


/* ----- thickbox settings ----- */



#TB_window {

 font: 12px Arial, Helvetica, sans-serif;

 color: #333333;

}



#TB_secondLine {

 font: 10px Arial, Helvetica, sans-serif;

 color:#666666;

}



#TB_window a:link {color: #666666;}

#TB_window a:visited {color: #666666;}

#TB_window a:hover {color: #000;}

#TB_window a:active {color: #666666;}

#TB_window a:focus{color: #666666;}



#TB_overlay {

 position: fixed;

 z-index:100;

 top: 0px;

 left: 0px;

 background-color:#000;

 filter:alpha(opacity=75);

 -moz-opacity: 0.75;

 opacity: 0.75;

 height:100%;

 width:100%;

}



* html #TB_overlay { /* ie6 hack */

     position: absolute;

     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');

}



#TB_window {

 position: fixed;

 background: #ffffff;

 z-index: 102;

 color:#000000;

 display:none;

 border: 4px solid #525252;

 text-align:left;

 top:50%;

 left:50%;

}



* html #TB_window { /* ie6 hack */

position: absolute;

margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');

}



#TB_window img#TB_Image {

 display:block;

 margin: 15px 0 0 15px;

 border-right: 1px solid #ccc;

 border-bottom: 1px solid #ccc;

 border-top: 1px solid #666;

 border-left: 1px solid #666;

}



#TB_caption{

 height:25px;

 padding:7px 30px 10px 25px;

 float:left;

}



#TB_closeWindow{

 height:25px;

 padding:11px 25px 10px 0;

 float:right;

}



#TB_closeAjaxWindow{

 padding:7px 10px 5px 0;

 margin-bottom:1px;

 text-align:right;

 float:right;

}



#TB_ajaxWindowTitle{

 float:left;

 padding:7px 0 5px 10px;

 margin-bottom:1px;

}



#TB_title{

 background-color:#e8e8e8;

 height:27px;

}



#TB_ajaxContent{

 clear:both;

 padding:2px 15px 15px 15px;

 overflow:auto;

 text-align:left;

 line-height:1.4em;

}



#TB_ajaxContent.TB_modal{

 padding:15px;

}



#TB_ajaxContent p{

 padding:5px 0px 5px 0px;

}



#TB_load{

 position: fixed;

 display:none;

 height:13px;

 width:208px;

 z-index:103;

 top: 50%;

 left: 50%;

 margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */

}



* html #TB_load { /* ie6 hack */

position: absolute;

margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');

}



#TB_HideSelect{

 z-index:99;

 position:fixed;

 top: 0;

 left: 0;

 background-color:#fff;

 border:none;

 filter:alpha(opacity=0);

 -moz-opacity: 0;

 opacity: 0;

 height:100%;

 width:100%;

}



* html #TB_HideSelect { /* ie6 hack */

     position: absolute;

     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');

}



#TB_iframeContent{

 clear:both;

 border:none;

 margin-bottom:-1px;

 margin-top:1px;

 _margin-bottom:1px;

}

 

/* ----- end of thickbox settings ----- */


/* ----- start of Terry's settings ----- */


.img_left {     /* terrys hack */

 float: left;

 margin-right: 20px;

 margin-bottom: 6px;

 }

 

.img_right {     /* terrys hack */

 float: right;

 margin-left: 20px;

 margin-bottom: 6px;

 }



.clear {     /* terrys hack */

 clear: both;

 }



.dropcap {     /* terrys hack */

 font-family: times;

        color: #8CA3BB;

        font-size: 70px;

        float: left;

        padding-right: 2px;

        padding-top: 2px;

        line-height: 60px

        }

 

/* ----- end of Terry's settings ----- */

---------------------------------------------------------------------------------

8. This is what it should look like after you've pasted in the code. Still with me?

---------------------------------------------------------------------------------

9. Find the '</head>' tag again, then copy/paste the following code just above it:


    <script src='http://www.tapmal.com/thickbox/jquery.js' type='text/javascript'/>


    <script src='http://www.tapmal.com/thickbox/thickbox.js' type='text/javascript'/>

---------------------------------------------------------------------------------

10. This is what your template should look like after you've pasted in the relevant code.

A brief explanation: the code is telling the blogger engine where to find the JavaScript sources for the Thickbox to work. I have currently pointed it to my own server, which will always be available with the most up-to-date "js" scripts for this function. You see, I use this path as well, so you can be certain that as long as I am on the web, you don't have to worry about where to get your JavaScript or your animated 'loading' GIF.

---------------------------------------------------------------------------------

11. You can click on the 'PREVIEW' link, but you won't notice any change to how your blog displays, and that is because the bits of code we've put in don't actually change how your blog is displayed UNTIL you call the specific function. But more about that in the next post.

---------------------------------------------------------------------------------

Now 'SAVE' your template (you already have the original so you don't have to be too concerned) and 'View' your blog. No difference? Bravo! That means all the 'tweaking' you've done was completed successfully!

So far, so good! Now you just have to wait for the second part to see how to 'edit' each of your picture posts to achieve the 'Thickbox' effect.

Come back again, soon!

This is just here to tell you that I've managed to crack the prickly problem of making 'Thickbox' work with Blogger-uploaded pictures.

More will be added to this post . . . standby!

---------------------------------------------------------------------------------

Update: - (later in the day)

We will have to tackle this in two parts.

The first is the 'edit' you need to apply to your template.
The second will be what you need to do to get your picture(s) to display in the sexy Thickbox format.

The next couple of posts will deal with each scenario ~~and, just to show that everything actually works as it should, I will display the larger graphics as a Thickbox image!~~

Edit: change of plan - I will display the pictures as full-sized images so that you can READ the text the image displays!

If you are still not clear about what a 'Thickbox' display looks like, you can scroll down the page to a couple of earlier posts, or if you prefer, click on the following links: Test Post and Picture displays - 101b.

All this is in response to something started by David McMahon, who emailed me with a 'suggestion' that I respond to some questions on his blog, and then subsequent questions and comments by papoosue, phaseoutgirl and B.T.Bear (esq.) (who does a mean tutorial, too)!

Gather round, and the first to claim success will get an 'honourable mention' on David McMahon's authorblog.

Top Menu

Saturday 19 May 2007

Leap of Faith . . . Editing your template for Thickbox

Cracked it . . .