This is a short tutorial that aims to explain how to place a search box at the top of the sidebar, above the navigation menu. This will require some fiddling with code – don’t be afraid! I’ll do my best to walk you through it.

This tutorial assumes the user has bought a copy of Rapidsearch 2.0.

First the code for a search box is required. An example (that you are encouraged to use) is shown below:

1
2
3
4
5

<div id="panel">
        <form action="PATH_TO_YOUR_SEARCH_PAGE" method="get">
            <input type="text" name="query" id="search_site" value="DEFAULT_TEXT"         onclick="clickclear(this, 'Search within this site')" onblur="clickrecall(this,'Search within this site')" />
        <input type="submit" id="search_button" value="Search"/></form>
    </div>

1) To use this code, open your website in Rapidweaver, press “Themes”. Select the theme you use for your site, and make a copy of it. Select the copy, right click and press “Reveal Theme Contents in Finder”. This will open a Finder window containing the files required to make your theme … your theme.

There are two files that need editing in order to make our search bar work: “index.html” and “styles.css”. Both should be visible in the Finder window.

2) Open “index.html” in a text-editor. I use TextWrangler, because it is free and provides syntax highlighting. If you are a serious coder, try Coda or Eclipse. Scroll down until you see:

<div id="navcontainer">

Copy the search box code (displayed above) just below this line, then change DEFAULT_TEXT to whatever text you want to be displayed inside the search box. You need to change PATH_TO_YOUR_SEARCH_PAGE to the path to your search page as well. It should have changed from this:

<div id="navcontainer">

To this:

1
2
3
4
5
6

<div id="navcontainer">
             <div id="panel">
            <form action="PATH_TO_YOUR_SEARCH_PAGE" method="get">
    <input type="text" name="query" id="search_site" value="DEFAULT_TEXT" onclick="clickclear(this, 'Search within this site')" onblur="clickrecall(this,'Search within this site')" />
    <input type="submit" id="search_button" value="Search"/></form>
          </div>

That has changed the theme’s template to include the search box above the navigation menu in the side bar.

3) This part will clear the default text when a user clicks inside the box, and restore it if the user deselects the box without entering a search term.

Still inside “index.html”, scroll up until you see:

<script type="text/javascript" src="/rw_common/themes/pagesofinterest/javascript.js"></script>

Directly beneath this line, paste this code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script type="text/javascript">
        function clickclear(thisfield, defaulttext) {
            if (thisfield.value == defaulttext) {
            thisfield.value = "";
            thisfield.style.color='DESIRED_ACTIVE_TEXT_COLOUR';
            }
        }
        function clickrecall(thisfield, defaulttext) {
            if (thisfield.value == "") {
            thisfield.value = defaulttext;
            thisfield.style.color='DESIRED_IDLE_TEXT_COLOUR';
            }
        }
    </script>

Replace “DESIRED_ACTIVE_COLOUR” and DESIRED_IDLE_COLOUR” with hex codes for your desired colours for these states. To avoid confusion: “active colour” in this case is the colour that the text will be when the user has selected the text box. I have mine set to #333333, which is the same colour as my body text. “Idle colour”, if you haven’t guessed already, is the colour that the text will be when the search box is not selected. I have mine set to be a very light grey: #C5C5C5.

If you’re not a computer, you’ll need a human-usable interface for generating hex colour codes, which are those nasty-looking 7-digit codes, like the two I mentioned above. To do this I use Dr. Peter Jones’ RGB Colour Calculator. If you don’t want to pick your own colours, you may instead use the colours of your theme. Have a poke around in “styles.css”, they’ll be in there somewhere.

4) There is a chance that your search box is in the perfect position already, but I’d say that chance is pretty slim. To remedy this, we now need to open up the “styles.css” file. Into this file, paste:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#panel{
        position: relative;
        left: 5px;
        width: 169px;
    }
    #search_site{
        color: #C5C5C5;
        font-size: 11px;
    }
    #search_button{
        position: relative;
        margin-top: 4px;
        margin-bottom: 4px;
        left: 96px;
    }

#panel contains the styling for the entire area within which the search box’s form, text area, and button reside. Adjusting the “left” positively will move the whole set left, adjusting it negatively to the right. Adjusting the “width” value will change the width. You may add anything you want here. I used W3Schools to learn about CSS syntax.

#search_site controls the styling of the search text box. I have set the default font colour and size here.

#search_button controls the styling of … the button. Use this to position the button. “margin” defines how much whitespace there should be between the element in question and its neighbours. Append “-left”, “-right”, “-top”, “-bottom” to “margin” to set the respective values.

Save both the “index.html” and “styles.css” files and preview your site. You should now see a search box above the navigation menu in the sidebar, in every page!

5) All we have to do now is create a Rapidsearch page, then modify it to work with our new search box.

So, create a Rapidsearch page, and configure the options to suit your desires.

Preview the page. When you are happy with the page’s appearance, publish the page to the same URL used in your search box, then press ⌘⌥U to view the page’s source. Copy all of the code by pressing ⌘A then ⌘C. Now open page inspector with ⌘⇧I, and uncheck “show in menu” and “enabled”.

Now create a HTML page, and paste the code you copied earlier into it. Open page inspector, change the page’s extension to PHP. Select the “Page” options icon and uncheck “Apply Theme”.

The following line:

var queryTerm = getUrlParam('query');

Must be replaced with:

1
2
3
4
5
6
7

<? php
if($_POST['query'] != ""){
echo "var queryTerm = '".$_POST['query']."';";
}
else{
echo "var queryTerm = getUrlParam('query');";
}

Make sure the URL to the HTML page is the same as the URL used in your search box, and publish.

There is a good chance that your search page will not have the correct styles applied to it, as the links to the external CSS sheets will probably be relative, not absolute. In order to fix this, you must manually correct each CSS link within your HTML page. You’ll know you’ve done it right when the page loads and is styled correctly. Safari’s Web Inspector can be useful for this – in Safari the hotkey is ⌘⌥I.

When you’ve finished with the CSS, re-upload your site, and begin testing.

Congratulations!

Tags: Rapidweaver, RW Tutorial - RW教程, Tutorial - 教程

I’ve been using JS-Kit for comments for a long time, and I’ve been extremely impressed with the quality of their service.

They’ve recently acquired Haloscan, which is great – I dropped Haloscan in favour of JS-Kit some time ago, as I didn’t like the lack of control I felt I had over my comments. I haven’t looked back.

A few weeks ago I was showing my site to a fellow student, when she asked me why people were unable to leave comments on my photo pages. I couldn’t think of a reason, so as soon as I got home I set about fixing this lack.

After thinking about the problem for a short time, I realised that I didn’t want comments to be visible on the page in case one set of photos became wildly popular (yeah, right); which would result in a page of comments with a few photos, instead of a page of photos with maybe one or two comments. For some reason, Greybox popped into my head, and wouldn’t leave. A few hours later, this happened: Hangzhou Day 1.

If you like the effect, read on. Below is a short tutorial explaining how it was accomplished.

1) You must first have Greybox integrated with your site. Jan Erik Mostr̦m has written a tutorial explaining how to do this: RapidWeaver Рusing Greybox in a theme.

When you’re done with that (please make a test page to verify Greybox is working), head over to Code of Interest and download the Friendly Comments snippet.

Friendly Comment Snippet’s User Rating:

2) Open your RW project, select/create the page you wish to add JS-Kit comments to.

3) Open the page inspector, go to the Header > CSS tab. Paste the following CSS:

#comment{
height: 40px;
visibility: hidden;
font-size: 13px;
}
.href{
font-size: 15px;
}
#subtext{
height: 12px;
position: relative;
top: -20px;
visibility: hidden;
font-size: 8px;
font-style: italic;
}

Please note that the CSS may require some editing to ensure the link to the comment page matches the style of your site. Not all of us adore grey links.

The CSS reserves a space for the comments link, which is generated when the page has finished loading.

4) Still in the page inspector, switch to the Javascript tab. Drag the Friendly Comments snippet in. Close the page inspector.

Please note that if you are using a different script on the page that uses the “addLoadEvent” function, you don’t need to add the function again. You will, however, need to make a call to it:

addLoadEvent(friendlyComment);

Create a new HTML page. The following code should be modified, then pasted into this page:

A_TITLE = a title (do this now, it’ll come in handy in the future ;)
PATH_TO_MAIN_PAGE = full URL to the page containing the link to this comment page.

As this page will only be displaying comments, it won’t need much of the styling required for the other pages in your site. The way I accomplished this is possibly not the best, but it worked for me. I copied the CSS from the styles.css file for the theme I use, pasted it between tags, and removed the information from the {…} for each item. It took awhile. I suggest you work through the rest of the tutorial and preview your work to see if you need this step.

View the CSS example

Now you should upload the HTML page.

6) On your main page, wherever you wish the link to the comment page to appear, paste* the following:

0 Leave a comment!



    
(Comments will open on top of this page)


     

You will need to change the following:

***X = Horizontal size of the comment Greybox
***Y = Vertical size of the comment Greybox
LINK_TO_THIS_PAGE = the full URL to the page this code is to be pasted in
LINK_TO_COMMENTS_PAGE = full URL to the comments page
TITLE_OF_COMMENTS = Text you wish to appear at the top of the comment Greybox

This code should go in either the main body of the page or the sidebar. On my photo pages I’ve pasted it into the “header” area of the Rapidflicker plugin.

As an example, this is the exact code I use for my Hangzhou Day 1 photo page:

0 Leave a comment!



    
(Comments will open on top of this page)


    

Back to step #5

*Remember to select the pasted code and either choose “Format > Ignore Formatting” from the RapidWeaver menu, or press “⌘ + .”

Always do this when pasting code. Always.

If you don’t do this, there is a good chance that the code will break. Always do this!

As an added precaution, open the Page Inspector, go to the “General” tab and choose “Output: Default”. This will stop RapidWeaver from inadvertently breaking PHP or HTML code.

To learn more JS-Kit tricks, read the following posts:

Fancy Footer
JS-Kit Comments for Each Blog Entry
JS-Kit Comments: Correct Usage of the ‘Permalink’ and ‘Path’ Attributes
Recent Comments PHP Script
Styling JS-Kit Comments
JS-Kit Comments: Correct Usage of the ‘Permalink’ and ‘Path’ Attributes

Tags: JS-Kit, Products - 产品, Programming - 编程, Rapidweaver, RW Tutorial - RW教程, Tutorial - 教程

In this short tutorial I will describe how to use the JS-Kit commenting system in Rapidweaver. By then end of this tutorial you will have learned how to insert the code into yor blog so that each post has its own comments – the comments will show in permalinks, category and tag versions of each post. When someone comments on a post, JS-Kit will notify you by email. Included in the email that you, and other people who comment then recieve replies are sent will be a link to the permalink entry of the post in which the comment is displayed. You will be able to use JS-Kit’s excellent moderating system to manage your comments.

I’m going to go ahead and assume you want to integrate JS-Kit’s commenting system with the JS-Kit ratings widget, like I have. If you don’t just ignore the parts of the below tutorial that mention the ratings widget.

1) Open RW, select your blog page. Open the page inspector, select the “General” tab. Under “Override Default Site Settings”, check “Footer”. Copy the following code into this field:

1

<script src="http://js-kit.com/comments.js"></script>

To use the ratings widget as well, you’ll want to add this code also:

1

<script src="http://js-kit.com/ratings.js"></script>

2) Close the page inspector – we’re done with the tricky stuff.

3) This part can be rather tiresome – it depends on how many old posts you want to add the option to comment to.

At the very bottom of each post you wish to allow users to comment on, paste* the following code:

1

<div class="js-kit-comments" permalink=""></div>

If you want to use the ratings widget as well, you should paste this (below includes the above code – above is for those who do not want to use ratings, below is for those who want both):

1
2

<div class="js-kit-rating" title="SOME TITLE" path="/POST_TITLE" starColor="Golden"></div>
<div class="js-kit-comments" permalink="PATH_TO_POST_PERMALINK" path="/POST_TITLE"></div>

Replace “PATH_TO_POST_PERMALINK” with … the path to that post’s permalink. Replace “/POST_TITLE” with the post’s title. Don’t use whitespaces or special characters in this attribute.* For example, this is what I have at the bottom of this post:

1
2

<div class="js-kit-rating" title="" path="http://pagesofinterest.net/mikes/blog_of_interest_files/js-kit_comments_for_each_blog_entry.php" starColor="Golden"></div>
    <div class="js-kit-comments" permalink="http://pagesofinterest.net/mikes/blog_of_interest_files/js-kit_comments_for_each_blog_entry.php" path="http://pagesofinterest.net/mikes/blog_of_interest_files/js-kit_comments_for_each_blog_entry.php"></div>

*Note that I’ve actually violated my own instructions there. It should look like this:

1
2

<div class="js-kit-rating" title="" path="/js-kit_comments_for_each_blog_entry.php" starColor="Golden"></div>
    <div class="js-kit-comments" permalink="http://pagesofinterest.net/mikes/blog_of_interest_files/js-kit_comments_for_each_blog_entry.php" path="/js-kit_comments_for_each_blog_entry.php"></div>

Luckily, JS-Kit is robust, and allows morons like me to make these mistakes. I now use the correct method, but haven’t changed my older posts. Why? Because the path attribute is the ‘directory’ in which JS-Kit stores comment/ratings information. This is how we can have two different pages with the same comments/ratings widget. This also means that we can move the widgets to different pages if/when the page is moved, without losing the important comments!

And that’s it! Comments should now be enabled for that post.

To moderate posts, you’ll need to go to the JS-Kit Settings page. If you don’t already have one, you’ll have to create an OpenID account. Choose from the list of providers listed beneath the sign-in box.

If, after logging in you don’t see your site anywhere, you’ll need to “claim” it. Just enter the url of your site in the labeled text box, and follow the instructions. They’ll send you an email, and once you’ve followed the link included you will be able to moderate your site’s comments.

Enjoy!

If you would like to explore the options available to users of JS-Kit, head over to the website: JS-Kit.

*Remember to select the pasted code and either choose “Format > Ignore Formatting” from the RapidWeaver menu, or press “⌘ + .”

Always do this when pasting code. Always.

If you don’t do this, there is a good chance that the code will break. Always do this!

As an added precaution, open the Page Inspector, go to the “General” tab and choose “Output: Default”. This will stop RapidWeaver from inadvertently breaking PHP or HTML code.

To learn more JS-Kit tricks, read the following posts:

JS-Kit Comments + Greybox on Any Page
Fancy Footer
JS-Kit Comments: Correct Usage of the ‘Permalink’ and ‘Path’ Attributes
Recent Comments PHP Script
Styling JS-Kit Comments
JS-Kit Comments: Correct Usage of the ‘Permalink’ and ‘Path’ Attributes

Tags: Javascript, Rapidweaver, RW Tutorial - RW教程, Tutorial - 教程

This is a short tutorial that aims to explain how to place a search box at the top of the sidebar, above the navigation menu. This will require some fiddling with code – don’t be afraid! I’ll do my best to walk you through it.

Note: This tutorial requires Rapidsearch 1.0, and is now outdated. A new tutorial written for Rapidsearch 2.0 can be found here: Search Box Above Nav Menu with Rapidsearch 2.0.

First you need to have the code for a search box. I got mine by adding a Rapidsearch 1.0 page to my website, uploading the page, viewing it’s source then copying the code that created the searh box in that page. This tutorial could be modified to work with Google’s custom search. If you do this, please let me know which steps needed modifying and I’ll include them here.

Luckily you won’t have to do that, because I’ve copied the required code for you (plus an extra that you’ll love):

1
2
3
4
5

<div id="panel">
        <form action="PATH_TO_YOUR_SEARCH_PAGE" method="get">
            <input type="text" name="query" id="search_site" value="DEFAULT_TEXT" onclick="clickclear(this, 'Search within this site')" onblur="clickrecall(this,'Search within this site')" />
        <input type="submit" id="search_button" value="Search"/></form>
    </div>

1) To use this code, open your website in Rapidweaver, press “Themes”. Select the theme you use for your site, and make a copy of it. Select the copy, right click and press “Reveal Theme Contents in Finder”. This will open a Finder window containing the files required to make your theme … your theme.

There are two files that need editing in order to make our search bar work: “index.html” and “styles.css”. Both should be visible in the Finder window.

2) Open “index.html” in a text-editor. I use TextWrangler, because it is free and provides syntax highlighting. If you are a serious coder, try Coda or Eclipse. Scroll down until you see:

1

<div id="navcontainer">

Copy the search box code (displayed above) just below this line, then change DEFAULT_TEXT to whatever text you want to be displayed inside the search box. You need to change PATH_TO_YOUR_SEARCH_PAGE to the path to your search page as well. It should have changed from this:

1

 <div id="navcontainer">

To this:

1
2
3
4
5
6

<div id="navcontainer">
             <div id="panel">
            <form action="PATH_TO_YOUR_SEARCH_PAGE" method="get">
    <input type="text" name="query" id="search_site" value="DEFAULT_TEXT" onclick="clickclear(this, 'Search within this site')" onblur="clickrecall(this,'Search within this site')" />
    <input type="submit" id="search_button" value="Search"/></form>
          </div>

That has changed the theme’s template to include the search box above the navigation menu in the side bar.

3) This part will clear the default text when a user clicks inside the box, and restore it if the user de-selects the box without entering a search term.

Still inside “index.html”, scroll up until you see:

1

<script type="text/javascript" src="/rw_common/themes/pagesofinterest/javascript.js"></script>

Directly beneath this line, paste this code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script type="text/javascript">
        function clickclear(thisfield, defaulttext) {
            if (thisfield.value == defaulttext) {
            thisfield.value = "";
            thisfield.style.color='DESIRED_ACTIVE_TEXT_COLOUR';
            }
        }
        function clickrecall(thisfield, defaulttext) {
            if (thisfield.value == "") {
            thisfield.value = defaulttext;
            thisfield.style.color='DESIRED_IDLE_TEXT_COLOUR';
            }
        }
    </script>

Replace “DESIRED_ACTIVE_COLOUR” and DESIRED_IDLE_COLOUR” with hex codes for your desired colours for these states. To avoid confusion: “active colour” in this case is the colour that the text will be when the user has selected the text box. I have mine set to #333333, which is the same colour as my body text. “Idle colour”, if you haven’t guessed already, is the colour that the text will be when the search box is not selected. I have mine set to be a very light grey: #C5C5C5.

If you’re not a computer, you’ll need a human-usable interface for generating hex colour codes, which are those nasty-looking 7-digit codes, like the two I mentioned above. To do this I use Dr. Peter Jones’ RGB Colour Calculator. If you don’t want to pick your own colours, you may instead use the colours of your theme. Have a poke around in “styles.css”, they’ll be in there somewhere.

4) There is a chance that your search box is in the perfect position already, but I’d say that chance is pretty slim. To remedy this, we now need to open up the “styles.css” file. Into this file, paste:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#panel{
        position: relative;
        left: 5px;
        width: 169px;
    }
    #search_site{
        color: #C5C5C5;
        font-size: 11px;
    }
    #search_button{
        position: relative;
        margin-top: 4px;
        margin-bottom: 4px;
        left: 96px;
    }

#panel contains the styling for the entire area within which the search box’s form, text area, and button reside. Adjusting the “left” positively will move the whole set left, adjusting it negatively to the right. Adjusting the “width” value will change the width. You may add anything you want here. I used W3Schools to learn about CSS syntax.

#search_site controls the styling of the search text box. I have set the default font colour and size here.

#search_button controls the styling of … the button. Use this to position the button. “margin” defines how much whitespace there should be between the element in question and its neighbours. Append “-left”, “-right”, “-top”, “-bottom” to “margin” to set the respective values.

Save both the “index.html” and “styles.css” files and preview your site. You should now see a search box above the navigation menu in the sidebar, in every page!

Congratulations!

Tags: RW Tutorial - RW教程, Tutorial - 教程

MAJOR UPDATE: This tutorial has been updated to work with the new version (1.14) of Roy’s Cumulus Tag Cloud. The embed script has changed significantly. If you had trouble with the last version, give this one a try – it has been improved a lot!

If you scroll down and look left, beneath the menu you’ll see a new addition to the page.

I’ve managed to find a way to integrate Roy’s awesome tag cloud plugin with Rapidweaver’s blog page.

And now that you’ve seen it, I figure you’ll want it too – and this is how to do it:

Note: requires php – will NOT work on .Mac.

This tutorial has been written with the “code-phobic” in mind. It may bore you with details that you feel are obvious. If so, just skim read until you find the parts that interest you. I’ve included screenshots of various steps in the process – to view the full size images, just click on the thumbnail of each image. The image will load on top of this page.

If you feel that this tutorial is too complicated, or you run into any problems, please let me know by posting a comment below.

As long as your server has PHP, I am confident that you/we will be able to get this beatiful tag cloud going.

1) Make a blog page. At this time, the script does not work with Rapidblog. I will look into this when I have finished a few other projects I have going.








2) Add some blog entries.










3) Download the tag cloud file pack here. This It contains a snippet that is used to insert the cloud, the swf file, “swfobject.js” and “cloud_creator.php”, that gets tag information.





4) Upload both “tagcloud.swf” and “swfobject.js” to your server. Note URL that points to these files. If you’ve uploaded them to the root directory of your server, then the path will look like: “http://your_doman_name.com/tagcloud.swf” and “http://your_doman_name.com/swfobject.js”.




5) Upload the “cloud_creator.php” file to your blog’s “files” directory. The directory will either be called “files” or “blog_name_files”. The first image shows an example of each. The second image shows an example of how the blog files directory should look before the “cloud_creator.php” file has been uploaded.




6) Open “cloud_creator.php” in your browser. You should see a blank page.








7) Make sure “cloud_creator.php” is working. Check that “cloud_file.html” has been created in the blog files directory.







8) Change the page’s extension to .php.










9) Change the sidebar to HTML










10) Drag the snippet into the sidebar. Change the addresses to match your site. If you aren’t happy with the default tag text colour, change the last 6 numerals of:

0x333333

to any hex colour. I use The RGB Colour Calculator to get my hex values.

11) Change the URLs in the following two lines to match your site, then paste them into the header.

For example, from:

1
2

<script type="text/javascript" src="http://pagesofinterest.net/mikes/swfobject.js"></script>
    <? include('http://pagesofinterest.net/mikes/blog_of_interest_files/cloud_creator.php'); ?>

To:

1
2

<script type="text/javascript" src="PATH_TO/swfobject.js"></script>
    <? include('PATH_TO/cloud_creator.php'); ?>

12) Publish your page – you’re done!

Thanks for reading – if you like this tag cloud, head over to Roy’s Site and let him know!

13) With the updated version of the flash file, there are a few extra options worth mentioning:

1
2

so.addVariable("tspeed", "100");
        so.addVariable("distr", "true");

The first controls the speed of rotation. Increase it for faster rotation, decrease it for slower. I use slower rotation for bigger clouds, and faster for smaller to be best.

The second tells the cloud whether to attempt to spread the tags out evenly throughout the sphere. Change “true” to “false” to disable this (why would you want to disable it? I don’t know).

Thanks for reading – if you like this tag cloud, head over to Roy’s Site and let him know!

It has been brought to my attention that some hosts do not allow standard use of the “include(‘URL’)” function. If you get a message that looks similar to this:

Warning: include() [function.include]: URL file-access is disabled in the server configuration in /a/path/to/a/domain.com/index.php on line XX

In your “include” parts (there are two, one in the snippet, one that gets pasted in the header in step 11), instead of using this (with paths changed to suit your site):

1

<?php include("http://pagesofinterest.net/cumulus_test/blog/cloud_creator.php"); ?>

Do this (changing the paths to suit your site):

1

<?php  include($_SERVER['DOCUMENT_ROOT']."/files/cloud_creator.php");  ?>

The $_SERVER['DOCUMENT_ROOT'] asks the server for the path to the current file, .”/files/cloud_creator.php” appends the path to the file we want.

The snippet’s include should look something like:

1

<?php  include($_SERVER['DOCUMENT_ROOT']."/files/cloud_file.html");  ?>

When you get it working, or get stuck – I want to know! Leave a comment and I’ll respond as soon as I am able.

Tags: Flash, PHP, Rapidweaver, RW Tutorial - RW教程, Tutorial - 教程