Contenu | Rechercher | Menus

Annonce

Si vous avez des soucis pour rester connecté, déconnectez-vous puis reconnectez-vous depuis ce lien en cochant la case
Me connecter automatiquement lors de mes prochaines visites.

À propos de l'équipe du forum.

Pages : 1

#1 Le 22/11/2017, à 21:01

Bigcake

Personnalisation de firefox57

Bonjour,

Suite à mise à la poubelle de nombreuses fonctionnalités permettant la modification de l'interface de manière "user-friendly",
Et dans l'espoir qu'ils ne mettent pas à la poubelle la prise en charge de ce fichier dans les versions futurs...  je me suis penché sur le fonctionnement de leur fichier userChrome.css qui permet de refaire une personnalisation de l'interface d'une manière beaucoup plus poussé mais aussi beaucoup plus compliqué.

Je vous partage donc mes découvertes dans ce post:
- Pour refaire passer la barre des onglets au dessous de la barre d'url et la barre des raccourcis
- Pour retrouver des onglets Australis (arrondis + courbés)
- Cacher le bouton "Suivant" quand y n'y a pas de page suivante
- [En cours] Fusion du bouton "Précédent" avec la barre d'adresse

Mon conseil quand vous modifiez ce fichier : faites pas à pas, fonctionnalité par fonctionnalité en fermant/relançant firefox entr chaque changement

Hésitez pas demander d'autres si d'autres trucs sont possible, j'ai trouvé beaucoup de fonctionnalités, que j'utilise pas forcément ou que j'ai omis (genre transparence de barres qui peut être utile dans certains cas)
Hésitez pas non plus à partager vos éventuelles découvertes, je les rajouterais dans ce 1er post

La première chose à faire est de créer le dossier 'chrome' qui n'existe peut être pas dans votre profil firefox
si vous ne connaissez pas votre dossier de profil, il est retrouvable à l'url "about:profiles"

Ensuite tout se passe dans le fichier 'userChrome.css' qu'il faudra créer s'il n'existe pas dans le dossier chrome ci-dessus.

- Pour refaire passer la barre des onglets au dessous de la barre d'url et la barre des raccourcis, il faut réorganiser la "priorité" des barres.

#PersonalToolbar {
    -moz-box-ordinal-group: 2 !important;
}
#TabsToolbar {
    -moz-box-ordinal-group: 3 !important;
}

- Pour retrouver des onglets Australis (arrondis + courbés)
J'ai réglé la transparence à 40% pour l'onglet et le hover à 20%, c'est ce qui me plait, si vous avez envie d'une transparence différente faite moi signe wink

/* --------------------- Reset globale -------------------------- */
.tabbrowser-tab::before,
.tabbrowser-tab::after {
    border: none !important;
}
.tabbrowser-tab > .tab-stack > .tab-background {
    background-image: none !important;
    -moz-box-orient: horizontal !important;
    background-color: transparent !important;
    margin-top: 0px !important;
    border: none !important;
}
.tab-background[selected="true"] {
    border: none !important;
}
.tab-line {
    display: none !important;
}
.tab-bottom-line {
    display: none !important;
}
/* --------------------- barre d'onglets  -------------------------- */                                                                          
.tabs-newtab-button {
    -moz-margin-end: -15px !important;
}

.tab-background[selected="true"]::before {
    border: none !important;
    content: "" !important;
    width: 30px !important;
    min-height: 30px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='33px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='33' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255, .4);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
    display: -moz-box !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    margin-left: -15px !important;
}

.tab-background[selected="true"]::after {
    border: none !important;
    content: "" !important;
    width: 30px !important;
    min-height: 30px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='33px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='33' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255, .4);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
    display: -moz-box !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    margin-right: -15px !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
    border: none !important;
    content: "" !important;
    width: 30px !important;
    min-height: 30px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='33px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='33' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255, .2);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
    display: -moz-box !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    margin-right: -15px !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
    border: none !important;
    content: "" !important;
    width: 30px !important;
    min-height: 30px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='33px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='33' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255, .2);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
    display: -moz-box !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    margin-left: -15px !important;
}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
    background-image:
    linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0) ),
    linear-gradient( transparent 2px,
                     rgba(255,255,255,.2) 2px,
                     rgba(255,255,255,.2) ),
    none !important;
    margin-top: 0px !important;
}

.tab-background[selected="true"] > spacer {
    background-image:
    linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0) ),
    linear-gradient( transparent 2px,
                     rgba(255,255,255,.4) 2px,
                     rgba(255,255,255,.4) ),
    none !important;
    margin-top: 0px !important;
}

- Cacher le bouton "Suivant" quand y n'y a pas de page suivante:

#forward-button[disabled="true"] {
display: none;
}

Dernière modification par Bigcake (Le 23/11/2017, à 01:35)

"Les gens" ne sont pas cons, ils ont été habitués à la facilité et à la désinformation. Le meilleur moyen de ne pas les aider, c'est de se moquer. Le meilleur moyen de les aider, c'est de les informer, encore et encore. La réflexion viendra. N'oubliez pas que vous aussi, vous êtes le con d'un autre.
Smartphone+GNU/Linux=Librem5

Hors ligne

#2 Le 22/11/2017, à 22:10

Coeur Noir

Re : Personnalisation de firefox57

Oh des onglets arrondis !

…pas mal mais ça n'a pas non plus le même look qu'avant ? Ces onglets sont transparents, et n'ont pas la même forme… c'est toi qui a re-créé ça ou t'es parti de quelque chose d'existant ?

Débuter ⋅ Doc ⋅ Bien rédiger ⋅ Retour commande ⋅ Insérer image | illustrations & captures d'écran < ⋅ >

Hors ligne

#3 Le 23/11/2017, à 01:29

Bigcake

Re : Personnalisation de firefox57

Le look n'est pas totalement identique, mais ça ressemble assez pour me convenir, donc j'ai pas cherché plus loin, j'ai trouvé les courbes dans le css de quelqu'un d'autre, mais son css part en cacahouètes avec les autres modifs que je fait du coup, je l'ai adapté à mon besoin.

Pour les onglets non sélectionnés totalement transparent, c'est ce que j'ai actuellement sur FFesr52 j'ai même pas tilté ce point.
Faudrait que je regarde ce que ça fait sur un profil vierge pour le proposer ^^!

Dernière modification par Bigcake (Le 23/11/2017, à 01:38)

"Les gens" ne sont pas cons, ils ont été habitués à la facilité et à la désinformation. Le meilleur moyen de ne pas les aider, c'est de se moquer. Le meilleur moyen de les aider, c'est de les informer, encore et encore. La réflexion viendra. N'oubliez pas que vous aussi, vous êtes le con d'un autre.
Smartphone+GNU/Linux=Librem5

Hors ligne

Pages : 1