howto

How to beautify old websites

26/01/09

Posté par x2b4 dans english

Aucun commentaire

In this world of an endless quest for information (I’m speaking of the great Internet), it is common to stumble upon old websites or websites that have been generated by an old software. A perfect example of this would be howtos, which, while they are very useful, really look like someone shitted on my monitor. Since I’m using one the Best Browser(tm), that is Firefox, I’ve been trying to tackle this problem. The angle of attack will be userContent.css. Many Firefox hacks are based on this file. To have more information on this file and on how to create it (and where), please read the Customizing Mozilla page.

In this file, we will be adding a new set of rules which will give a default behavior to old web pages. Some things to note about these changes. First, I did not include !important so that newer websites can still define their styles. Secondly, I’ve spent some times in adding/removing tags so that the very vast majority of websites are unaffected by theses changes, while the old websites are much better (in my opinion). Here are the content of the file:

body { font-family: Calibri, Verdana, Arial, Helvetica, sans-serif; }
h1 { font-size: 175% }
h2 { font-size: 145% }
h3 { font-size: 120% }
h4 { font-size: 105% }
h5 { font-size: 80% }
h6 { font-size: 65% }
a[href] {color: #1133ff;}
a[href]:hover{text-decoration:underline;}
a[href]:visited{color: #1133ff;}
code,kbd,pre,samp,tt { font-family: Consolas, "Courier New", Courier, monospace; }
hr {
color: #999999;
background: transparent;
height: 1px; /* Required for IE/Win */
padding: 0;
border-color: #999999;
border-width: 1px;
border-style: none none solid none;
}
ol { list-style: decimal outside; }
ul { list-style: round outside; }
ol ul,
ol ol ul,
ol ul ul,
ul ul,
ul ol ul,
ul ul ul {
list-style: square outside;
}
table{
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
fieldset { border: none; }

You can download the file directly, if you prefer so. After that, restart Firefox, and browse to an old website.

Here is a comparison of the two rendering (before/after).

Before:

After:

, ,

Le service bluetooth se tire une balle dans le pied

16/08/08

Posté par x2b4 dans howto

1 commentaire

Voulant transférer un beau fond d’écran sur mon nouveau téléphone portable Samsung E700, je décrète que les cables usb sont désuet et que je vais utiliser une belle connexion Bluetooth avec du bon cancer dedans que c’est chouette. Tout marche bien jusqu’à au début, ou il faut que j’associe à la main mon périphérique. Je précise que j’utilise le logiciel de Samsung, qui, si il est loin d’être pourri, n’est tout de même pas le top. Outre les boutons skinnés à la moche (c’est dingue le nombre d’applications qui se disent qu’elles vont imposer une skin à l’utilisateur), c’est que du windows pourri et en plus ça bug à moitié. Donc voilà mon téléphone apparié, mais cela ne marche toujours pas. Grâce à mes nombreux neurones encore fonctionnels, je découvre qu’il faut que je crée à la main une connexion COM dans windows. Sitôt dit sitôt fait, sauf que Windows me crache une belle erreur :

“Erreur de service bluetooth” : “Accès refusé”

Ce qui n’est pas très sympa. Fort heureusement, Google est mon ami (enfin plus trop mon ami maintenant qu’ils me fliquent partout, mais bon, on va faire avec) et je trouve ce merveilleux article qui explique que le service Bluetooth ne possède pas les bons droits pour s’exécuter que c’est fort. La correction (copié collé du site susnommé, n’allez pas croire que je me suis fait chier à taper tout cela):

  1. Cliquez sur “Démarrer” -> “Panneau de configuration”
  2. “Outils d’administration” -> “Services”
  3. Clic droit sur “Bluetooth support service”
  4. “Propriétés”
  5. Onglet “Connexion”
  6. Sélectionnez “Compte système local” au lieu de “Ce compte”
  7. Ok
  8. Clic droit sur “Bluetooth support service”
  9. “Redémarrer”

Et là, magie de l’informatique, tout marche. J’installe mon beau fond d’écran que je peux crâner maintenant avec. D’ailleurs comme je suis vachement sympa et qu’il est trop beau, je le mets en dessous. Et ouais chuis comme ça moi.

Real use of Safari on Windows : Nice fonts on your Linux box

15/06/07

Posté par x2b4 dans english

6 commentaires

compass.pngRecently, I tried (as many) the recent beta of Safari on Windows. While the experience was far from nice (crashes, problem with rendering…) I noticed something very interesting : Apple is including the latest version of their Lucida Grande font in the package. This is quite nice, because the only version you can usually find on the Internet are old one with some characters missing (most notably the €). This package comes with the 5.0 version which is, I believe, the latest. These fonts are very readable at small font size, so they are a (among some others) perfect choice for a system font. It’s no surprise that the MacOS X desktop looks slick with these fonts. But now you can also have them in you Linux box ! Here are the instructions for Ubuntu, you can adapt them for Debian or your other distro of choice. If you don’t want to extract the font yourself, skip the first part.

Part 1 : Download and install Safari in Wine, then extract the fonts

First of all, install Wine. You can do this with tutorials, synaptic, or terminal and:
sudo apt-get install wine
Then download the Safari for Windows package at the Apple download site. Execute it with wine either by double clicking on it (if your system is configured for that) or with:
wine SafariSetup.exe
Once safari is installed, go to the install folder (“C:\Program Files\Safari\” by default, on Linux with wine this is “~/.wine/drive_c/Program Files/Safari/”) and browse the Safari resources directory called “Safari.resources”. Here are your precious fonts ! You also have a nice Safari picture for your blog ;-) . Copy them to your home directory or any other location and remove Safari (useless).

Then you have two nice files. Lucida Grande.ttf and Lucida Grande Bold.ttf.

Part 2 : Install the fonts

First, you will have to copy the fonts to your ttf font directory. Create it if it doesn’t exist yet:
sudo mkdir -p /usr/share/fonts/truetype/ttf
Copy the fonts:
sudo cp Lucida\ Grande\ Bold.ttf /usr/share/fonts/truetype/ttf/
sudo cp Lucida\ Grande.ttf /usr/share/fonts/truetype/ttf/
And reconfigure the fonts:
sudo dpkg-reconfigure fontconfig
You may also have to restart X with Ctrl+Alt+Backspace (save your work before that !). Go to your favourite font preferences (on Ubuntu this in System->Preferences->Font) and select Lucida Grande as the default font for everything with non-fixed font (ie Terminal/Code). Size 10 is very readable but a little big, and you can use the bold variant for the window title. If you are running also KDE apps or running the KDE desktop, you can select the same fonts and improve coherency among your system.

Update :

Osman shares with us this great tip ! If you want to install it as user font, just copy it to your font directory in your user profile.
mkdir -p ~/.fonts
cp Lucida\ Grande\ Bold.ttf ~/.fonts
cp Lucida\ Grande.ttf ~/.fonts

No more needs for a sudo !

Notes :

  • You can also extract the fonts from a Windows box. The rest is the same.
  • If your font doesn’t appear or has problem, check the files permissions in /usr/share/fonts/truetype/ttf/
  • On my flat panel, I have the following in use in my font preferences
    • Full hinting
    • Subpixel smoothing on (RVB order)