Posted on Sun Mar 18 20:40:00 UTC 2007
What started as a 5 minutes hack a few weeks ago is now a reality. I’ve put together a new gallery, and unlike many other galleries, you get to see all the existing themes for Mephisto as they would appear in a real Mephisto installation, because that’s where they all run. All sites show the same content, which makes it really easy to find out how each one treats sections, static pages, comments, sidebars, etc.
To the best of my knowledge, this is the most extensive collection of Mephisto designs to date! It contains 34 templates (and would contain more if it was not for the fact that the license did not allow for free redistribution).
Some may require extra Mephisto plugins such as the ERB, Erubis or HAML renderers. Speaking of HAML, I’m going to be releasing a new template within a few days to demonstrate how you can use the HAML renderer for Mephisto.
I’m also officially introducing a new Mephisto theme: Cutline, very accurately translated from the original Cutline Template by Chris Pearson. This is a gorgeous design, with a clean layout, plenty of white space and very precise typography.
I’ll be posting some more details in the following days about why that 5 minutes hack turned out into a much bigger project, but I think the result is quite impressive, and a hats off to Rick for creating an impressive blog engine.
Posted in html/css, Rails
|
Tags mephisto, template, theme
|
17 comments
Posted on Mon Dec 18 15:17:00 UTC 2006
A while back I wrote BookmarkIt! , a social bookmarllet plugin for Typo, and it worked for a while, but the Typo plugin API changed, and changed again, and again, and keeping up was no fun. So since then, I’ve already changed my approach for my TextLinkAds plugin and instead wrote a bona fide rails plugin, and since Typo 4.0.3 broke the plugin one more time, it was time to take the same route.
Morevover, the previous version did not allow for putting the Bookmkarlets inline with the post and this new version addresses that also. It is now a real Rails plugin, useable in any Rails app.
How to Get the plugin
script/plugin install http://svn.nanorails.com/plugins/bookmarkit/
or to use svn:externals to get updates
script/plugin install -x http://svn.nanorails.com/plugins/bookmarkit/
The install will automatically copy the config file, the images, the css and the partial in their final location. If you delete these files, you can reinstall with:
script/plugin install --force http://svn.nanorails.com/plugins/bookmarkit/
How to configure the plugin
To configure, edit the file config/bookmarkit.yml to change the title and select which bookmarklets you want displayed.
title: Bookmark It!
delicious: true(default)/false
digg: true(default)/false
reddit: true(default)/false
blinklist: true(default)/false
dzone: true(default)/false
newsvine: true(default)/false
furl: true(default)/false
spurl: true(default)/false
simpy: true(default)/false
fark: true(default)/false
blogmarks: true(default)/false
myweb2: true(default)/false
wists: true(default)/false
How to use the plugin
To use, inside any view (.rhtml), use:
<%= render_BMI(title, url) %>
For example, in Typo, you would include the following in app/views/articles/read.rhtml
<%= render_BMI(@article.title, @article.location) %>
For finer control of the rendering, it also copies a css (bookmarkit.css) to public/stylesheets. To use, include in your main layout with:
<%= stylesheet_link_tag "/stylesheets/bookmarkit" %>
Adding more bookmarklets
All the bookmarklet html is in the _bookmarkit.rhtml partial.
For example, for
BlinkList, I’ve used:
<a style="font-size:22px;" title="Blink '<%= title %>'" href="http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url=<%= url %>&Title=<%= title %>">
<img style="border:0;" hspace="3" class="bookrmarkit" alt="Blink" title="Blink '<%= title %>'" src="/images/bookmarkit/blinklist.gif" />
</a>
You should also add an entry in bookmarkit.yml
If you want more bookmakrlets included, submit your patches in the comments or send to psq_at_no_spam_nanorails_dot_no_spam_com.
Posted in html/css, Rails
|
Tags bookmarkit, rails
|
1 comment
Posted on Fri Sep 29 16:38:00 UTC 2006
Recently, I ran across CodeHighlighter by Dan Webb. This looked like a pretty cool javascript, and I thought a better way than to do it on the server side.
Adding it to typo is fairly straightforward, baring a small patch.
Get the code
Get it from Dan’s site via subversion: http://svn.danwebb.net/external/CodeHighlighter/trunk
svn co http://svn.danwebb.net/external/CodeHighlighter/trunk
Adding CodeHightlighter to your template
Add to your template (themes/[YOUR THEME]/layouts/default.rhtml)
<%= javascript_include_tag "code_highlighter" %>
<%= javascript_include_tag "javascript" %>
<%= javascript_include_tag "css" %>
<%= javascript_include_tag "html" %>
<%= javascript_include_tag "ruby" %>
The code as provided by Dan has a small incompatibility with prototype used by Ruby on Rails. The following line
for (var i in this.styleSets) highlightCode(this.styleSets[i]);
behaves quite strangely and will pretty much kill your browser (Firefox runs out of memory and displays a bunch of “undefined” after several minutes) because it ends up calling hightlightCode way too many time because of all the methods added to all objects.
To make codehighlighter.js play nicely with prototype.js, replace that last line with:
if (this.styleSets.each) {
this.styleSets.each(highlightCode)
} else {
for (var i in this.styleSets) {
highlightCode(this.styleSets[i]);
}
}
Essentially, if prototype is present, we can use each to iterate on the styles, otherwise it is safe to used the old code.
Using Codehightlighter
Now, addng styling is easy. Using Textile, you can just put your code around a <pre> and a <code> block. If you have a javascript snippet, use a class of “javascript”.
For example:
<pre><code class="javascript">
if (this.styleSets.each) {
this.styleSets.each(highlightCode)
} else {
for (var i in this.styleSets) {
highlightCode(this.styleSets[i]);
}
</code></pre>
The other available styles are “html”, “css” and “ruby”.
For example, here’s how ruby would look like:
def display_article(article = nil)
begin
@article = block_given? ? yield : article
@comment = Comment.new
@page_title = @article.title
auto_discovery_feed :type => 'article', :id => @article.id
render :action => 'read'
rescue ActiveRecord::RecordNotFound, NoMethodError => e
error("Post not found...")
end
end
And it looks easy to create other styles. See the stylesetguide.html file for details.
Update: Turns out Dan already had a fix, so if you grab the trunk, you will be fine.
Here’s his version of the patch:
for (var i=0; i < this.styleSets.length; i++) {
highlightCode(this.styleSets[i]);
}
Posted in html/css, Rails
|
Tags javascript, ruby, typo
|
0 comments
Posted on Mon May 15 16:53:00 UTC 2006
Javascript is great when it works. When it doesn’t work, it can get you from happy to miserable in less time than it takes you to say XmlHttpRequest.
Today I just found (via Ajaxian) an interesting tool that I’m adding to my arsenal when it comes to figuring out what’s happening in javascript. Definitely an invaluable debugging tool. It is called JavaScript Shell. When you embed the script, you get a command line window where you can make javascript calls directly from inside your web page.
You can call any method, inspect objects (using props), see where DOM objects are (using blink), and the killer feature, in my view, is the autocompletion using the tab key! It also features a command history, which is very convenient to try variations of the same call.
And if that wasn’t enough, you can also use the script as a bookmarklet. There is a Firefox version, and an Internet Explorer version available from Curiosity is bliss (ported to IE by Julien Couvreur).
You should try the script for yourself.
This is a great tool to debug, or even try a few things quickly and this will be a good complement to the rails console. It sure beats having to reload the page!
Posted in html/css
|
Tags debugging, javascript
|
4 comments
Posted on Fri Apr 28 15:30:00 UTC 2006
Nano See, Nano Doo has a few interesting hacks for IE7 that apply to IE7 only. The major one centers around the * html quirk that has been fixed, and it offers an alternative.
That is, if you have to use a hack. I personally prefer to put my IE specific bits in a separate css with a conditional include from the html. But sometimes, it is just easier not to have to bother with the extra machinery.
Via cssBeauty
Plus, I really like the name “nanobox” ;)
Posted in html/css
|
Tags html, ie7
|
0 comments
Posted on Tue Apr 25 14:57:00 UTC 2006
Can’t get a color palette to look just right? It takes a lot of trial and error to find the right colors. And you are probably not alone!
That’s why ColorsOnTheWeb has the perfect set of tools for you. You can start from a color and get interesting combinations (opposite, complimentary, analogous, play on tint and saturation and a whole lot more (well, don’t try with pure white: ffffff, you’ll get an overflow).
They also have a color wheel spinner where you can explore sets of 3 colors that should play well together. As you explore, you can lock colors you like till you get a pleasing set of 3.
And they also have a lot of good background information about color, how it is rendered on screen and such.
Posted in html/css
|
Tags color
|
1 comment
Posted on Tue Apr 04 16:56:00 UTC 2006
The most common source of that problem, according to few searches on google seem to point to using absolute positioning. This was not an explanation that I found too satisfying, first because I was not about to change my layout, and second because most of the references were at least 3 years old.
So I kept digging, and came accross an other solution from Tom Muck in Fix for IE selection bug. Unfortunately, this did not apply for me.
And finally, I found the most conspicuous post on the drupal site where if you don’t use the form
<link .../>
instead of
<link ...></link>
this will be enough to break internet explorer. Who would have thought! Well, maybe by now I should now better.
And the worst part of that? Well it was the second time in 2 months I needed that, and for the life of me, I could not remember what I had done the first time around. So unless this server crashes too, I’ll know where to find the solution next time.
Posted in html/css
|
Tags explorer, html
|
0 comments
Posted on Mon Mar 27 16:34:00 UTC 2006
The solution is based on Prototype 1.4.
The look of the window can be customized with css.
Head on to BlogXilinus page for a groovy demo and the full explanations.
This is a creation of BlogXiLinus and I find it quite impressive!
And it looks like there’s more coming.
Posted in html/css, Rails
|
Tags javascript
|
0 comments
Posted on Sat Mar 11 07:06:00 UTC 2006
Here’s the html used here
<html>
<body>
<div id="wrapper">
<div id="blog-header">
</div>
<div id="main-wrapper">
<div id="sidebar">
</div>
<div id="main-content">
</div>
</div>
<div id="main-bottom-space"> </div>
</div>
<div id="footer">
</div>
</body>
</html>
and the css used here:
body {
/* force footer to stick at bottom */
height: 100%;
}
/* avoid trampling on the footer by reserving some space (IE) */
#main-bottom-space {
height: 26px;
clear: both;
}
#wrapper {
position: relative;
/* force footer to stick at bottom */
height: 100%;
}
#main-wrapper {
position: relative;
}
#main-content {
float: left;
}
#sidebar {
float: right;
}
#footer {
clear: both;
/* stick at bottom */
height: 26px;
position: relative;
margin-top: -26px;
}
The key difference is to add the #main-bottom-space <div> element.
Posted in html/css, Quid Pro Quo
|
Tags html
|
12 comments
Posted on Fri Mar 10 16:55:00 UTC 2006
Using the most excellent footerStickAlt technique from The Man in Blue, I’ve modified the template to “stick” the footer at the bottom. Becomes less disctracting I think.
Posted in html/css
|
Tags html
|
0 comments
Posted on Fri Mar 10 16:34:00 UTC 2006
One common problem when using a centered layout is that when a page is short, the browser does not display a scrollbar, and when your page is taller than a screen, the browser adds a scrollbar. That’s all nice except that your painfully designed content jumps around to accomodate the scrollbar. The solution I have used is to force the scrollbar to appear all the time.
By no mean am I taking credit for this trick. I’ve modified Richard White’s template to incorporate it.
Just include this in your CSS, and voila!
/* force right scrollbar */
html {
height: 100%;
margin-bottom: 1px;
}
this will force a vertical scrollbar to appear on the right side.
Posted in html/css
|
Tags html
|
13 comments
Posted on Sat Mar 04 14:58:00 UTC 2006
Thank you Richard White for your beautiful template. In case you are interested, you can get it on Richard’s site: {height: 1%;}
Posted in html/css, News
|
Tags html
|
2 comments
