[TUTO] Embellir votre page Sky-anime Radio! (firefox)

Tutoriaux divers, Logiciels, dessin, trucs et astuces, problèmes ,,, Faites partager votre expérience.

Modérateur: Modérateurs-Chef

[TUTO] Embellir votre page Sky-anime Radio! (firefox)

Messagepar Sugoisuge » Lun 04 Mai 2015, 16:27

Bonjour à tous!

Pour les utilisateurs de firefox et de la radio de Sky anime, voici donc comment j'ai modifié la monotone page blanche de la radio :
Image

Bien sûre le choix de l'image, ses proportions, positions etc sont autant de choses que vous pourrez personnaliser vous-même!

Tout d'abord j'ai utilisé le module complémentaire de firefox "greasemonkey" il faut donc se le procurer.

Ensuite j'y ai crée un script (ou plutôt j'ai recherché un script qui autrefois était facilement trouvable, mais au fil des années devient de plus en plus dur à retrouver)
Donc, après installation de greasemonkey : créez un nouveau script! Une fenêtre se lancera :
Image
Dans la case "Nom" choisissez le nom du script (j'ai choisi "Radio Sky anime background").
Dans la case "Espace de nom" dont j'ignore l'importance, pourtant case obligatoire à remplir, j'ai choisi ce que j'ai trouvé dans le script de base : "http://localhost" (comme vous pouvez le voir dans le screenshot précédent).
Les autres cases peuvent rester vierges, validez le script!
Votre nouveau script ressemble donc à ça :
Image
Maintenant supprimez les 3lignes en dessous de "// @namespace http://localhost"
Puis copiez et collez directement sous cette ligne tout ce qui suit (attention, après avoir collé ils vont dire qu'il faut d'abord autoriser le collage en écrivant simplement "autoriser le collage" faites le, écrivez simplement cette phrase dans le script puis effacez là, et vous serez autorisé à faire un "ctrl+v" (qui signifie coller en raccourci clavier) :

// @include http://radio.sky-animes.com/*
// @version 1.0
// ==/UserScript==

// ###########-----------------###########
// ########### SET VARIABLES ###########
// ###########-----------------###########

// Background Image
var bgImgSrc = "http://www.google.com/url?sa=i&source=imgres&cd=&ved=0CAkQjBw&url=http%3A%2F%2Fhdwallpapers.cat%2Fwallpaper%2Fshibuya_rin_black_dress_singer_anime_brown_hd-wallpaper-1379265.jpg&ei=Zl9HVZryCc7iaJLfgeAM&psig=AFQjCNGkeWBzh_fCEx_UwAeS7ONRReCaBg&ust=1430827238247506";

// Footer Text Color; #666666 is default
var footerColor = "< < < TEXT COLOR > > >";

// Google + Name Text Color; #666666 is default
var gPlusNameColor = "< < < TEXT COLOR > > >";

// ###########-----------------###########
// ########### END VARIABLES ###########
// ###########-----------------###########


// Get the style attribute of the body element and the size of the background image and the size of the window
var bodyStyle = document.getElementsByTagName("body")[0].style;

// Set the background image and associated attributes
bodyStyle.backgroundImage = "url('" + bgImgSrc + "')";
bodyStyle.backgroundAttachment = "fixed"
bodyStyle.backgroundRepeat = "no-repeat";
bodyStyle.backgroundPosition = "top right";
bodyStyle.backgroundSize = "100%";

// Fix that stupid, 1 px bar
document.getElementById("footer").getElementsByTagName("div")[0].style.borderTop = "0px";

// Make the Google Logo a transparent .svg so that it looks less terrible (encased in an IF statement in case of google doodles messing things up)
if (document.getElementById("hplogo")) {
document.getElementById("hplogo").src = "http://upload.wikimedia.org/wikipedia/commons/2/20/Google-Logo.svg";
}

// Change text colors to above values (encased in IF statements in case of Google+ or anything else messing things up)
if (document.getElementById("footer")) {
for (i = 0; i < document.getElementById("footer").getElementsByTagName("a").length; i++) {
document.getElementById("footer").getElementsByTagName("a")[i].style.color = footerColor;
}
}

if (document.getElementById("gbg6")) {
document.getElementById("gbg6").getElementsByTagName("span")[0].style.color = gPlusNameColor;
}


Voilà tout le contenu du script dont vous pouvez donc choisir de personnaliser le contenu, comme la ligne var bgImgSrc = "lien de l'image", le lien étant juste le lien de l'image que j'ai choisi, choisissez vos propres images :)
J'ai essayé plusieurs images, il semble que la page radio sky anime a un peu de mal à accepter n'importe quelle image, notamment les trop grandes???
Mais j'utilise aussi ce script pour google et d'autres sites (mais pas wiki qui semble refuser d'être embelli). Alors, la ligne bodyStyle.backgroundAttachment = "fixed" signifie que votre image ne bougera pas peu importe que vous utilisiez la molette de souris pour aller en haut ou bas de page :
Image
Image
Image
Remplacer "fixed" par "no-fixed" vous permettra de voir le haut de l'image lorsque vous êtes en haut de page, le bas lorsque vous descendez :
Image
La ligne bodyStyle.backgroundRepeat = "no-repeat"; est une sorte de verrouillage de mosaïque, si vous remplacez par "repeat" cela fera que lorsque vous descendez en bas de page, si l'image est finie, comme un wallpaper en mosaïque l'image recommencera...
La ligne de position n'est pas celle que j'utilisais dans une version precedente du script, celle ci est moins personnalisable par des amateurs comme nous...
En effet : bodyStyle.backgroundPosition = "top right"; actuellement je sais que l'on peut écrire les positions "bottom, center, left" etc mais ca reste peu de positions, autrefois dans une version du script que je ne retrouve plus désormais... la ligne était écrite différemment et nous permettait de choisir la position au pixel près ( top moins 50px par exemple où left +250px ) ce qui permettait vraiment une précision de positionnement... dommage je ne retrouve plus du tout quelle était la commande à écrire dans le script pour obtenir cette précision :'(
Et là ligne bodyStyle.backgroundSize = "100%"; evidemment on peut personnaliser le pourcentage mais aussi des mots sont acceptés, je ne connais que "cover", en effet j'ai trouvé ce script avec bodyStyle.backgroundSize = "cover" par défaut et cela faisait que l'image prenait une taille qui correspond à la taille de la page, en largeur, de gauche à droite, si je ne me trompe pas.

Pour les derniers screenshots présentés vous voyez que j'ai utilisé le script pour google, en fait la ligne // @include http://radio.sky-animes.com/* est la ligne définissant sur quels sites sera utilisé le script, et l'astérisque * signifie que tout ce qui suit est inclu (le vrai lien radio est http://radio.sky-animes.com/?random=all mais j'ai remplacé ?random=all par * pour que le script soit actif sur tout site commencant par http://radio.sky-animes.com/ peu importe comment le lien se termine)
vous pouvez écrire autant de ligne // @include que vous désirerez ainsi que des lignes // @exclude si vous le souhaitez aussi.
Pour google, en fait je n'utilise pas https://www.google.fr/ mais https://encrypted.google.com/ mais cela ne change pas grand chose mais donc j'ai un script de background avec les lignes :
// @include http://encrypted.google.com/*
// @include https://encrypted.google.com/*
Mais pour vous si vous préférez ça sera :
// @include http://www.google.fr/*
// @include https://www.google.fr/*
// @include http://www.google.com/*
// @include https://www.google.com/*
et si vous voulez exclure des pages googles telles que :
// @exclude https://www.google.fr/maps/*
// @exclude https://www.google.com/calendar/*

J'ai détaillé je pense tout ce que je sais sur le sujet, voici 2 derniers screenshots pour montrer le script Radio background dans son ensemble, tel que je l'utilise :
Image
Image

J'espère que ça vous plaira :) Je vous souhaite une bonne continuation !
Sugoisuge
 
Message(s) : 2
Inscrit le : Lun 04 Mai 2015, 13:55

Retour vers ¤ Tutoriaux ¤

Qui est en ligne ?

Utilisateur(s) parcourant ce forum : Aucun utilisateur inscrit et 1 invité

cron