Search Box Above Nav Menu with Rapidsearch 2.0
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:
<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:
<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:
<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:
#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:
<?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!
Email
delicious
Digg
Reddit
Newsvine
Furl
Google
Stumble
HaoHao(0 Comments)
Scroll to top
Flash Slideshows Within Blog Entries
When I wrote my short review of the Besta TA-3000 Electronic Chinese-English Dictionary, I wanted to show readers how easy it is to handwrite characters. The ideal way to do this was to use a Flash Slideshow, so that is just what I did:
Example of entering a Chinese character into the dictionary:
1. Your browser does not support Javascript.
2. If you are using RapidWeaver, please make sure your theme is using the most up-to-date version of the javascript include file.
Better than a textual description, right?
If you’d like to learn how to do this, read on.
You’ll need the “swfobject.js” for this to work. You can get it here (right click to download).
1) Create a RapidWeaver Photo Album page. Select the album that you wish to use for this slideshow.
2) Open the Page Inspector, select the “Page” tab. Check “Use Flash Slideshow”. Check “Scale Image” and set the size you wish the slideshow to be. Still in the “Page” section, select the “Flash Slideshow tab. Uncheck “Controls”, “Info”, “Activate on Rollover” and “Link to Large Images”. Set “Scale Images” to “Scale to Fit”. set slideshow size.
3) Export the page and open the folder in Finder. Open your FTP program and create a folder to hold the slideshow files. I created mine in my blog directory, but it doesn’t really matter where you put yours. Upload all the files to this new folder. Open the “slideshow.swf” file in your browser. It will probably fill the whole page, but it should be working. An example.
While you’ve got your FTP program open, upload the “swfobject.js” file. Note the URL leading to the file.
4) In the Page Inspector, select the “General” tab. Uncheck both “Enabled” and “Show in Menu”.
5) Go to your Blog page and open the Page Inspector again. This time select the “Header” tab, within that select “Header”. Into this field you’ll need to paste* the following:
<script type="text/javascript" src="PATH_TO/swfobject.js"></script>
Change “PATH_TO” to the path to the file.
6) Where you want the slideshow to appear, paste* the following:
<div id="UNIQUE_ID">
Sorry, I cannot display the flash slidehsow for one of the following reasons.<br />
1. Your browser does not support Javascript.<br />
2. If you are using RapidWeaver, please make sure your theme is using the most up-to-date version of the javascript include file.<br />
</div>
<script type="text/javascript">
var so = new SWFObject("PATH_TO_SLIDESHOW/slideshow.swf", "mymovie", "320", "240", "6", "#ffffff");
so.addParam("quality", "high");
so.addParam("wmode", "transparent");
so.addParam("base",".");
so.write("UNIQUE_ID");
</script>
PATH_TO_SLIDESHOW should be changed to the full URL leading to the “slideshow.swf” file.
UNIQUE_ID should be a unique name, that no other object in the page is likely to contain.
7) Upload the changes to your Blog page, check to make sure it worked.
If you ran into problems, or notice an error in the tutorial, please let me know by leaving a comment or sending me an email.
Of course, if everything worked perfectly, I’d like to hear about it as well!
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.
Scroll to top
JS-Kit Comments + Greybox on Any Page
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:
############################################################
WARNING: High-Light was unable to convert the text
according to the applied language: css
############################################################
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);
<html><body>
<div class="js-kit-rating" title="A_TITLE" path="PATH_TO_MAIN_PAGE" starColor="Golden"></div>
<div class="js-kit-comments" permalink="PATH_TO_MAIN_PAGE" path="PATH_TO_MAIN_PAGE"></div>
<script src="http://js-kit.com/comments.js"></script> <script src="http://js-kit.com/ratings.js"></script>
</body></html>
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:
<div id="comment"><center><span class="js-kit-comments-count" path="LINK_THIS_PAGE">0 </span><a href="LINK_TO_COMMENTS_PAGE" class="href" title="TITLE_OF_COMMENTS" rel="gb_page[***X ***Y]">Leave a comment!</a></center></div>
<center><p id="subtext">(Comments will open on top of this page)</p></center>
<script src="http://js-kit.com/comments-count.js"></script>
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:
<div id="comment"><center><span class="js-kit-comments-count" path="http://pagesofinterest.net/mikes/photo/hangzhou/day_1.php">0 </span><a href="http://pagesofinterest.net/mikes/photo/hangzhou/day_1_comments.html" class="href" title="Hangzhou Day #1 - Comments" rel="gb_page[450 490]">Leave a comment!</a></center></div>
<center><p id="subtext">(Comments will open on top of this page)</p></center>
<script src="http://js-kit.com/comments-count.js"></script>
<style type="text/css" media="all">
img {border: none;}
body {width: 435px;font-size: 11px;font-family: 'Lucida Grande', LucidaGrande, Lucida, Helvetica, Arial, sans-serif;color: #333333;margin: 10px;text-align: center;}
a:link {color: #808080;text-decoration: underline;}
a:visited {color: #808080;text-decoration: underline;}
a:hover, a:active {color: #b3b3b3;text-decoration: none;}
blockquote {font-size: 10px;color: #808080;padding: 7px 0;}
#top {display: none;}
#shadows {display: none;}
#hdrcolor {display: none;}
#overlay1 {display: none;}
#overlay3 {display: none;}
#overlay4 {display: none;}
#header {display: none;}
#contenttop {display: none;}
#bottom {display: none;}
.clearer {clear: both;}
#container {width: 435px;text-align: left;margin: 0 auto;padding: 0;}
#pageHeader {}
#pageHeader img {display: none;}
#pageHeader h1 {display: none;}
#pageHeader h2 {display: none;}
#contentContainer {width: 440;padding-top: 10px;}
#contentContainer #content {margin-left: 0;padding: 0;}
#sidebarContainer {display: none;}
#sidebarwrapper {display: none;}
#sidebartop {display: none;}
#sidehead {display: none;}
#sidebarbottom {display: none;}
#sidebarContainer #sidebar {display: none;}
.image-left {float: left;margin: 3px 3px 3px 0;padding: 3px 3px 3px 0px;}
.image-right {float: right;margin: 3px 0 3px 3px;padding: 3px 0 3px 3px;}
h1 {}
h2 {}
h3 {font-size: 13em;}
h5 {padding: 0;font-size: 18px;margin: 0;color: #999;}
.blog-entry-comments-body {text-align: left;}
.blog-entry-comments-body-even {background-color: #eee;text-align: left;padding: 5px 8px;}
.blog-entry-comments-body-odd {background-color: #fff;text-align: left;padding: 5px 8px;}
</style>
Back to step #5
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.
(0 Comments)
Scroll to top
JS-Kit Comments for Each Blog Entry
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:
<script src="http://js-kit.com/comments.js"></script>
To use the ratings widget as well, you’ll want to add this code also:
<script src="http://js-kit.com/ratings.js"></script>
If you have other information you wish to see included in your footer, like I do, then you’ll need to include that here as well. For example, this is what my custom footer field contains:
<script src="http://js-kit.com/comments.js"></script> <script src="http://js-kit.com/ratings.js"></script><a href="http://topsites.blogflux.com/travel/"><img style="border:none;" src="http://topsites.blogflux.com/track_141347.gif" alt="Travel Blogs - Blog Top Sites" /></a><br /><a href="http://blogshares.com/blogs.php?blog=http%3A%2F%2Fpagesofinterest.net%2Fchina_blog%2Fchina_blog.php&user=56480"><img src="http://blogshares.com/images/blogshares.jpg" alt="Listed on BlogShares" width="117" height="23"/>
<p style="text-align: center;></a>
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/nz/">
<img alt="Creative Commons License" style="border-width:0" src="http://creativecommons.org/images/public/somerights20.png" /></p>
</a></div>
<br />This work is licensed under a
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/nz/">Creative Commons Attribution-Noncommercial-Share Alike 3.0 New Zealand License</a>.<br /> <br />Michael Robinson -
<a href="mailto:est.ergo.sum@gmail.com?subject=China%20Blog">
Contact</a>
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:
<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):
<div class="js-kit-rating" title="" path="PATH_TO_POST_PERMALINK" starColor="Golden"></div>
<div class="js-kit-comments" permalink="PATH_TO_POST_PERMALINK" path="PATH_TO_POST_PERMALINK"></div>
Replace “PATH_TO_POST_PERMALINK” with ... the path to that post’s permalink. For example, this is what I have at the bottom of this post:
<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>
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
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.
Scroll to top
Search Box Above Nav Menu in Rapidweaver
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):
<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:
<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:
<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:
#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!