Introducing FindrBar, a free CSS Mac OS Finder Bar for your site

  • 2
  • Idea
  • Updated 7 years ago
Hey all.

I haven't been on the forum for a while because I've been working on something, and now I'm going to unveil it to you all. I've been trying to re-create the Mac OS 'Finder bar' in CSS and HTML, and I've come up with this: FindrBar

I call it: 'FindrBar' and it's very easy to install, simply upload findr.html, findr.css and bg.png to your file manager and add a few lines of code to your page. Full installation and customization instructions are included in the archive. But I'm going to briefly outline installation/customization here.

Embedding FindrBar into your page

<!--
1. Ensure that the 3 main files are uploaded to your file manager.
2. Place this code onto every page you want to have FindrBar on:

<iframe src=”/PATH/TO/FINDR.HTML” width=”100%” height=”20” scrolling=”no
border=”0”><p>NO IFRAME INDICATION TEXT</p></iframe>

3. Make sure you have replaced '/PATH/TO/FINDR.HTML' to the actual file path and 'NO IFRAME INDICATION TEXT' to the text you want to appear if your user's browser does not support iframes
-->

Changing the Name



<!--
The area outlined in red is the 'Name', by default it is 'FindrBar:' but that's easy to change. Simply open 'findr.html' in Notepad or an alternative (But not MS Word, it messes things up), and find this line: <span class=”name”>FindrBar:</span> and change 'FindrBar' to the desired name, save it and upload to your file manager.
-->

Adding/Removing/Changing Links



<!--
All of these links can be changed, more can be added, it's up to you. Altering the links is a bit more complicated. The text in the link area on the default download aren't active, so you need to delete this line: <span class="p"> Home About cbooth.tk Facebook Twitter</span>

To add links, type this text into the place that the dummy text used to be in: <span
class=”p”>...</span> In the place with the '...' you can put links in using the <!--<a href...></a> syntax, separating the links with  
-->

You can customize it more by:

1. Changing 'bg.png' to a different image (IT MUST BE 20 PIXELS IN HEIGHT, OTHERWISE IT WON'T WORK)
2. Editing 'findr.css'

If you have any questions or problems, feel free to ask me. Be warned, you may want to try it on a test site first, I've tested it on mine and it works fine, but it may be worth it just to check if it works.

Thanks,
Callum Booth

P.S. You guys are the ONLY people to know about this, I haven't released to anyone else yet :)
Photo of Callum

Callum

  • 357 Posts
  • 32 Reply Likes
  • happy

Posted 8 years ago

  • 2
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
This is cool! Great job Callum!! It rocks! :)

Nathan
Photo of Callum

Callum

  • 357 Posts
  • 32 Reply Likes
Thanks Nathan, Glad you like it! :D
Photo of Callum

Callum

  • 357 Posts
  • 32 Reply Likes
<!--
Just a quick update, under 'Adding/Removing/Changing Links' there is an error, this line:
<span class="p"> Home About cbooth.tk Facebook Twitter</span> should be
<span class="p">&emsp;Home&emsp;About&emsp;cbooth.tk&emsp;Facebook&emsp;Twitter</span>

And 'separating the links with ' should be 'separating the links with &emsp;'

It seems that GetSatisfaction interprets entities even when theyre commented out, strange
-->
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks for letting us know!
Photo of Callum

Callum

  • 357 Posts
  • 32 Reply Likes
Forgot to mention this, but in the site-builder, it won't appear at the top of the page, it will appear at the top of the HTML widget you put it in, it'll only appear at the top on the preview and your live site :) Just thought I'd mention it
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yeah, it does that to all of my HTML widgets that have CSS positioning.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
This is kind of an old topic, but do you have any updates on this cool Finder Bar?

Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Also, it says on Drop Box that the file isn't found.
Photo of Callum

Callum

  • 357 Posts
  • 32 Reply Likes
Hi Nathan, I haven't updated it in a while, I've had other projects I've been working on. I'll check my Dropbox to see what's going on, it should still work...
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks Callum!