personnaliser Firefox avec le userChrome.css

[ottomar]

je ne suis plus jeune, je suis juste géostationnaire
[beigbeder : windows on the world]

arf !
et maintenant un cod'ottomar simplificant !
marque-pages sur plusieurs étages
multi-rows bookmarks
(puisque notre public est internachional !)

(juste régler la hauteur de la scrollbox)

Code : Tout sélectionner

.bookmarks-toolbar-items .box-inherit.scrollbox-innerbox
{
display:block !important;
height: 48px !important;
}
.chevron
{
display:none !important;
}

et c'est tout ! ottomarrant, hein !

[besnath]

bonjour à tous,
voila je suis nouveau sur votre forum, ceci est mon premier post et je viens chercher une réponse à mon problème ou je butte depuis un petit moment.

je viens de me créer un thême mais par stylish (désolé pour les puriste )et je bloque sur une bordure voila un petit screen pour comprendre:
j'aimerais en faites reproduire cette bordure (ou alors qu'elle existe à la base mais je me rappelle plus le nom de la fonction css) sur le personnal toolbar.
si une âme peux m'aider j'en serait trés heureux.

ps: c'est mon premier post mais je n'ai pas trouvé ou me présenter veuillez m'excuser.

[ottomar]

bonjour besnath
si je comprends bien (je comprends souvent de travers) tu veux une bordure autour de la barre perso des marque-pages
(si j'ai mal compris, excuse-moi, et répète un peu plus fort : je suis un peu sourd-dingue)

Code : Tout sélectionner

#bookmarksBarContent
{
border : 2px solid #cacaca !important;
/* pour l'arrondir */
-moz-border-radius : 4px !important;
}

pour la présentation, tu as dit 'bonjour', c'est pas si mal et ça doit leur suffire
je ne me souviens d'ailleurs pas que ça ait jamais existé

☎#cacaca : c'est un joli gris argenté

[besnath]

merci de ta réponse mais ... non sa marche pas
c'est la barre perso tout court pas des marques-pages(enfin je crois ...)
voici le code css de ma modification tu y verras plus clair:

Code : Tout sélectionner

#main-window #navigator-toolbox #PersonalToolbar
{
	-moz-appearance: none !important;
	background-image: url("ici c'est ma donnée URI") !important;

 padding: 0 3px 1px 3px !important;

background-position:  left, right !important;
background-repeat: no-repeat !important;
background-color: #000000 !important;
height: 122px !important;
}
#main-window #navigator-toolbox #PersonalToolbar toolbarbutton
{
	padding: 0 5px !important;
}

#main-window #navigator-toolbox #PersonalToolbar toolbarbutton > label
{
	color: white !important;
}

#main-window #navigator-toolbox #PersonalToolbar > toolbaritem > menubar > menu
{
padding-top: 2px;
margin-bottom: 1px !important;
}

#main-window #navigator-toolbox #PersonalToolbar > toolbaritem > menubar > menu > label
{
color: white !important;
}

#main-window #navigator-toolbox #PersonalToolbar .toolbarbutton-menu-dropmarker
{
	margin-left: 0px;
	list-style-image: url() !important;
}

[ottomar]

re !

la barre perso toolbar#PersonalToolbar est bien celle qui contient les marque-pages
elle ne contient qu'un seul toolbaritem (à la racine, si tu veux) : toolbaritem#personal-bookmarks
qui contient les marque-pages : toolbarbutton.bookmarkitem et en aucun cas un menubar
s'il s'agit d'un dossier de marque-pages il contiendra un menupopup
qui contient les marque-pages simples

j'ai l'impression que tu mélanges la barre de menu et la barre personnelle
euhhh...
installe le dom-inspector, apprends à t'en servir et amuse-toi avec stylish pour peaufiner la chose

l'arborescence de la barre perso :
toolbar#PersonalToolbar > toolbaritem#personal-bookmarks > hbox#bookmarksBarContent > toolbarbutton.bookmark-item > menupopup (si c'est un dossier)

[besnath]

installe le dom-inspector, apprends à t'en servir et amuse-toi avec stylish pour peaufiner la chose

ok, c'est que je viens de faire.
c'est vrai qu'il y a moyen de vite se perdre, reste à prendre en main le dom.
merci encore.

[ottomar]

Quelques petits changements dans la barre d'onglets pour fx-3.6

tab[selected="false"] n'opère plus, juste un peu gênant pour les onglets que qu'on avait déjà sélectionnés mais que qu'on n'était plus dessus
il y a tout de même de quoi s'amuser dans ses narines avec beforeselected (celui avant) afterselected (celui après) lastselected (sélectionné avant le celui que vous êtes dedans) et surtout, surtout ce que ça m'arrange bien last-tab que ça vous dit que c'est le dernier onglet que ça m'arrive de pas le savoir mais que ça me met pas le vertige quand même. (point)

donc...
onglet tout court, pas sélectionné, pas déjà ouvert, le défaut, quoi ! : tab
onglet sélectionné et ouvert : tab[selected="true"]
onglet déjà sélectionné mais lâchement abandonné : tab[lastselected]
dernier onglet du rail : tab[last-tab="true"] attention et c'est bêta, quand il les ouvre, apparemment le panda ne sait pas qu'il y en a un (dernier) il l'apprend que quand il est au bord de l'abîme ! donc ne s'active que quand vous y êtes aussi (au bord du trou)

le mien code barre d'onglets

Code : Tout sélectionner

/* ============================= */
/* ====== BARRE D'ONGLETS ====== */
/* ============================= */

/* les rails */
.tabbrowser-strip
{
   	border:none!important;
   	border-bottom:1px solid #920202 !important;
    margin-top:-4px!important;
    max-height:18px!important;		
}

/* le train */
.tabs-stack
{
-moz-appearance:none!important;
   	border:none!important;
	background:transparent!important;  
}

/* les absents (ont toujours raison) */
.tab-icon,
.tab-close-button,
.tabs-bottom,
.tab-icon-image
{
	display:none!important;
}

/* les wouagons */
.tabbrowser-tab
{
-moz-appearance:none!important;
   	border:none!important;
	margin-left:4px !important;
    max-height:20px!important;
    /* décommentez si vous prévoyez des panneaux de signalisation */
    /* background-image:url("LA-VOTRE-IMAGE") !important; */    
	opacity:0.6!important;
	margin-top:1px!important;
-moz-border-radius-bottomleft: 0px !important;
-moz-border-radius-bottomright: 0px !important;
-moz-border-radius-topleft: 8px !important;
-moz-border-radius-topright: 8px !important;	 	
}
.tabbrowser-tab *,
.tabbrowser-tab .tab-text
{
    background:transparent!important;  	
}

/* les destinations */
tab label
{
	font-family:speculum!important;
	font-weight:bold!important;
	color: #cacaca !important;
	font-style:italic!important;
	text-align:center!important;
	font-size:10px!important;
	padding-left:12px!important;
	padding-right:12px!important;	
}
tab:hover label
{	
	color:#ffffff!important;
}
tab:hover,
tab:hover label
{
	cursor:pointer!important;
	opacity:1!important;
}

/* wouagon essayé mais quitté */
tab[lastselected] label
{
	color:#000!important;
	font-style:normal!important;		
}

/* la lanterne du dernier wouagon */
tab[selected="true"][last-tab="true"] label,
tab[last-tab="true"] label
{
	color:#FF6868!important;
	font-style:normal!important;	
}

/* le wouagon-lit */
tab[selected="true"]
{
	opacity:1!important;
    background-image:url("/data/images/firefox/onglet6.png") !important;
}
tab[selected="true"]:hover
{
	opacity:1!important;
}
tab[selected="true"] label,
tab[selected="true"]:hover label
{
	color:#fff!important;
	font-style:normal!important;	
}

/* calibration des wouagons */ 
.tabbrowser-tabs .scrollbox-innerbox 
{
-moz-box-pack:center!important;
}

/* ============================= */
/* ===/// BARRE D'ONGLETS ====== */
/* ============================= */

[besnath]

@ ottomar
question boutons de la fenetre de la bibliotheque j'ai un petit bug j'ai lu tes posts sur le sujet mais j'ai rien trouvé sur les boutons en tout cas pas l'id qui s'y réferre.

[ottomar]

salut,
tu veux dire que ton bouton va-et-vient est de la mauvaise taille ?
en fait, ce doit être le même (et la même taille) que le va-et-vient de la fenêtre principale
c'est le cas ?

☎
le code :

Code : Tout sélectionner

#placesToolbar #back-button

[besnath]

en faites ouais mais dans mon style j'avais du rajouter une marge mais en faites je viens de trouver j'a irajouté ça pour combler l'espace :
/* Special hack for back and forward button library (bibliotheque) */
#placesToolbar> #forward-button{
margin-left: 0px !important;
}
c'est de la dépann' mais sa marche
ps: il existe pas une sorte de tuto complet ou l'on verrais les id et avec une fleche le bouton qui la compose
par exemple les boutons de navigation #nav-bar > #back-button forward-button un truc du style .

[bormat]

salut à tous
si vous voulait réduire vos icones facilement pour gagner de la place

Code : Tout sélectionner

window#CustomizeToolbarWindow toolbarbutton:not([type="updates"]):not([class="box-inherit"]):not([id="go-button"]):not([id="menu-button"]) .toolbarbutton-icon, 

toolbar#nav-bar > toolbarbutton:not([class="box-inherit"]):not([id="menu-button"]) .toolbarbutton-icon, 

toolbar#toolbar-menubar > toolbarbutton:not([class="box-inherit"]):not([id="menu-button"]) .toolbarbutton-icon, 

toolbar#nav-bar > toolbarpaletteitem toolbarbutton:not([class="box-inherit"]):not([id="menu-button"]) .toolbarbutton-icon, 

toolbar#toolbar-menubar > toolbarpaletteitem toolbarbutton:not([class="box-inherit"]):not([class="chevron"]):not([id="menu-button"]) .toolbarbutton-icon,
toolbar#PersonalToolbar > toolbarbutton .toolbarbutton-icon  {

	max-width: 30px /*à modifier*/ !important;

	max-height: 25px /*à modifier*/ !important;

	padding: 4px 8px 5px 6px !important;
/*code à rajouter si voulez une image de fond derriere chaque icone */
background: transparent url("urldevotreimage") no-repeat !important;
	}

[bormat]

salut à tous
je sais qu'on peux faire des arrondis avec border radius mais est il possible de faire

un angle comme ça _\
juste pencher le bord haut vers la gauche sans l'arrondir

[bormat]

bonjour est ce que quelqu'un a un code pour mettre une image en bordure de navigator toolbox indépendemment de l'image de fond

[Pastisman]

Bonjour,

Je ne sais pas ce qu'est navigator toolbox, mais tu peux peut-être tenter le pseudo-format "before:" ou "after:"

[Freddy]

bonjour,

Pour l'instant j'utilise pas cette fonction, mais par curiosité j'ai fais des essais.
J'arrive à faire qqchose avec les codes indiqués à cette page ,mais j'avoue ne pas avoir complètement saisi l'utilisation des valeurs
La manipulation du css et encore assez nouveau pour moi (depuis Mars) et en plus j'ai pas vraiment pris le temps de bien décortiquer l'affaire, et MON niveau d'anglais fait que justement l'anglais ne M'appartient pas ,donc traduction automatique pour saisir de quoi ça parle...

Ce que je pense avoir compris en tout cas, c'est que tout n'est pas forcément bien détaillé dans cette page, et qu'ailleur on arrive un peu mieux à cerner la manip, par exemple:
http://www.suburban-glory.com/blog?page=111
http://www.lrbabe.com/sdoms/borderImage/index.html

En tout cas ce qui n'est pas bien précisé non plus (mais pour toi ce sera peut-être une évidence) ,c'est que d'après mes essais il faut faire un gros trou dans l'image , en fait il faut que la partie centrale soit un espace vide (et donc en .png), sinon elle remplace l'image que tu as déjà en fond.
Et peut-être aussi qu'au début on comprend mieux ce qui se passe en choisissant une valeur de bordure assez grande.

J'espère que je suis pas hors-sujet par rapport à ta question.