Fancy Footer Update
I’ve updated the Fancy Footer snippet, now Trackbacks/Pingbacks will be able to find your posts - the previous version’s implementation was ... lacking.
The previous snippet used the post permalink as both the permalink and the path - the Trackback/Pingback system didn’t like “http://“ being included in the path attribute.
I was afraid that I wouldn’t be able to find a solution that allowed us to have Trackback/Pingback support and keep our existing comments.
I am glad to say that my fears were unfounded, and I managed to come up with a solution. The snippet now parses out the “http://domain.com” part of the permalink, and uses that for the path attribute for the widgets. Happily, JS-Kit must do a similar thing, as it hasn’t messed up my comments (the path attribute is what JS-Kit uses to determine what page to display which comments).
The snippet may be downloaded here. This link leads to more information on how to use the snippet.
Email
delicious
Digg
Reddit
Newsvine
Furl
Google
Stumble
HaoHao(0 Comments)
Scroll to top
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!
(0 Comments)
Scroll to top
OpenCyc in Ubuntu
The following are the exact steps I took to get OpenCyc running in Ubuntu 8.10. Without this thread I wouldn’t have been able to do it.
1) Install Java. In a Terminal:
~$ sudo apt-get install sun-java6-jre
2) Download OpenCyc
3) Unpack the downloaded file and move the folder to whatever directory
4) Within the OpenCyc folder, locate the “scripts” folder and open it. Open each script in Gedit and change the first line from*:
#!/bin/sh
to:
SHELL = /bin/bash
*Taken from DashAsBinSh.
5) In a Terminal, cd to the OpenCyc/scripts directory, then do:
(for 64 bit)
~$ echo SuSE-9.2-x86_64 > platform-override.txt
(for 32 bit)
~$ echo SuSE-9.2-x86_32 > platform-override.txt
Finally:
~$ ./run.sh
Note that the first time OpenCyc is run you may be in for a long wait - it took about 10~15 minutes on my laptop.
When it is finally finished loading, point a browser to:
(0 Comments)
Scroll to top
Styling JS-Kit Comments
This post aims to give some tips and guidance on how to style JS-Kit Comments, so they closely match your blog’s theme.
I’ve used an external CSS file to style my comments. If you’re like me, you won’t want to read the rest of this tutorial, and would rather view the stylesheet directly.
Styling JS-Comments is really quite straightforward. I strongly recommend you read this post before moving on, as it contains tips on resizing JS-Kit elements, such as the width/height of comments, among other things.
Use of an external CSS sheet is advised, as it will allow the reader to apply the same styles site-wide with minimum hassle.
Stylesheets should be edited using your favourite text-editor. If you don’t have a favourite, I recommend Text Wrangler, which is an excellent (and free) editor.
I’m just going run through the stylesheet used to style my comments, as the possibilities are too numerous for me to list here. I encourage you to experiment - it is one of the best ways to learn CSS.
The relevant selectors are:
1)
.js-singleComment
2)
.js--comment-stripe-1
3)
.js-singleCommentDepth0
4)
.js-singleCommentDate
5)
.js-siteAdmin
Note that the full list of selectors can be found using the FireBug addon combined with Firefox.
The first three selectors allow us to apply styling such that the first message of a thread will have style x, the next message will have style y, the next message will have style z, next style y, next z... This is not only pretty, but also makes it easier for the reader to quickly determine where a thread began, and clearly defines the boundary between each comment.
Here is the styling that I have applied to selector #1:
.js-singleComment {
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-bottomleft: 7px;
background: #ECF4FF;
background-image: url('http://pagesofinterest.net/images/transparent_shadow.png');
background-repeat: repeat-x;
background-position: top;
border: none;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding-left: 5px;
padding-top: 5px;
This selector styles all comments that are: not the first comment of a thread, even numbered.
The first two lines give rounded corners in Safari 3 and Firefox 3.
The four lines below that control the background colour and the image that gives the shadow effect, implying that the comment is “below” the previous comment.
The next four lines control the borders - note the lack of a top border, which is taken care of by the image I’ve used.
Finally, the comment has some padding applied to it. I did this as the rounded corner combined with the top shadow image made text difficult to read in some places.
The styling I have applied to selector #2 is:
.js-comment-stripe-1 {
background: #E4EDF2;
background-image: url('http://pagesofinterest.net/images/transparent_shadow.png');
background-repeat: repeat-x;
background-position: top;
border: none;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding-left: 5px;
padding-top: 5px;
}
This selector styles comments that are: not the first comment of a thread, are odd.
The styling format is identical, I’ve just used different images and colours.
The styling I have applied to selector #3 is:
.js-singleCommentDepth0 {
-webkit-border-top-left-radius: 7px;
-moz-border-radius-topleft: 7px;
-webkit-border-bottom-left-radius: 11px;
-moz-border-radius-bottomleft: 11px;
background: #fff;
background-image: url('http://pagesofinterest.net/images/comments_border.png');
background-repeat: no-repeat;
background-position: left bottom;
margin-top: 13px;
color: #333;
border: 1px solid #ccc;
padding-left: 5px;
padding-top: 5px;
}
This selector styles the first comment of each thread.
This time, the first 4 lines control rounded borders.
The background image is now used to give the pleasing graduation effect at the bottom of the comment box, and the background colour is white.
The whole box has a border applied to it, and I’ve given the top a margin of 13px. This margin further differentiates the comment from any previous thread.
The padding is the same.
The styling for the final 2 selectors is:
.js-singleCommentDate {
font-style: italic;
}
.js-siteAdmin {
color: black;
The first styles the date, the second gives the Admin’s name a different colour.
And finally, upload your CSS file to your server, and include the following BELOW the JS-Kit Comment’s insertion code. It is important that the CSS is included after the JS-Kit code.
<link rel="stylesheet" type="text/css" media="all" href="PATH_TO/jskit.css" />
I hope you have fun styling your comments!
To learn more about being a JS-Kit Widgets Admin, consult the JS-Kit Admin Guide.
(0 Comments)
Scroll to top
Fancy Footer - Usage and Tips
<- Updated 19/09/08 ->
Update: Added Trackback/Pingback to prefix snippet.
After being annoyed at the time it took to add my typical blog-post footer (RSS, Email subscription links, Social Bookmark links, JS-Kit comments), it finally dawned on me that I could do all this with one PHP script, have 1/3rd the code at the bottom of each post, and easily change the footer of EVERY BLOG POST AT ONE TIME.
The last thing was the decider, as I recently changed the width of my entire site, and wanted the comments/social bookmarks list to fit nicely with the new width, but didn't relish the thought of changing the fiddly code I use at the bottom of each post.
So I created a PHP script that is included in the "Prefix" of my blog pages. It consists of one function that is passed a few pieces of information, and spits out a nicely formatted footer section.
This post will explain how to use this script in your site. I have packaged the script + prefix + function call into three snippets, which can be downloaded here: Fancy Footer.
1) Double click on the snippets to install, close and reopen RW. Press ⌘5 to open the snippet window, and find the "PREFIX - RSS, Email, Social Links, Comments + Ratings Inserter" snippet. Double-click on this snippet to go into edit mode.
2) I have labeled each segment clearly, so that you may easily delete those you do not wish to display in your blog. As an example: I do not want the RSS/Email links to display. I press ⌘5 to open the snippet window, and double click on the PREFIX snippet. I search for the line: "//DON'T WANT EMAIL/RSS LINKS? DELETE FROM HERE:" and select the lines between it and the line that reads: "//TO HERE!". Then I press delete. The script will no longer output RSS/Email links.
The Social Bookmark links come in two flavours: one with links that behave normally, with the page loading in the current window. The other has links that will open in a Greybox, if Greybox has been set up in your theme. Jan Erik Moström has written an excellent tutorial explaining how to set a theme up for Greybox. It can be found here: RapidWeaver - using Greybox in a theme. If you decide to use the Greybox enabled section, comment the standard section out, and uncomment the Greybox section, as per the instructions within the file.
< - - - >
If you decide to use the RSS/Email and/or Social Bookmarking Sections:
a) The RSS/Email and Social Bookmarking sections require the images included in the download. These images need to be uploaded to your server. Do this with an FTP program, then open your browser and find the folder you uploaded the images to and copy the URL.
As an example: the images used in my footer are located at: http://pagesofinterest.net/images/, and this is the URL that I would copy for this step.
b) If you closed the snippet window, reopen it and double click on the PREFIX snippet to open it for editing. You will need to replace PATH_TO with the URL you copied in a, above. I find this easier to do within a text editor using Find & Replace. To do this simply select the entire text of the snippet and copy it into a text editor window, then use Find & Replace to replace PATH_TO with the URL you copied. When you're done, double check the new text. Where an image's src tag read "src="PATH_TO/image_name.jpg"", it should now look something like (using the example URL): "src="http://pagesofinterest.net/images/image_name.jpg".
Now select all of the text and copy it back into the snippet window. Press save.
The Email and RSS section require you to have an RSS feed for your blog, and a "subscribe to this blog via email" page. If you lack one of these, you won't be able to use this section. Just delete it, as described above.
< - - - >
3) The JS-Kit section is highly customizable. I have set it up so that there will be a "comment count" line with 5-star user-ratings below. Beneath these will be a "Leave a Comment!" link, under which the comments will be displayed.
Note that any part of the JS-Kit section can be changed. As there are such a large amount of options, I've created a list of the parts I think you'd most likely want to play with:
< - - - >
Ratings Options:
Type:
- The ratings widget may be configured to display in three modes: combo, split and score.
Combo displays one row of 5 stars.
Split displays two rows of 5 stars - the left row represents the total rating, the right the user's rating.
Score is actually an entirely different method of rating - thumbs up/down.
Once you've decided which you would like to use, replace "view='combo'" with your desired style.
Options: view='split', view='score', view='combo'.
starColor='Golden':
- Colour of rating stars. Colour options: Ruby, Red, Golden, Blue, Green, Emerald, Indigo, Violet.
No ratings:
- Delete the following:
<div view='split' class='js-kit-rating' title='".$post_title."' permalink='".$post_permalink."' path='".$post_permalink."' starColor='Golden'></div>
Comments:
paginate='10':
- No more than 10 comments will be displayed. If there are more than 10 comments, they will be split into "pages" that are accessible via small links or arrows at the top/bottom of the comments section. If you do not care how many comments are displayed at a time, remove this.
Anything coming after "Label:":
- Will be displayed as a label. Change this text to whatever you wish.
The line:
<div class='js-CreateCommentBg' style='width:100%;border:none;'>:
- style='SOME_CSS_STYLE' your desired styling options here. currently set so that the comment area will be as wide as the div it is
nested in.
The line:
<div><textarea name='js-CmtText' ROWS=6 COLS=62 style='width:550px;height:200px;'></textarea></div>:
- COLS=XX: where XX = the number of columns for the comment text area.
- style='SOME_CSS_STYLE' your desired styling. Currently set to be 200px high and 550px wide.
The line:
<div class='js-commentAvatarArea' style='min-width:550px;max-width:551px;'></div>:
- style='SOME_CSS_STYLE' your desired styling. If changing width, you must use both min and max values - it is a hack fix but it works.
Remember that everything here is open to alteration. Don't like the order in which components are displayed? Swap their position and see what happens!
< - - - >
4) Open your blog page. Press ⌘⇧I to open the Page Inspector, select the "Header" tab. Now select the "Prefix" tab, and drag the modified snippet into this field.
5) Assuming you are using the JS-Kit Comments sections, change to the "General" tab of the Page Inspector. Check the "Footer" box, and copy whatever footer text you normally use into it. Append the following to this:
<script src="http://js-kit.com/comments-count.js"></script> <script src="http://js-kit.com/comments.js"></script><script src="http://js-kit.com/ratings.js"></script>
These are required for JS-Kit to function. Placing them in the footer means that the important stuff - your blog content - will load more quickly. The loading of these scripts will not cause the page load to "freeze".
6) Choose a blog entry and drag the BLOG ENTRY snippet to whatever position you want the items to appear. Select the code that appears and press ⌘. to ignore formatting. This is very important.
The "filler" parts that are within the insert_comment() brackets need to be replaced with your information:
RSS_URL: The URL pointing to your RSS feed.
EMAIL_SUBSCRIPTION_URL: The URL pointing to your "Subscribe to this blog via Email" page.
POST_FULL_PERMALINK: The FULL permalink for this post. As an example, for this page this is:
"http://pagesofinterest.net/mikes/blog_of_interest_files/fancy_footer.php"
POST_TITLE: The title of this post.
SCROLL_FROM_TOP_TAG: The tag for the div a "Scroll to Comments" anchor would scroll to, if you were using Scroll to Anchors With jQuery.
LEAVE_A_COMMENT_LABEL: The label for the "Leave a comment" link that when pressed allows a visitor to leave a comment.
SCROLL_TO_TOP_TAG: The tag for the anchor that would scroll to the top of the page, if you were using the above scrolling method.
IMPORTANT:
If you decide not to use any of the sections or scrolling, you MUST replace values related to those sections with empty quotes. As an example, here is a fancy footer BLOG snippet that is not displaying RSS or EMAIL links, and does not use SCROLLING:
<?php
insert_comment("","","http://pagesofinterest.net/mikes/blog_of_interest_files/fancy_footer.php","Fancy Footer - Usage and Tips","","Like these snippets? Leave a comment!","");
?>
Notice the use of empty quotes in place of variables that are not required. Not doing this correctly wil