Quelques trucs pour l'extension Mybookmarks

Salut à tous,

Un petit css pour remplacer celui par défaut, bon çà vaut ce que çà vaut mais bon....

Code:: body {
width: 100%
margin: 0px;
padding: 0px;
background:#009999;
font-size: medium;
}
table {
margin:20px 20px;
background-image: url(http://pagesperso-orange.fr/fred.laury/fredTux.png);
background-position: right top;
background-repeat: no-repeat;
}
td {
margin:auto;
vertical-align: top;
}
.folder {
background : white;
border:1px solid navy;
margin: 2px;
padding: 0px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright: 5px;
width: 80%;
}
.folder h2 {
margin: 0px;
padding: 4px 2px;
background: #00aacc none repeat scroll 0% 50%;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
font-size: medium;
color: white;
text-align: center;
}
ul {
margin:4px;
padding: 0px;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
line-height: 125%;
display: block;
}
li {
border-style: none none solid;
margin-bottom: 5px;
list-style-position: inside;
display: inline;
border-bottom-width: 1px;
}
li:hover {
background: #ffffcc none repeat scroll 0% 50%;
}
a {
border-bottom: 1px solid white;
text-decoration: none;
display: block;
background-color: #cccccc;
font-family: Trebuchet MS;
font-size: 0.8em;
color: #6666cc;
}
a:hover {
font-family: Trebuchet MS;
font-size: 0.8em;
background-color: #ccccff;
color: #993300;
}
.folder h2 a {
color: white;
}
.folder h2 a:hover {
text-decoration: none;
color: #ffff88;
font-weight: bold;
}
img.favicon {
border: none;
margin-right: 3px;
max-height: 16px;
max-width: 16px;
vertical-align: middle;
}
#searchForm {
text-align: center;
}

A vous de jouer...
a+

Pour la barre de recherche, je vous propose de telecharger la page que j'ai mis en forme.
C'est du bidouillage avec du code de bookmarkshome.
c'est ici : http://pagesperso-orange.fr/fred.laury/mybookmarkstmpl.html . Clic droit sur ce lien puis "enregistrer la cible"
Ensuite il vous faudra un dezippeur, il vous faut un "dézippeur" du style 7z
Une fois que vous avez çà, c'est parti pour la trifouille.
FIREFOX etant fermé!!
Sous windows, chez moi je n'ai que çà.Aller dans votre profil, ce sera du genre "C:\DocumentsandSettings\HP_Administrateur\ApplicationData\Mozilla\Firefox\Profiles\"monprofil"\extensions",
dans ce répertoire vous allez trouver un autre dossier se nommant :"mybookmarks@ma2ten.catsyawn.net". Voilà la bête...
Dedans un dossier "chrome" et à l'intérieur un "mybookmarks.jar".c'est là que 7z entre en jeu, clic droit sur le fichier puis 7-zip puis ouvrir. l'archive s'ouvre et de nouveau des répertoires... Ouvrir le "content" et dedans vous avez "mybookmarkstmpl.html".
Ce fichier, on va le remplacer par celui que vous avez telechargé.
Selectionner le fichier "mybookmarkstmpl.html" telechargé, et faites un glisser deposer vers l'archive (que vous avez laissé ouverte), répondre "oui" à la question.Fermer 7z.Lancer Firefox, et hop....
Désolé,pour les moteurs, ce sont ceux que j'ai dans ma page, je pense que vous aurez compris comment en changer ou en supprimer.
Attention, en cas de mise à jour de l'extension, il faudra recommencer
mais bon, n'etant pas une fleche, je ne mets que très peu de temps.
a+

Bon voici la même extension avec la barre bricolée.
Ce n'est absolument pas une version officielle et les moteurs sont figés, donc pas d'ajout ou suppression en automatique. Ce sont les moteurs que j'ai (tant pis pour vous Smile

)
Je ne sais pas si l'auteur de cette extension va intégrer cette barre de recherche, d'ailleurs si il le fait, ce sera d'une meilleure façon.
Donc pour ceux que çà tente c'est là:
http://pagesperso-orange.fr/fred.laury/Mybookmarks_avec_barre.xpi

N'oubliez pas que l'originale de cette extension est encore classée expérimentale chez Mozzilla.Chez moi çà tourne bien, chez d'autre, pas moyen.
Attention, j'ai gardé le même nom d'extension (fichier rdf) donc toutes mises à jour de la part de l'auteur rendra cette modif caduque.

Ensuite pour la personnalisation, soit vous utilisez l'éditeur CSS de l'extension, soit vous passez par stylish (je préfère).
N'hésitez pas non plus à mettre vos CSS sur ce forum (Vu le nombre de personnes qui passent par ici, je vais peut être attendre des lustres mais bon..), moi j'ai des gouts de chiottes donc je ne pense pas vous offrir quelque chose de très beau.
a+

Histoire de prouver ce que je disais, en voici un, de type "citrouille", dominance orange...

Code:: body {width:100% !important;
margin: 0px !important;
padding: 0px !important;
background:#FF9900 !important;
font-size: medium !important;
}
table {
background:#FFCC66 !important;
}
td {
vertical-align: top !important;
}
.folder {
border: 1px solid navy !important;
margin: 10px !important;
padding: 10px !important;
-moz-border-radius-topleft: 8px !important;
-moz-border-radius-topright: 8px !important;
width: 90% !important;
background:#FF9900 !important;
}
.folder h2 {
margin: 0px !important;
padding: 4px 2px !important;
-moz-border-radius-topleft: 8px !important;
-moz-border-radius-topright: 8px !important;
font-size: 1.1em !important;
color: grey !important;
text-align: center !important;
background:#FF6600 !important;
}
ul {
margin: 6px !important;
padding: 0px !important;
list-style-type: none !important;
list-style-image: none !important;
list-style-position: outside !important;
line-height: 125% !important;
display: block !important;
}
li {
border-style: none none solid !important;
margin-bottom: 5px !important;
list-style-position: inside !important;
display: inline !important;
border-bottom-width: 1px !important;
background:#FF6600 !important;
}
li:hover {
background: #ffffcc none repeat scroll 0% 50% !important;
}
a {
border-bottom: 1px solid #993399 !important;
text-decoration: none !important;
display: block !important;
background:none !important;
font-family: Trebuchet MS !important;
font-size: 0.9em !important;
color:#FFFFCC !important;
}
a:hover {
font-family: Trebuchet MS !important;
font-size: 0.9em !important;
background-color: #ccccff !important;
color: black !important;
}
.folder h2 a {
color: white !important;
}
.folder h2 a:hover {
text-decoration: none !important;
color: #ffff88 !important;
font-weight: bold !important;
}
img.favicon {
border: none !important;
margin-right: 3px !important;
max-height: 16px !important;
max-width: 16px !important;
vertical-align: middle !important;
}
#searchForm {
width:100%;
height: 50px;
text-align: center !important;
margin-top:5px !important;
margin-bottom:5px !important;
background-image:url("http://pagesperso-orange.fr/fred.laury/fredTux.png");
background-repeat: no-repeat;
background-position: right top;

}

}

V0.42 avec barre

En tout merci à l'auteur car avec cette version, on peut réduire le nombre caractère descriptif
En espérant que çà continue
a+

POUSSIN Nombre de messages : 19

Salut,
une petite question : j'ai réussi à changer les couleurs pour
me créer mon CSS, mais je n'arrive pas à changer l'image. Actuellement,
j'ai toujours ton image, le tux avec la guitare.
Autre chose, est-il
possible de mettre une image de fond dans chaque dossier comme c'était
le cas avec l'extension bookmarkshome ?
Merci

Salut,

Pour le bestail à la guitare, regarde du coté de la searchForm (fin de css), tu trouveras un "background-image:url("http://pagesperso-orange.fr/fred.laury/fredTux.png");"
Enlève cette ligne, et l'image partira.
Ensuite si tu utilises Stylish, tu ne pourra pas mettre d'image faisant référence à ton disque dur.
Comme tu peux le voir, mon pingouin était hébergé sur mon site.

Pour ce qui est de l'image perso pour chaque pavé, c'est toujours possible, avec le dom inspector, tu cliques sur le pavé souhaité, tu vas voir apparaitre un truc du style "Folder_90" ou "Folder_108" etc.
Il suffit de mettre un coup de

#folder_numéro
{background-image:url("http://pagesperso-orange.fr/fred.laury/fredTux.png");
background-repeat: no-repeat;
background-position: center;
}

en rouge : à modifier
Si tu utilises des images sur ton disque dur, passes par l'éditeur Css de l'extension, çà ira mieux.
N'oublie pas d'actualiser la page après modif.
a+

Ps: si tu as un Css à proposer, tu peux le faire partager...

a+

POUSSIN Nombre de messages : 19

Ok, merci
je vais voir ce que je peux faire, mais surtout il faut que j'apprenne à utiliser dom inspector avant. Après je met mon CSS sur le site.

POUSSIN Nombre de messages : 19

Par contre je n'utilise pas stilysh (pas encore), j'ai juste modifié mon CSS à partir de l'onglet option de l'extension. Tu dis qu'on ne peux pas utiliser d'image du disque dur avec stilysh, mais est-ce possible en passant directement comme je fais ?

Oui tout a fait, tu peux.
La syntaxe sera :

"background-image: url(file:///c:/chemin/nom_de_l'image) !important;"

a+

POUSSIN Nombre de messages : 19

Ah merci ça marche
Je poste mon CSS, même si je n'ai pas encore insérer des images dans chaque dossier. J'ai un peu de mal à comprendre le fonctionnement de dom inspector.

body {
width: 100%;
margin: 0px;
padding: 0px;
background:white;
font-size: medium;
}
table {
margin:20px 20px;
background-image: url(file:///D:/WINDOWS/image_bookmarkshome/c079.gif) !important;
background-position: right top;
background-repeat: no-repeat;
}
td {
margin:auto;
vertical-align: top;
}
.folder {
background : #99CCCC;
border:1px solid navy;
margin: 2px;
padding: 0px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright: 5px;
width: 80%;
}
.folder h2 {
margin: 0px;
padding: 4px 2px;
background: #99CCCC none repeat scroll 0% 50%;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
font-size: medium;
color: black;
text-align: center;
}
ul {
margin:4px;
padding: 0px;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
line-height: 125%;
display: block;
}
li {
border-style: none none solid;
margin-bottom: 5px;
list-style-position: inside;
display: inline;
border-bottom-width: 1px;
}
li:hover {
background: #ffffcc none repeat scroll 0% 50%;
}
a {
border-bottom: 1px solid white;
text-decoration: none;
display: block;
background-color: white;
font-family: Trebuchet MS;
font-size: 0.8em;
color: #6666cc;
}
a:hover {
font-family: Trebuchet MS;
font-size: 0.8em;
background-color: #ccccff;
color: #993300;
}
.folder h2 a {
color: white;
}
.folder h2 a:hover {
text-decoration: none;
color: #ffff88;
font-weight: bold;
}
img.favicon {
border: none;
margin-right: 3px;
max-height: 16px;
max-width: 16px;
vertical-align: middle;
}
#searchForm {
text-align: center;
}

Voilà
A+

Si tu veux avoir quelques explications sur le Dom, tu peux aller voir là:
Topic sur geckozone

Notre ami Ottomar avait fait un truc plutot bien fait, disons que c'est avec çà que j'ai appris.
a+

POUSSIN Nombre de messages : 19

Re,
j'ai compris comment voir les numéros des pavées dans dom, mais je n'arrive pas à rajouter :
"#folder_numéro
{background-image:url("http://pagesperso-orange.fr/fred.laury/fredTux.png");
background-repeat: no-repeat;
background-position: center;
}"
J'ai essayé de le rajouter directement dans option de l'extension, mais aucune image n'apparait.

Tu sais des fois on a le nez dans le guidon et on ne voit pas ce qui crève les yeux..
Peux tu coller ton code pour un des pavé (#folder_**)
Je pense que ce sera plus simple.

a+

POUSSIN Nombre de messages : 19

Voici un exemple de ce que je voudrais faire pour un pavé :

#folder_52
{background-image:url(file:///D:/WINDOWS/image_bookmarkshome/achat3D.gif);
background-repeat: no-repeat;
background-position: center;
}

Le problème, c'est que dans dom, je vois pas où je peux copier ça. Et quand je copie ça directement dans le cadre StyleSheet à partir de l'onglet option de l'extension, ça ne fonctionne pas.

Voilà

Le fait de le coller dans le stylesheet de l'extension est une bonne chose.
Par contre regarde dans ton css, si tu ne vois pas çà :

a {
border-bottom: 1px solid white;
text-decoration: none;
display: block;
background-color: white;
font-family: Trebuchet MS;
font-size: 0.8em;
color: #6666cc;
}

Si c'est le cas vire cette ligne.
Sinon ton code pour le folder me parait tout a fait correct.
a+

POUSSIN Nombre de messages : 19

J'ai enlever la ligne en rouge ,et effectivement, mon image apparait.
Mais il y a un souci imprévu, le fond du pavé n'est plus blanc ou transparent, il prend la couleur de la case-titre du pavé.

Excuses pour le retard.
Voici un css de type neige.. Rolling Eyes

A la fin du Css, il y a un #folder_**, à toi de remplacer par le tien. Fais en un au départ et ensuite tu personnalises les autres.

Code:: body {
margin: 0px;
padding: 0px;
font-size:medium;
width: 100% !important;
}
table {
margin: 5px 12px !important;
background:none !important;
width: 95% !important;
}
td {
vertical-align: top !important;
horizontal-align: center !important;
}
.folder {
border: 1px solid black !important;
margin: 20px !important;
padding: 10px !important;
-moz-border-radius-topleft: 8px !important;
-moz-border-radius-topright: 8px !important;
width:90% !important;
}
.folder h2 {
margin: 0px !important;
padding: 4px 2px !important;
-moz-border-radius-topleft: 8px !important;
-moz-border-radius-topright: 8px !important;
font-size: medium !important;
color: blue !important;
text-align: center !important;
}
ul {
margin: 6px !important;
padding: 0px !important;
list-style-type: none !important;
list-style-image: none !important;
list-style-position: outside !important;
line-height: 125% !important;
display: block !important;
}
a {
text-decoration: none !important;
display: block !important;
font-family: Trebuchet MS !important;
font-size: 0.9em !important;

}
a:hover {
font-family: Trebuchet MS !important;
font-size: 0.9em !important;
background-color: #ccccff !important;
color: #3300FF !important;
}
.folder h2 a {
color: black !important;
}
.folder h2 a:hover {
text-decoration: none !important;
color: #ffff88 !important;
font-weight: bold !important;
}
img.favicon {
border: none !important;
margin-right: 3px !important;
max-height: 16px !important;
max-width: 16px !important;
vertical-align: middle !important;
}
#searchForm {
width:100% !important;
text-align: center !important;
margin-top:20px !important;
margin-bottom:5px !important;
}
.folder:hover
{background:#3300FF !important
}
#folder_55
{
background-image:url(file:///c:/P1000072.jpg) !important;
background-position: center;
background-repeat: no-repeat;
}
}

POUSSIN Nombre de messages : 19

Salut,
N'y a t'il pas un moyen de rendre transparent le background-color, car
dans mon CSS, soit l'image apparait en enlevant la ligne et tout le
pavé prend la couleur de la case-titre ; soit je laisse la ligne mais
l'image n'apparait pas car elle reste cachée derrière le
background-color: white.
Je te joint les 2 CSS pour que tu ais un aperçu :
avec le background-color: white

Code:: body {width:100% !important;
margin: 0px !important;
padding: 0px !important;
background:white !important;
font-size: medium !important;
}
table {
margin:20px 20px;
background-position: right top;
background-repeat: no-repeat;
}
td {
margin:auto;
vertical-align: top;
}
.folder {
border: 1px solid navy !important;
margin: 15px !important;
padding: 0px !important;
-moz-border-radius-topleft: 8px !important;
-moz-border-radius-topright: 8px !important;
width: 90% !important;
background:#D2B48C !important;
}
.folder h2 {
margin: 0px !important;
padding: 4px 2px !important;
-moz-border-radius-topleft: 8px !important;
-moz-border-radius-topright: 8px !important;
font-size: 1.1em !important;
color: grey !important;
text-align: center !important;
background:#D2B48C !important;
}
ul {
margin: 3px !important;
padding: 0px !important;
list-style-type: none !important;
list-style-image: none !important;
list-style-position: outside !important;
line-height: 125% !important;
display: block !important;
}
li {
border-style: none none solid;
margin-bottom: 5px;
list-style-position: inside;
display: inline;
border-bottom-width: 1px;
background:#FF6600 !important;
}
li:hover {
background: #ffffcc none repeat scroll 0% 50%;
}
a {
border-bottom: 1px solid #99CCCC !important;
text-decoration: none;
display: block;
background-color:white;
font-family: Trebuchet MS;
font-size: 0.8em;
color: #6666CC;
}
a:hover {
font-family: Trebuchet MS;
font-size: 0.8em;
background-color: #ccccff;
color: #993300;
}
.folder h2 a {
color: white;
}
.folder h2 a:hover {
text-decoration: none;
color: #ffff88;
font-weight: bold;
}
img.favicon {
border: none;
margin-right: 3px;
max-height: 16px;
max-width: 16px;
vertical-align: middle;
}
#searchForm {
text-align: center;
}
#folder_52
{background-image:url(file:///D:/WINDOWS/image_bookmarkshome/achat3D.gif);
background-repeat: no-repeat;
background-position: center;
}
}

Sans le background-color white (tu n'aura pas l'image puisqu'elle est sur mon DD):

Code:: body {width:100% !important;
margin: 0px !important;
padding: 0px !important;
background:white !important;
font-size: medium !important;
}
table {
margin:20px 20px;
background-position: right top;
background-repeat: no-repeat;
}
td {
margin:auto;
vertical-align: top;
}
.folder {
border: 1px solid navy !important;
margin: 15px !important;
padding: 0px !important;
-moz-border-radius-topleft: 8px !important;
-moz-border-radius-topright: 8px !important;
width: 90% !important;
background:#D2B48C !important;
}
.folder h2 {
margin: 0px !important;
padding: 4px 2px !important;
-moz-border-radius-topleft: 8px !important;
-moz-border-radius-topright: 8px !important;
font-size: 1.1em !important;
color: grey !important;
text-align: center !important;
background:#D2B48C !important;
}
ul {
margin: 3px !important;
padding: 0px !important;
list-style-type: none !important;
list-style-image: none !important;
list-style-position: outside !important;
line-height: 125% !important;
display: block !important;
}
li {
border-style: none none solid;
margin-bottom: 5px;
list-style-position: inside;
display: inline;
border-bottom-width: 1px;
background:#FF6600 !important;
}
li:hover {
background: #ffffcc none repeat scroll 0% 50%;
}
a {
border-bottom: 1px solid #99CCCC !important;
text-decoration: none;
display: block;
font-family: Trebuchet MS;
font-size: 0.8em;
color: #6666CC;
}
a:hover {
font-family: Trebuchet MS;
font-size: 0.8em;
background-color: #ccccff;
color: #993300;
}
.folder h2 a {
color: white;
}
.folder h2 a:hover {
text-decoration: none;
color: #ffff88;
font-weight: bold;
}
img.favicon {
border: none;
margin-right: 3px;
max-height: 16px;
max-width: 16px;
vertical-align: middle;
}
#searchForm {
text-align: center;
}
#folder_52
{background-image:url(file:///D:/WINDOWS/image_bookmarkshome/achat3D.gif);
background-repeat: no-repeat;
background-position: center;
}
}

Peux tu essayer ceci :

Code:: body {width:100% !important;
margin: 0px !important;
padding: 0px !important;
background:white !important;
font-size: medium !important;
}
table {
margin:20px 20px;
background-position: right top;
background-repeat: no-repeat;
}
td {
margin:auto;
vertical-align: top;
}
.folder {
border: 1px solid navy !important;
margin: 15px !important;
padding: 0px !important;
-moz-border-radius-topleft: 8px !important;
-moz-border-radius-topright: 8px !important;
width: 90% !important;

}
.folder h2 {
margin: 0px !important;
padding: 4px 2px !important;
-moz-border-radius-topleft: 8px !important;
-moz-border-radius-topright: 8px !important;
font-size: 1.1em !important;
color: grey !important;
text-align: center !important;
background:#D2B48C !important;
}
ul {
margin: 3px !important;
padding: 0px !important;
list-style-type: none !important;
list-style-image: none !important;
list-style-position: outside !important;
line-height: 125% !important;
display: block !important;
}
li {
border-style: none none solid;
margin-bottom: 5px;
list-style-position: inside;
display: inline;
border-bottom-width: 1px;
background:#FF6600 !important;
}
li:hover {
background: #ffffcc none repeat scroll 0% 50%;
}
a {
border-bottom: 1px solid #99CCCC !important;
text-decoration: none;
display: block;

font-family: Trebuchet MS;
font-size: 0.8em;
color: #6666CC;
}
a:hover {
font-family: Trebuchet MS;
font-size: 0.8em;
background-color: #ccccff;
color: #993300;
}
.folder h2 a {
color: white;
}
.folder h2 a:hover {
text-decoration: none;
color: #ffff88;
font-weight: bold;
}
img.favicon {
border: none;
margin-right: 3px;
max-height: 16px;
max-width: 16px;
vertical-align: middle;
}
#searchForm {
text-align: center;
}
#folder_52
{background-image:url(file:///D:/WINDOWS/image_bookmarkshome/achat3D.gif);
background-repeat: no-repeat;
background-position: center;
}
}

On va y arriver...
a+

POUSSIN Nombre de messages : 19

Parfait,
Qu'as-tu changé ?

.folder {
border: 1px solid navy !important;
margin: 15px !important;
padding: 0px !important;
-moz-border-radius-topleft: 8px !important;
-moz-border-radius-topright: 8px !important;
width: 90% !important;
background:#D2B48C !important;
}

A partir du premier Css, simplement cette ligne en rouge, en fait, tu demandais à ce que le fond de tous les pavés soit de la couleur #d2b48c donc forcément les éventuelles images de personnalisation de folder étaient masquées.
En tout cas, çà fait plaisir de pourvoir enfin dialoguer avec quelqu'un.
a+

POUSSIN Nombre de messages : 19

Merci pour tout,
je pense que beaucoup d'utilisateur de l'extension bookmarksome ne connaissent pas encore mybookmarks. Donc forcément le trafic sur ton site doit être limité !
Mais si l'extension devient officiel et référencée sur geckozone, il y fort à parier que cela change.
A+

Au fait, t'as vu qu'avec la mise à jour de l'extension, on pouvait limiter le nombre de caractère des liens.
Je pense que l'auteur se rapproche tout doucement de Bookmarkshome, et c'est tant mieux pour nous.
a+ et bonne appétit.

Bon voici à quoi ressemble actuellement mon Firefox et ma page d'accueil avec "Mybookmarks".
Image de fond issue du super site de "CrystalXP".
Quelques trucs pour l'extension Mybookmarks Theff

Quelques trucs pour l'extension Mybookmarks Theff

» Pages de styles pour MyBookmarks