May
13
2008











Archive for the ‘Code’ Category

by @ 20:14   All | Code | Tech   Permalink

Customising Firefox 3

Tuesday, May 13th, 2008

If, like me you have recently upgraded to Firefox 3 and you have spent years using Tabbed Browser Preferences to manage your tabs position in the window, colour, order etc etc, then you, like me, are quite disappointed with the lack of configuration the tab bar has within Firefox 3.

Developer Comments: This extension is an enhancement for the basic tab controls provided in Firefox 1.0. It replaces the existing user interface with a new, more visible user interface, and also includes UI for other hidden features that are part of the browser, as well as features provided explicitly by the extension.

Tabbrowser Prefs is not currently available for Firefox 3 on Windows or Linux, which left me feeling frustrated. I would love to have felt annoyed, but can you really be annoyed when the info to build your very own plugin is out there?

I decided I had to do something. I had to have my tab bar on the bottom of the window at least. So, I went off and researched it.

After about 5 minutes I found out that the main interface to Firefox is controlled entirely by CSS. This is perfect. I located the CSS style sheet, googl’d some more and found the CSS variables needed to modify the interface settings. So now I am going to share it with everyone of you.

Ubuntu Hardy Heron Version

Open up nautilus and show hidden files. then navigate to:

  1. /home/.mozilla/firefox/your.profile/chrome

By default userChrome.css fie does not exist, so you need to create it before you can start adding your preferences. There’s actually an example file that exists by default, called userChrome-example.css. You can just rename that file by removing the -example part. Then open this file in leaf/mouse pad or any other text editor and add the following code and save it.

  1. /* Display the tabbar at the bottom */ #content > tabbox { -moz-box-direction: reverse; }

Windows XP/Vista Versions

Open up My Computer or File Explorer and show hidden files. then navigate to:

  1. C:\Documents andSettings\[UserName]\ApplicationData\Mozilla\Firefox\Profiles\your.proifile\chrome

By default userChrome.css fie does not exist, so you need to create it before you can start adding your preferences. There’s actually an example file that exists by default, called userChrome-example.css. You can just rename that file by removing the -example part. Then open this file in notepad or any other text editor and add the following code and save it.

  1. /* Display the tabbar at the bottom */ #content > tabbox { -moz-box-direction: reverse; }
Page 2 of 3123

PHP code to check server status

Tuesday, October 3rd, 2006

Borntwisted came up with a wonderful idea to check that his free host was running without having to visit the a page or check the ftp.

He wrote a short piece of HTML that would pull an image off his website, if the server failed to respond the ALT tage would display OFFLINE.

I like to code things in php so I decided to take this a step further and not actually use any images, thus saving on bandwidth on my server everytime the page loads.

The full code is at the bottom of this post but I am going to break it down and try to explain how each section works.

First of all we need to connect to the server and check to see if a file exists. This file can be anything you like, I chose to use an image called online.gif.

I declared a variable call $url which holds the data needed to connect to the server. @fopen is the php command to connect to the server and open the chosen file. The reason the @ symbol is used is to supress the error that will be returned when the file cannot be found.

Using "r" tells the command we want to open the file in read only mode.

PLAIN TEXT
PHP:
  1. <?
  2. $url = @fopen("http://path_to_server/online.gif", "r");

Now we use a simple ifelse statment to output the correct part of the formula. The first part of the formula as below asks if the condition is true (if file exists) and will output the command below it.

PLAIN TEXT
PHP:
  1. if ($url) {

Before the command is outputted we have to close the connection to the file for security purposes. fclose closes the connection to the server which is defined again by our variable $url.

PLAIN TEXT
PHP:
  1. fclose($url);

Now we can output the following command if the file is found on the server. Basically this is the TRUE part of the conditional statement. We now ECHO a line of code to the browser which will be converted into HTML and displayed as what you will see. Do not worry about the div's and classes, that is just CSS styling for the page I have this code on.

PLAIN TEXT
PHP:
  1. echo("<div class='holder'><div class='name'>SG Status:</div> <divclass='online'></div></div>");
  2. }

The following code is the FALSE part of the staement, which is outputted if the above connection cannot find the file. It has similar styling to the above command but this time you will notice that the div class is set to "offline". This is so a different colour is displayed.

PLAIN TEXT
PHP:
  1. else {
  2. echo("<div class='holder'><div class='name'>SG Status:</div> <div class='offline'></div></div>");
  3. }
  4. ?>

That's all there is to it. The code is simple and works well. If you use this code you may notice that when the file is removed by yourself the script doe snot update, this is simply because of the server it is on. Sometimes servers take a few minutes to update.

The code as a whole is listed below and I have also added the CSS that I have used. Modify to your needs.

PLAIN TEXT
PHP:
  1. <?
  2. $url = @fopen("http://path_to_server/online.gif", "r");
  3. if ($url) {
  4. fclose($url);
  5. echo("<div class='holder'><div class='name'>SG Status:</div> <div class='online'></div></div>");
  6. } else {
  7. echo("<div class='holder'><div class='name'>SG Status:</div> <div class='offline'></div></div>");
  8. }
  9. ?>

PLAIN TEXT
CSS:
  1. .holder{
  2. width:80px;
  3. margin-left:5px;
  4. }
  5.  
  6. .name{
  7. float:left;
  8. }
  9.  
  10. .online{
  11. text-align:center;
  12. width:8px;
  13. height:8px;
  14. padding:2px;
  15. background:#75f475;
  16. float:right;
  17. border:1px solid #000;
  18. margin-bottom:2px;
  19. }
  20.  
  21. .offline{
  22. text-align:center;
  23. width:8px;
  24. height:8px;
  25. padding:2px;
  26. background:#ef2424;
  27. float:right;
  28. border:1px solid #000;
  29. margin-bottom:2px;
  30. }

Page 2 of 3123

Dynamic Menus for WordPress

Thursday, April 27th, 2006

The standard WordPress navigation menu is limited in that it does not show sub menus. it will list every single page on your website in one long list in the navigation section.

For larger sites this can become troublsome. Who wants 50 links running down the side of the page just for the content. It can also be very confusing to site visitors.

I decided I needed a simple script to display the sub menu only when the parent page was clicked, - a working example of this is on the right hand side of this page - so I wrote a little script to do this, and in the spirit of open source, here is the turorial so that you can make it yourself.

Page 2 of 3123

Styling individual comments for WordPress

Thursday, April 20th, 2006

I wanted a little script that would allow me to have specific styles for individual comments depending on the authour.

I had a look around for WordPress plugins and other info, but could not find anything that actually worked.

So I wrote my own little switch statment to sort it all out.

PLAIN TEXT
PHP:
  1. <?php
  2. switch (comment_author_email){
  3. case ($comment->comment_author_email == 'friend@friend.com'):
  4.        $style = '<div class="friendcomment">';
  5.   break;
  6.   case ($comment->comment_author_email == 'you@you.com'):
  7.        $style = '<div class="authorcomment">';
  8.   break;
  9.   default:
  10.       $style = '<div class="defaultcomment">';
  11.   break;}?>
  12.  
  13. <?php echo $style; ?>

This involves modifying the comments.php file in your theme folder.

Find:

PLAIN TEXT
PHP:
  1. <cite><?php comment_author_link() ?></cite>

And add this code above that line: Make sure you put the correct email addresses in.

PLAIN TEXT
PHP:
  1. <?php
  2. switch (comment_author_email){
  3. case ($comment->comment_author_email == 'friend@friend.com'):
  4.        $style = '<div class="friendcomment">';
  5.   break;
  6.   case ($comment->comment_author_email == 'you@you.com'):
  7.        $style = '<div class="authorcomment">';
  8.   break;
  9.   default:
  10.       $style = '<div class="defaultcomment">';
  11.   break;}?>
  12.  
  13. <?php echo $style; ?>

Now find:

PLAIN TEXT
PHP:
  1. <?php comment_text() ?>

Add the following on the line below:

PLAIN TEXT
CSS:
  1. </div>

That's it for the comments.php file. Now open your style sheet, usually called style.css and add the following rules to the end of your style sheet, modify to yoru own needs.

PLAIN TEXT
CSS:
  1. .authorcomment {
  2. background: #ffffcc;
  3. padding:10px;
  4. border:2px solid #000;
  5. color:#333;
  6. min-height:90px;
  7. }
  8. .friendcomment {
  9. background: #fff;
  10. padding:10px;
  11. border:2px solid #000;
  12. color:#333;
  13. min-height:90px;
  14. }
  15. .defaultcomment {
  16. background: #eee;
  17. padding:10px;
  18. border:2px solid #000;
  19. color:#333;
  20. min-height:90px;
  21. }

Thats everything. Save and upload your files and see for yourself.

Page 2 of 3123

New WordPress Theme and Mod available

Monday, April 10th, 2006
Morning Theme

Morning Theme

Quite aptly named, since it was very early in the morning that I created this :-)

WordPress has hundreds of themes out there for you to choose from. I know there to be at least 700 as I search through a huge list looking for something that would suit my needs.

Each to there own though, because I couldnt find one remotely close to what I wanted. So, after 2 hours I had my first layout up and running. Since then I have been tinkering with the style and finally made this.

It is by no means the last style I will create, but for now it is here to stay.

You can find this Theme in the downloads section under WordPress Themes and Mods. But, if your too lazy to click through to there, you can just click here

Festive Images

On that same page you will find the Festive Images mod. You can also see it running at the top of this site. Just wait till Easter. It allows you to have a certain image show up on a certain day. Ideal for having your Cristmas logo displayed over Cristmas, and you will not have to remember to upload it and edit the file.

Once you have added your dates to the script, and told it where to find each new image. just save it, upload it and your done.

Automation at its best.

Page 2 of 3123

Linkies

Contact