Terrys Playpen: Leap of Faith . . . Editing your template for Thickbox

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!

8 comments:

david mcmahon said...: Hi El Tel,

I think you're enjoying this!

David; 21 May 2007 at 04:08
Fletch said...: Absolutely!

But it will only become 'satisfying' when visitors begin to get adventurous and start to use the 'tips' and 'hacks'.

I shall watch with interest.; 21 May 2007 at 04:56
Shrink Wrapped Scream said...: Well, bugger me!

I only dipped in to thank you for picking up on that thread on old Ghengis, and here I seem to have found a veritable Godsend..

Far too late for me to follow any advice this early on in the morning, but wow, (she said in a quiet voice) me-thinks 'tis certainly worth a go!

As the legend goes; "I'll be back."; 24 May 2007 at 01:47
Fletch said...: Thanks Carol.

Nothing like receiving a 'genuine' compliment. And I certainly hope you can find something here that you'd want to use.

That's what this effort is all about which, in its own way, takes away any pressure to continuously update the blog.

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

To change the subject: during recent research on Jersey and Guernsey on a totally unrelated subject, I was astonished to learn that, along with the previous two mentioned, the IoM isn't a member of the EU! Have always believed it to be integral to the UK.

Actually used the same exclamation you used in your comment when I 'discovered' that gem. Never too old to learn something new!; 24 May 2007 at 14:51
John said...: Hi Terry,

I just c/p'd this code in my template and am eager to try it, so here's hoping this complete newb spaced everything right ;)

Thanks again for your instruction in these tutes.

John; 17 July 2007 at 22:10
John said...: Hi Terry,

Thanks for visiting my site. I seem to have a problem with my most recent post. When I click on the photo for a larger image, Thickbox says loading and the photo never appears. Have you experiencd this before?; 18 July 2007 at 20:18
John said...: Hi Terry,
Just wanted to thank you for the help in getting the Thickbox working properly on my blog. I had, as you mentioned, left a space in between the "1600" and the forward slash.

regards,

John; 19 July 2007 at 17:32
Fletch said...: John,

Terrific result. Visited the site and took a look at the post now that you've tweaked it some more. You wouldn't think that inserting or leaving a 'space' in the code would do that, but it does.

Stand by for the next tutes.; 19 July 2007 at 17:55

Top Menu

Saturday, 19 May 2007

Leap of Faith . . . Editing your template for Thickbox

8 comments: