I recently had a go at installing the excellent Wood Shelves Summerboard* theme on my iPhone, but found the process of adding a theme manually a blind stumble. It involves using SFTP to connect to the phone, but various tutorials had outdated information, and I had to cobble together the various snippets until I got it to work.
So, just in case this is useful for someone else, here’s how I got it to work. This assumes you’ve already jailbroken your iPhone, and have installer.app and Summerboard installed, ready and waiting for you.
How to connect to your iPhone (1.1.4) and add a Summerboard theme:
Via Installer.app, install BSD Subsystem and OpenSSH (found in the ‘System’ Category)
Go to Settings> Wi-Fi > (Network Name) and click on the blue arrow to get your IP address.
In Transmit (or other SFTP capable app), enter the following information to connect:
IP Address
Username: root
Password: alpine (not ‘dottie’!)
Mode: SFTP
Once connected, navigate to /private/var/mobile/Library/Summerboard/Themes. There are, it seems, 2 locations for Summerboard themes, but for the 1.1.4 iPhone, this is the one SMB prefs reads from – iPod Touch may be different.
Upload the theme folder and change permissions on the folder (and its contents) to 755
The theme will now show up in the SMB prefs menu! Hurrah!
Vishal Parpia reminded me that you should disable SFTP by removing OpenSSH afterwards, otherwise your iPhone becomes eminently hackable. If you can work out how to change the root user password, so much the better!
*(a theming app for the iPhone and iPod Touch’s ‘Springboard)
Before now, I’ve felt quite protective of my site skins, and have always stated “Feel free to modify the CSS to suit your own tastes, but please don’t redistribute”. This stems from vanity to be truthful – I spend a long time creating these themes, and don’t want other people getting the credit!
That was how I used to think though. As time goes on, I feel like I’m becoming more communistopen when it comes to the web. Besides, I have little time to update the themes, and carry out feature/bug requests, and they’re both at a point where I’m happy with them. Sure, there’s so much you could do to them, but the original intention was to create something for myself. Which is where you come in.
These themes are now both “do what you like with them”. Take out the bits you don’t like, put in new bits, whatever. Feel free to re-distribute them anywhere you like, whether slightly tweaked or massively altered. They’re yours to do with as you please! Give them a good home and let me know what do with them (hopefully something better!)
I’ve been using Flickr as a bit of testbed for a new site theme I’ve been working on for Google Reader. C’mon after the Bloglines thing, I bet you saw it coming didn’t you?!
Same drill again then. There may well be oddness and inconsistencies, and Google may well make radical changes to the Reader’s markup tomorrow, mucking the whole show up. But for what it’s worth, here it is! Its not trying to be original or ‘better’ than the default theme, it’s just trying to make it look like a Mac OS X app – that’s all I want!
Actually, while this may create bugs, it actually solves a bug that I was seeing in WebKit browsers with the default css. When scrolling, some sidebar elements would annoyingly bounce up and down. Not any more!
The download includes a list of known bugs/todos. If you seen anything not on this list, please leave a comment! I’ll update this page when I upload newer versions of the theme.
Changes
17/4/07 – Fixed 2 bugs that were annoying most people: I’ve reinstated feed list highlighting and pressing U now shows the entries list full width
Installation
Download gReader.zip. There are 2 versions, one for Mozilla browsers and one for WebKit & Opera.
Firefox
Once you have the Stylish extension installed, just copy and paste the css into the ‘create styles for this page’ window.
Camino
In Camino, either paste this into your /Library/Application Support/Camino/chrome/userContent.css file, or if that file doesn’t exist, rename the greader.css file to be userContent.css. The theme will be applied when you restart Camino.
Safari
Once Safaristand is installed, place the greader.css file in your user/Library/Safari/Stand/UserStyleSheets folder. Then visit Google Reader, go to SafariStand > Settings > Site Alteration. Add the site, enable Site Alteration and choose the greader file from the list. Make sure the matching pattern is just www.google.com. You may have to empty your cache, restart Safari and refresh before seeing any changes!
Omniweb
In Site Preferences > Page Appearance, choose the greader.css file under ‘Style Sheet’. The change should happen instantly!
Opera
Put the greader.css file anywhere you like! Right-click on the Google Reader page, choose "Edit Site Preferences" and select the CSS file through the display tab, under ‘My Style Sheet’. Like Omniweb, the change should apply immediately.
Have you found this theme enhances your life beyond all telling?
Please consider donating some spare change to the Hicksdesign Cheese Fund:
Since last weeks update, I’ve not only refined the Safari style buttons, but the iTunes style buttons too. These look miles better, so if you’re using the round buttons, please re-download and install.
This will be the last update to the Omniweb theme for a while, but I will be updating my Camino theme with these new icons soonish.
Whenever anyone has asked me if I was going to a Firefox theme, I tell them there’s no point. There’s a chap called Aronnax, who has created some beautiful themes that make Firefox feel a whole lot more like a Mac product.
Recently, his site at spymac has been down a lot, so I offered him the Take back the web.org site as something more reliable. I felt it was so important that his themes are as available as possible, as they really make Firefox liveable on a Mac. He’s redesigned too, take a look.
Just what the world doesn’t need right now – yet another spotlight style for NetNewsWire! There are many fine ones already available on the interweb, but none of them were quite how I wanted them to be, so here’s mine.
Here’s an overall shot (I just wanted to show you how nice NNW looks with a minimal-no-toolbar approach). Click for a full-size image:
I couldn’t think what else to call it, so for the moment its an egotistical self-named style. Any suggestions?
If you’d like to give it a spin, download the style here: hicksdesign.nnwstyle.zip, and double click the file to install it (thanks to Jason in the comments for pointing out this easy install route). Please Note, you must have the beta of NNW 2 of NNW 2 Lite for this to work. User stylesheets are not supported in earlier versions.
Update. Brent Simmons has asked me to produce a version without the fixed header and footer. Apparently, there is a bug in WebKit where scrolling goes too far when you have fixed elements. So here’s a fluid version with no fixed elements:
When I last explained how to hack Firefox to get Safari style tabs, there was a missing element – close buttons on each tab. There is an extension to do this called Tab X, but it only seems to work on the Mac when using certain themes, not including the default mac theme. Fortunately, a nice fella called Chad has now created a mac version, which you can install directly from here, and it works a treat.
There are just a few fixes that need to applied after this. I couldn’t get the preference to hide the tab-bar close button to work. No problem, this just gets added to the userChrome.css file:
/* Tab X mods <strong>/
/</strong> ------------------------------------------------------- <strong>/
.tabs-closebutton-box { /</strong> hides the tab bar close button */
display: none !important;
}
Also, when used with the Safari tab styling, the position of the close button is a little too high, but this sorts it out:
Finally, a separate problem I’d come across was with site favicons. Sometimes I’d get a favicon 16px high but 32px wide – presumably when the 32×32px resource was included in the favicon. This sorts that out:
This has been a personal project since February, and even though its not finished, I feel the need to get something out as a starting point. The thing is, there are so many flippin’ icons in Omniweb, and while I don’t want to change them all, I do want to change a lot of them. The goal here (as always) was not to create a highly original theme. I just wanted something that blended into OS X as much as possible.
Originally, the theme was a redraw of my Camino theme, but I tried a straight rip-off of the safari/finder style buttons, and found that I much preferred this look. This is now the main style, but the rounder ‘iTunes’ style is there as an additional installation option. The rest of the icons are partly inspired by Stephen Horlanders icons for Firefox (mainly the history and RSS feed icon), but I’ve redrawn these myself, rather just steal them!
I have also supplied a ‘restore’ installer if you want to revert back to the original icons.
Also in the download, is a folder called ‘Goodies’, which contains extra applescripts, web badges, workspaces and a very simple shapeshifter theme, to remove the shadow on the bookmarks toolbar. Most people will probably like to keep the shadow, and even those that aren’t, probably wouldn’t go to the extent of installing a theme just for that. In short, if you want to use it, its there.
Main toolbar icons – Mark Page/Next Mark/Previous Mark
Updates and feedback
I intend to add more replacement icons to this set in the future, as well a improve the existing ones. I’ll be posting details of updates to my ‘OS X Browser News’ section, so the RSS feed will let you know when new versions are uploaded.
I’d particularly like your feedback on the status bar icons. Should they be in colour, or stay grey, or a combination of the 2? I can’t decide, but I’ve gone with mainly grey icons in this release. If you do like the theme, but there is a particular button that you use that I’ve not covered yet, let me know.
Update – I’ve done a quick to revision to solve a couple of issues people were having. Please re-download.
My previous modifications to the Firefox Toolbar have one problem. Certain extensions’ toolbar icons become borked. This is due to forcing a css priority, unintentionally overriding css rules for these icons.
The fix is simple, the following rules just need to be re-applied in userChrome.css, after the rules for the main toolbar:
As a CSS designer, I’m really enjoying the ‘customisablity’ of Firefox with a language that I understand. I can’t program, but I can do CSS, which it uses to define the look of its interface.
Here’s another little mod for OS X* Firefox users. It emulates an aqua version of Safari’s upside down tabs. I personally love this style, and prefer the more compact size of them compared to Firefox’s default tabs (which are designed to emulate the window title bar).
All you need to is quit Firefox, download these files, and pop them into your Firefox profile’s chrome folder. (*Please note, this is designed to use the default pinstripe theme as its basis – it won’t work on windows – sorry!). If you’ve already made changes to your userChrome.css file, you’ll need to add the enclosed css rules in your file. Please let me know if you have any problems using this mod (there have been some issues for people using the Sage mods posted earlier).
Thanks to Kevin Gerich, who helped me solve the last hurdle in creating these – changing the text size. I’d never used the CSS property font: icon, before.
Following on from the previous post, I’ve made some improvements to the form widgets CSS for OS X. Phillipe pointed out to me how to add background images to <input> tags by setting the border to solid 0px white, and the background colour to transparent. So, buttons, textfields and textareas can now look like this in Firefox:
If you’d like to have a go at implementing this, you can download all the images and css here. All you have to do is put the files into your Firefox profile directory:
(users> you> Library> Application Support> Firefox> Profiles> yourprofilenumber> chrome>).
Pros:
The button includes an active state that shows the dark graphite colour when the button is clicked. I’ve also removed the dotted inner ring around the button text when its selected.
I’ve also used original OS X resource files to make the button images. This means they have alpha transparency and will ‘sit’ on any coloured background.
Cons:
To acheive the button look, I’ve taken an approximate ‘average’ size button. This won’t scale when the text size is increased, or the text is too large for the button. You’ve got about 100 pixels and thats it. Its enough for phrases like “Google Search” but not quite enough for “I’m feeling lucky”.
Also, if a webpage has already got some styling associated with widgets, then things get a bit messy.
So its a step closer, and it does make a difference to using Firefox. Any PC reader (and maybe many mac users) probably don’t get why this is so important. Select menus, radio buttons and checkboxes are harder to alter though, so there’s a task for someone with more time than me!
I’ve only recently discovered the power of Mozilla’s ‘user content’ files that reside in the profile directory. I’d created a user.js file to add preferences for things like pipelining, but I’d never looked into the others – ‘userChrome.css’ (for tweaking the interface), and ‘userContent.css’ (for tweaking the web page display).
Here are the tweaks and customisation that I’ve done to my copy of Firefox to give you an idea. First of all, make life easy for yourself and install Chris Neale’s ChromEdit extension. This allows you to edit the user files from within Firefox. Once you’ve restarted, ‘Edit User Files’ will appear under the Tools menu.
userChrome.css
Firefox is a an XUL application which means that the display of the interface is controlled by the same CSS we all know and love. The only real hard part is finding the name for each element – something that DOM Inspector tool is good at revealing.
Copy and paste this first example into userChrome.css, and the changes will take effect when Firefox is restarted.
download {
border-bottom: 0px !important;
}
This removes the dashed line beneath each item in the Download Manager. By giving the rule priority – !important; – we can make sure that this overrides rules in the default theme. This one prevents the ‘throbber’ (spinny thing on the OS X toolbar) from displaying, something thats hard to get rid of:
#throbber-box {
display: none !important;
}
This also makes it easy to make small interface tweaks without having to create a special theme. In order to know what rules to overide, you might find it easier to find the classic.jar file inside Firefox>Contents>MacOS>Chrome and unzip it. This is where all the pinstripe theme CSS is kept.
Here, I’ve changed the appearance of the tabs slightly with new images to make the corners less rounded.
Place the images into your Firefox profile directory:
(users> you> Library> Application Support> Firefox> Profiles> yourprofilenumber> chrome>).
userContent.css
With this file, we’re going to try and improve Firefox OS X’s form widgets. If you’re unfamiliar with the term ‘widgets’, it refers to the various form elements – input, textarea, select etc. These aren’t native in the OS X version, and they may never be, but here are some rules that you can drop into the userContent.css file to improve the form buttons a little:
Unfortunately, the aliasing on a Mac is a bit ropey, so keeping the border quite light helps to hide this a little bit. Its something that I’m sure someone can take further, but at least its an improvement on the older PC style widgets. (Anyone know of a way of applying a background image to an ?!).
I’ve also had a go at form fields, but there is less you can do with these. If you use these rules then at least they don’t have that harsh appearance:
Those of you who are registered users of Saft will now have the latest preview version with the new sidebar feature. The plugin nature of the sidebar (each panel can be a web page, perl script or shell script) has got me wondering about what useful little widget I could put in there.
Here’s my first idea. After hacking the excellent Feedonfeeds news aggregator script, I’ve made a little OS X style RSS sidebar. Feedonfeeds is a php/MySQL solution that you can install on your site, rather than using a desktop client. From here I can click the unread number to view the latest feeds, the grey number to see all the recent entries, and the blog name to go straight to the site. The first 2 open in a simplified format – very like the RSS Reader/Sage extension for Firefox, and the upcoming Safari RSS reader.
All the menus are faked with CSS, but it helps it look like its part of the browser, rather than a separate web page:
(It makes it so much easier when you’re writing CSS for just one browser!)
The advantage of a browser based, non-local solution is that its always up to date. I can access it from anywhere, and pick up where I left off. Downsides? Just one so far – It isn’t as good as NetNewsWire at detecting feeds. Where the XML has errors it just gives up. I’m giving it a trial for a while, I’m not sure yet whether it would replace NNW. After all, NNW 2 is going to be introducing a sync feature – great if you use more than one machine.
If this looks like the kind of thing you’d like to use, let me know. If people are interested, I’ll clear it with the creator before uploading the additonal files to create the sidebar.
Next, I think I might have a crack at creating a plugin similar to the Web Developer Extension for Mozilla and Firefox.
That’s right. I’ve just received a new Saft beta, with the sidebar that I’ve been bellyaching about for months! To be honest, alhough I pestered Hao for this feature, I never really thought it would be possible, but hey, it never hurts to ask. Hao seems to like a challenge however, and he’s been kind enough to allow me to post screenshots here.
This version works the same as other releases of Saft. The plug-in goes into the Library>InputMangers folder replacing the previous version. Once launched, Safari then has the ‘Show Sidebar’ command in the Safari menu (this is a temporary position).
At the moment, once opened, there is no way to close it (this is a beta after all), but I get the feeling that I’ll probably leave it open most of the time.
Thankfully, Hao decided on a Finder-style sidebar, rather than an OS X drawer. These always look a bit stuck on to me (although I’m warming to them more these days).
As you can see, the sidebar sits underneath the tab bar, and its width is adjustable as you would expect. At the moment there are 4 ‘panels’ – bookmark searching, history, Versiontracker RSS and a google search. In the real release, Hao says that “one should be able to add RSS feeds, URL shortcuts like the one for Google, sidebars for local html files”. Superb! I had wondered whether downloads should go in there too, but as the recent builds of Shiira has shown, this could be a bit too cramped.
At the moment, just the bookmark search doesn’t work. Each of the panel buttons toggle the content beneath it (click to show, click to hide). Scrollbars come in when this pushes content below the window.
History is searchable, so although it only shows the last 12 places, as you type in the search field, the history is filtered.
The prelimary RSS panel shows just Versiontracker posts for now, but this works just fine. With all of these panels, command-clicking links opens them in new tabs, as you would expect.
Finally, the google search panel actually loads the google homepage in the sidebar, while search results are automatically opened in a new tab. This gives you a few more options than the toolbar google search, but I’m not sure I’d use this over the toolbar option.
The beauty is, each of these panels is just a html page, which I’ve styled with CSS. Hao explains: “The extended parts of sidebars are really just a mini web page. For history, bookmarks and RSS feeds, there are html templates in Saft’s resources folder. You can just modify it to whatever you like. Also, in the same way as adding RSS feeds, I will add support for sidebar template in a way that user supplies a folder with a plist file, which points to a html file, URL or a script file that generate HTMLs, so you can add almost anything to the sidebar…”(!).
Updated: Hao has done further work into the extensibility of the sidebar, and extra sidebar items can easily be added as .plugin files. As mentioned above. these can other web pages (local or remote – I’ve now got one set up for adding links to my textpattern setup), RSS feeds, and in the future – scripts such as perl or shell. So you can have whatever you want going on in there! The first application of this that I can see is a Safari version of the Firefox Web Developer Extension. Although not all would work in Safari, it would be an easy way to add a large folder of development bookmarklets to Safari.
Here’s an example. I’ve made a simple sidebar plug-in to view my Shortstats in the sidebar:
Thats all there is to say at the moment, except that I’m like a boy who’s just been told he can fly a real X-Wing Fighter. This has got real possibilities!
To install this set, all you have to do is go to Shiira’s icon preferences, choose ‘load icons’, and navigate to the ‘ShiiraIcons.plist’ inside the Hickstheme folder. This will load the main toolbar icons. If you want to use plain folder icons to clean up the interface (along with some other improvements), these have to copied manually into > Shiira (ctrl-click to choose ‘show package contents’)> contents> resources>. Just a replacement icon for icon preferences is yet to be done.
I’ve come up with a very lo-fi hack for creating bookmark menu separators in Safari. By combining a grey line favicon, with the most minimal page title I could find (unfortunately, Safari doesn’t allow blank titles) you can get a passable separator. If you like the look of example above, simply go to http://sep.hicksdesign.co.uk/, and bookmark it. Once in your bookmarks it can copied into other folders by alt-dragging.
Updated: As clever clogs Shaun Inman has pointed out in the comments, you can remove the title completely by editing the bookmarks.plist file and changing · to . Safari accepts this and just leaves with the grey line.
Updated again: If you prefer to use a plain-as-possible favicon (a single-pixel of pinstripe colour) then go to http://sep2.hicksdesign.co.uk/ instead.
I’ve just tweaked my metal theme for Camino to work with Aqua and Panther. It’s essentially the same, but the toolbar icons have been reworked to be brighter and not so heavy around the edges. Its also got a hint of graphite colour just to lift it.
Finally, I’ve finished (for now) the new theme for camino. Intended for use with a metal interface, it contains new icons, buttons and splash screens for nearly the entire camino set. Click here for information, previews and download…
I’ve just uploaded a couple of new buttons to the camino resources page – Open Tab and Close Tab. My intention is to add to this set in the future (maybe even get round to doing a full set?!). I’d like to have a go at things like the popup unblocker icon.
I’ve also updated the Metal theme to work with the recent nightly build – 17th May – which includes the popup unblocker. As new features get introduced into Camino, you will need to check here for a new version (or else those nice new features won’t work!).
Finally, there is an issue of speed when using the metal theme with recent nightlies. If you have the google search in the toolbar, it will be slower to scroll and type inside textfields (can be quite painful actually!). Unfortunately, there is nothing that can be done about this (and don’t bother Mozilla about it, this is a hack, not part of their original application). This may change as the nightlies change, who knows?
Twitter
Flickr
Zootool
Last.fm
Vimeo
Huffduffer
