Rapidweaver
Slider 0.94b Coming Along
Scroll to Comments
I’ve solved one of the IE7 problems - the mysterious disappearing arrows.
I solved it by giving both the left and the right arrows’![]()
tags width and height values. These are just set to the width and height of the image used.
I still have the “overflow:hidden” problem to solve. I’m a bit confused over this one. I’ve Googled my fingers raw, but haven’t found much mention of similar problems.
IE7 just won’t apply overflow:hidden to the element’s children. Very irritating.
Timed transitions, however, turned out to be a breeze to implement.
Here is a snapshot of the controls that will be available for this new feature:
I hope to fix the overflow:hidden problem and have a release ready buy the end of the week.
Fingers crossed.
(0 Comments)
Scroll to top
I’ve solved one of the IE7 problems - the mysterious disappearing arrows.
I solved it by giving both the left and the right arrows’
I still have the “overflow:hidden” problem to solve. I’m a bit confused over this one. I’ve Googled my fingers raw, but haven’t found much mention of similar problems.
IE7 just won’t apply overflow:hidden to the element’s children. Very irritating.
Timed transitions, however, turned out to be a breeze to implement.
Here is a snapshot of the controls that will be available for this new feature:
I hope to fix the overflow:hidden problem and have a release ready buy the end of the week.
Fingers crossed.
Email
delicious
Digg
Reddit
Newsvine
Furl
Google
Stumble
HaoHao(0 Comments)
Scroll to top
Fancy Footer Update
Scroll to Comments
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.
(0 Comments)
Scroll to top
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.
(0 Comments)
Scroll to top
Search Box Above Nav Menu with Rapidsearch 2.0
Scroll to Comments
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) 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:
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:
To this:
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:
Directly beneath this line, paste this code:
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 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:
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
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
Slider Progress is Slow
Scroll to Comments
I am still working on making Slider 100% IE friendly.
It’s been extremely frustrating, as a lot of the time I have no idea why effect x won’t work in IE. I really dislike IE.
Just letting you all know that I am still working on it, though it is taking far longer than I expected.
(0 Comments)
Scroll to top
I am still working on making Slider 100% IE friendly.
It’s been extremely frustrating, as a lot of the time I have no idea why effect x won’t work in IE. I really dislike IE.
Just letting you all know that I am still working on it, though it is taking far longer than I expected.
(0 Comments)
Scroll to top
Styling JS-Kit Comments
Scroll to 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)
2)
3)
4)
5)
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
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
Slider Finally Released!
Scroll to Comments
I'm feeling pretty happy right now - I just released the beta version of my new plugin!
You can check it out here:
Code of Interest
As I expected, the release brought a few problems to light:
My license file processing code couldn't handle non-ASCII characters, which stopped my first customer from being able to unlock his Slider. I solved this by using:
$first_name = ereg_replace("[^A-Za-z0-9-]", "", $_POST['first_name']);
$last_name = ereg_replace("[^A-Za-z0-9-]", "", $_POST['last_name']);
To strip the non-ASCII characters from the customer's name before the name is entered into the license file. It seems to have solved the problem.
Another customer raised an important issue with the main content positioning controls - what he thought was padding was actually just shifting the whole cell to the left, which meant text wasn't wrapping properly.
I solved this by changing the CSS from altering the position to altering the padding, and added right and bottom padding controls.
The same customer raised an excellent point regarding the arrow position sliders. When one chooses "outside" positioning for the arrows, the "synchronize" check box is no longer useful, and one often has to position the right arrow much further right than the left, often more than the 400px limit imposed by the slider. There are text fields into which one may input more precise (and higher numbers) numbers, and I intended that they be used instead of the sliders when positioning arrows outside.
I think I'll make it so the sliders and synchronize checkbox are disabled when the user selects outside arrows.
Fun!
(0 Comments)
I'm feeling pretty happy right now - I just released the beta version of my new plugin!
You can check it out here:
Code of Interest
As I expected, the release brought a few problems to light:
My license file processing code couldn't handle non-ASCII characters, which stopped my first customer from being able to unlock his Slider. I solved this by using:
$first_name = ereg_replace("[^A-Za-z0-9-]", "", $_POST['first_name']);
$last_name = ereg_replace("[^A-Za-z0-9-]", "", $_POST['last_name']);
To strip the non-ASCII characters from the customer's name before the name is entered into the license file. It seems to have solved the problem.
Another customer raised an important issue with the main content positioning controls - what he thought was padding was actually just shifting the whole cell to the left, which meant text wasn't wrapping properly.
I solved this by changing the CSS from altering the position to altering the padding, and added right and bottom padding controls.
The same customer raised an excellent point regarding the arrow position sliders. When one chooses "outside" positioning for the arrows, the "synchronize" check box is no longer useful, and one often has to position the right arrow much further right than the left, often more than the 400px limit imposed by the slider. There are text fields into which one may input more precise (and higher numbers) numbers, and I intended that they be used instead of the sliders when positioning arrows outside.
I think I'll make it so the sliders and synchronize checkbox are disabled when the user selects outside arrows.
Fun!
(0 Comments)