Abgerundete Ecken bei Adressleiste

MonztA

Achso ok. :wink:

loshombre

Dr. Evil: Der "Suchleiste-Code" würde mich auch brennend interessieren!

Dr. Evil

heute wirds nichts mehr, jetzt gibts Essen, und zur Zeit sieht die Leiste einfach nur bescheuert aus

loshombre

Gut! Dann warten wir! Lass es dir schmecken! Und mit der Adressleiste hab ich auch noch so meine Progleme! Code ist drin, die kleinen *pngs auf der Platte, und? Nichts tut sich! Pfad ist natürlich angepasst!

Gruß
loshombre

Edit: Adressleiste-Problem gelöst!(Ein anderer Code war im Weg). Sieht schön aus! Da bin ich auf die Suchleiste schon gespannt :wink: !

Bang

Also, bei mir sieht der Code so aus (Suchleiste inklusive):

/* ROUNDED BARS */
#urlbar,
#googlebarCriteria {
-moz-appearance: none !important;
background-color: transparent !important;
border: none !important;
height: 22px !important;
}

#urlbar > .autocomplete-textbox-container,
#googlebarCriteria {
background-image: url("leftcap.png") !important;
background-position: left center !important;
background-repeat: no-repeat !important;
background-color: transparent !important;
}

#urlbar > .autocomplete-history-dropmarker,
#urlbar:hover > .autocomplete-history-dropmarker,
#urlbar[focused="true"] > .autocomplete-history-dropmarker,
#urlbar > .autocomplete-history-dropmarker:hover,
#urlbar > .autocomplete-history-dropmarker:active,
#urlbar > .autocomplete-history-dropmarker:hover:active,
#urlbar > .autocomplete-history-dropmarker:focus,
#urlbar > .autocomplete-history-dropmarker[open="true"]{
-moz-appearance: none !important;
background-image: url("rightcap.png") !important;
background-color: transparent !important;
background-position: right center !important;
background-repeat: no-repeat !important;
border: none !important;
}

#urlbar > .autocomplete-textbox-container > .textbox-input-box,
#googlebarCriteria > .menulist-editable-box {
-moz-appearance: none !important;
background-image: url("textbox.png") !important;
background-color: transparent !important;
border: none !important;
margin: 0px !important;
margin-left: 3px !important;
margin-right: -5px !important;
padding: 0px !important;
padding-left: 5px !important;
padding-right: 5px !important;
height: 22px !important;
}

#googlebarCriteria > .menulist-editable-box {
margin-left: 8px !important; /* override the value set in the above statement */
}

#googlebarCriteria > .textbox-input-box {
padding-top: 4px !important; /* center the text vertically */
}

/* ::::: readonly state urlbar ::::: */

#urlbar[readonly="true"] > .autocomplete-textbox-container {
background-image: url("leftcap.png") !important;
}

#urlbar[readonly="true"] > .autocomplete-history-dropmarker {
background-image: url("rightcap.png") !important;
}

#urlbar[readonly="true"] > .autocomplete-textbox-container > .textbox-input-box {
background-image: url("textbox.png") !important;
}

/* ::::: secure state urlbar ::::: */

/* security ok */
#urlbar[level="high"] > .autocomplete-textbox-container,
#urlbar[level="low"] > .autocomplete-textbox-container {
background-image: url("leftcap-sec.png") !important;
}
#urlbar[level="high"] > .autocomplete-history-dropmarker,
#urlbar[level="high"]:hover > .autocomplete-history-dropmarker,
#urlbar[level="high"][focused="true"] > .autocomplete-history-dropmarker,
#urlbar[level="high"] > .autocomplete-history-dropmarker:hover,
#urlbar[level="high"] > .autocomplete-history-dropmarker:active,
#urlbar[level="high"] > .autocomplete-history-dropmarker:hover:active,
#urlbar[level="high"] > .autocomplete-history-dropmarker:focus,
#urlbar[level="high"] > .autocomplete-history-dropmarker[open="true"],
#urlbar[level="low"] > .autocomplete-history-dropmarker,
#urlbar[level="low"]:hover > .autocomplete-history-dropmarker,
#urlbar[level="low"][focused="true"] > .autocomplete-history-dropmarker,
#urlbar[level="low"] > .autocomplete-history-dropmarker:hover,
#urlbar[level="low"] > .autocomplete-history-dropmarker:active,
#urlbar[level="low"] > .autocomplete-history-dropmarker:hover:active,
#urlbar[level="low"] > .autocomplete-history-dropmarker:focus,
#urlbar[level="low"] > .autocomplete-history-dropmarker[open="true"] {
background-image: url("rightcap-sec.png") !important;
}
#urlbar[level="high"] > .autocomplete-textbox-container > .textbox-input-box,
#urlbar[level="low"] > .autocomplete-textbox-container > .textbox-input-box {
background-image: url("textbox-sec.png") !important;
}

/* security broken */
#urlbar[level="broken"] > .autocomplete-textbox-container {
background-image: url("leftcap-broken.png") !important;
}
#urlbar[level="broken"] > .autocomplete-history-dropmarker,
#urlbar[level="broken"]:hover > .autocomplete-history-dropmarker,
#urlbar[level="broken"][focused="true"] > .autocomplete-history-dropmarker,
#urlbar[level="broken"] > .autocomplete-history-dropmarker:hover,
#urlbar[level="broken"] > .autocomplete-history-dropmarker:active,
#urlbar[level="broken"] > .autocomplete-history-dropmarker:hover:active,
#urlbar[level="broken"] > .autocomplete-history-dropmarker:focus,
#urlbar[level="broken"] > .autocomplete-history-dropmarker[open="true"]{
background-image: url("rightcap-broken.png") !important;
}
#urlbar[level="broken"] > .autocomplete-textbox-container > .textbox-input-box {
background-image: url("textbox-broken.png") !important;
}

/* security icons */
#urlbar[level="high"] > .autocomplete-textbox-container > .info-icon,
#urlbar[level="low"] > .autocomplete-textbox-container > .info-icon {
list-style-image: url("lock-secure-textbox.png") !important;
margin: 0px !important;
}
#urlbar[level="broken"] > .autocomplete-textbox-container > .info-icon {
list-style-image: url("lock-broken-textbox.png") !important;
margin: 0px !important;
}

#page-proxy-deck{
margin: 3px 0 3px 5px !important;
border: none !important;
}

#search-container {
background: url("leftcap.png") no-repeat left center !important;
padding-left: 9px !important;
margin-left: 2px !important;
margin-right: 2px !important;
}

#search-bar,
#searchbar {
-moz-appearance: none !important;
background: url("rightcap.png") no-repeat right center !important;
border: none !important;
margin: 0px !important;
padding-right: 9px !important;
width: 130px;
}

#search-bar > .autocomplete-textbox-container,
#searchbar .autocomplete-textbox-container,
#searchbar .info-icon {
-moz-appearance: none !important;
background-image: url("textbox.png") !important;
background-color: transparent !important;
border: none !important;
margin: 0px !important;
padding: 0px !important;
height: 22px !important;
}

#searchbar .searchbar-textbox {
-moz-appearance: none !important;
background-image: url("textbox.png") !important;
background-color: transparent !important;
border: none !important;
}

#search-proxy-button,
.searchbar-dropmarker {
margin-top: 1px !important;
margin-bottom: 1px !important;
}

.search-proxy-button-image {
margin-left: -4px !important;
padding-right: 2px !important;
}

.searchbar-engine-image {
margin-left: 0px !important;
padding-right: 2px !important;
}

.search-proxy-button-dropmarker {
margin-top: 7px !important;
margin-left: 13px !important;
}

.searchbar-dropmarker {
margin-left: -7px !important;
padding-right: 0px !important;
}

/* END ROUNDED BARS */

Damit das hinhaut, braucht man aber die entsprechenden .png-files im chrome-Ordner des Profils.

Hier gibts auch noch mal was dazu + einige pngs zum download.

Gruß,
Bang

S.i.T.

hier steht es auch, und davor noch einiges mehr - falls wer probs hat

Bang

@sit

Ja, den thread hatte ich vorhin gesucht, und nicht gefunden, weil da kann man dann auch die pngs runterladen.

Gruß,
Bang

loshombre

Ein schwieriges Unterfangen ist das! Also ich versuchs mal hier der Reihe nach: Der Code von Doc-Evil funktioniert einwandfrei! Allerdings leider nur im Defaultheme! Mit nem anderen sieht das dann leider so aus: [Blockierte Grafik: http://img145.echo.cx/img145/7169/zwischenablage033uj.jpg]
(ohne Suchleiste!)
Mit Suchleiste( also der Code von Bang) sieht das auf dem Silvertheme leider so aus: [Blockierte Grafik: http://img145.echo.cx/img145/4003/zwischenablage015kn.jpg]
Also fast genau so! Außer, daß die Suchleiste passt! Im Defaultheme sieht das natürlich gut aus, weil man da die silber Absätze(wie hier oben) auf dem fast weissen Defaulhintergrund garnicht sehen kann!
Und so sieht das mit dem MozillaZine-Code(mit der x.png) im Defaultheme aus: [Blockierte Grafik: http://img61.echo.cx/img61/6613/zwischenablage022ul.jpg]
Hier passen die Bögen zwar ganz gut, die Suchleiste wird allerdings garnicht mit übernommen! Im Silvertheme sieht es fast genau so aus! Da wird dazu der rechte Bogen der urlbar überhaupt nicht übernommen! Die Suchleiste sowieso nicht!

So meine Freunde! Jetzt bin ich mit meinem Latein am Ende! Da ich leider keinerlei Englischkenntnisse besitze, und deshalb auf MozillaZine überhaupt nicht weiter komme, bin ich hier ohne eure fachkundige Hilfe völlig aufgeschmiessen !

Gruß
loshombre

bird

Ein code für abgerundete Leisten unabhängig von benutztem Theme ist doch eine schwierige Sache (vllt. sogar unmöglich...)

Das richtige wäre ein Code zu entwickeln der genau zu einem bestimmten Theme passt. Oder ein Theme zu benutzen das schon abgerundete Leisten hat.

Gruß

Bird

loshombre

Dann fass ich das zusammen: Also entweder Defaul mit Bögen oder ein anderes halt ohne !(schade). Aber warum wird die Suchleiste im MozillaZine Code nicht übernommen?! Da muss doch irgendwo ein Fehler sein! Mit Bangs Code klappt das astrein! Kann man die beiden Codes nicht irgendwie miteinander kombienieren? Ich meine zB. Bangs Suchbar mit der MZ urlbar! Vielleicht lehn ich mich jetzt damit zu weit aus dem Fenster, aber ich denke, es gibt keine blöden Fragen nur blöde Antworten! Und wer nicht fragt, bleibt dumm :wink: !

Gruß
loshombre

Bazon Bloch

Hallo Loshombre!

Naja, sieht doch schon gar nicht sooo schlecht aus. Aber bird hat schon recht: Pauschal für alle Themes geht einfach nicht. Aber da läßt sich bestimmt was machen, ist halt ein bischen Arbeit.

Ich schlage Dir vor:

1. Mach Dich mit der Bedeutung der Abstandsdefinitionen margin und padding vertraut.

2. Entferne alle margin und padding Anweisungen aus dem Code, der bis jetzt am besten funktionierte (ggf. auch sinnvolle Kombination aus verschiedenen, ist natürlich erlaubt....) und schau, wie es dann mit diesem aussieht.
Und: Schau mal bei anderen Themes nach, wie es dort realisiert wurde. Die Theme .jar Dateien sind einfach zip Archive, kannste einfach entpacken. Die Definition der URL-Leiste findet sich stets in browser/browser.css. Kannst Du versuchsweise übernehmen, mußt dann nur (a) die Pfade anpassen und (b) !important zu jeder Anweisung vor den Strichpunkt hinzufügen, da Du ja ursprüngliche Einstellungen überschreiben willst.

3. Definiere die margins und ggf. paddings nach Bedarf neu. Gibt es z.B. einen unerwünschten Abstand von 4 pixeln zwischen leftcap und Mittelteil, so kannst Du dem Mittelteil so was wie margin-left: -4px !important; zuordnen. (Merke: Auch negative Werte sind erlaubt!)
Um sicher zu gehen, dass Du den richtigen Wert manipulirst, kannst Du ja zunächst unnötig große Zahlen (dann aber lieber in positiver Richtung...) eintragen, dann sind die Veränderungen besonders auffällig.

4. Solltest Du das Favicon in der URL-Bar manipulieren wollen, geht das so:

CSS

#page-proxy-deck,
#page-proxy-favicon,
#page-proxy-button {
  [margin oder Padding Anweisung] !important; 
}

5. Geduld

Viel Spaß beim Basteln!

DasIch

Bazon Bloch ein Junior-Mitglied wird das wohl nicht schaffen. Wenn er kaum Ahnung hat.

UliBär

Zitat von DasIch

Bazon Bloch ein Junior-Mitglied wird das wohl nicht schaffen. Wenn er kaum Ahnung hat.

Ich glaube, daß die Post-Anzahl (worauf ja sein Junior-Status beruht) absolut nichts mit dem Kenntnisstand zu tun hat. Als gutes Beispiel für einen Post-Sammler, der zu jedem Mist was sagen muß, um seine Postzahl zu erhöhen, würdest Du ganz gut taugen

[edit] Siehe auch hier [/edit]

michael815

Zitat von UliBär

Ich glaube, daß die Post-Anzahl (worauf ja sein Junior-Status beruht) absolut nichts mit dem Kenntnisstand zu tun hat.

Sehr richtig!

Zitat von UliBär

Als gutes Beispiel für einen Post-Sammler, der zu jedem Mist was sagen muß, um seine Postzahl zu erhöhen, würdest Du ganz gut taugen

:lol:
der war gut ... sorry, das musste ich sagen ... rofl ... :lol:

DasIch

Zitat von UliBär

. Als gutes Beispiel für einen Post-Sammler, der zu jedem Mist was sagen muß, um seine Postzahl zu erhöhen, würdest Du ganz gut taugen

Muss ich das auf mir sitzen lassen?? Er hat so etwa ja auch machen lassen. Darum gehe ich davon aus das er da nicht so fit ist tschuldigung wenn das verletzend war.

EDIT: Ich meinte Den Verfasser des Threads

EDIT2:Inzwischen habe ich A.Topal benarichtigt da hier die Forumsregeln missachtet wurden und ich das als beleidigung ansehe.

Bazon Bloch

Zitat von DasIch

Bazon Bloch ein Junior-Mitglied wird das wohl nicht schaffen. Wenn er kaum Ahnung hat.

Zitat von Bazon Bloch

Hallo Loshombre!

ich schätze Loshombres Kenntnisstand als hinreichend kompetent ein. Und ein gewisses Maß an eigenständiger Vertiefung ist bei so einem ehrgeizigeren Projekt schon erforderlich....

..und ansonsten verweise ich auf Amsterdammers sehr zutreffenden Beitrag zum Thema Kenntnisstandanpassung.

wm44

Zitat von michael815

der war gut ... sorry, das musste ich sagen ... rofl ... :lol:

Die erste Version war auch gut, ist aber leider in den "Lost Threads" verschollen. :?

Gruß
Werner

loshombre

Danke für die Tipps und Hinweise Bazon Bloch! Es ist doch schon eine sehr komplexe Angelegenheit(für mich zumindest!). Es ist halt nur ein Wunsch von mir und kein Muss! Also werd ich(Zeitguthaben vorrausgesetzt. Denn ich denke, Zeit und Geduld werd ich dafür brauchen!) mich damit auseinander setzten und meinen Kenntnisstand noch vertiefen(müssen)!

@all: Ansonsten heiße ich alle weiteren Anregungen und Vorschläge von euch diesbezüglich natürlich herzlich wilkommen!

Gruß
loshombre

loshombre

Eine Bitte hätt ich aber noch an euch! Könnt ihr vllt einen Blick auf den MozillaZine Code werfen?! Hier muss(glaub ich) entweder was fehlen, oder ein Fehler in den search-bar Einträgen sein! Denn die Searchbar wird auch in einem sauberen Profil(Defaul/Standard-Theme) überhaupt nicht übernommen! Hier der Code:

CSS

#urlbar {
-moz-appearance: none !important;
border: none !important;
  background-color: transparent !important;
font:icon !important;
min-height: 22px !important;
margin: -1px 10px -4px 0px !important;
}


#urlbar > .autocomplete-textbox-container {
-moz-appearance: none !important;
	border: none !important;
  background-image: url("leftcap.png");
background-position: left center;
background-repeat: no-repeat;
padding-left: 4px !important;
padding-right: 0px !important;
padding-top: 4px !important;
padding-bottom: 5px !important;
background-color: #transparent !important;
margin: 0px 0px 2px 0px !important;
min-height: 22px !important;
}


.textbox-input-box {
-moz-appearance: none !important;
border-top: 2px solid;
-moz-border-top-colors: #878787 #B5B5B5;
border-bottom: 2px solid;
-moz-border-bottom-colors: #E1E1E1 #F3F3F3;
margin: -1px 0px -1px -2px !important;
padding: 0px 2px 1px 0px;
background-color: #FFFFFF !important;
min-height: 22px !important;
}


#search-bar {
-moz-appearance: none !important;
border: none !important;
  background-color: transparent !important;
font:icon !important;
min-height: 22px !important;
margin: -1px 10px -4px 0px !important;
}


#search-bar > .autocomplete-textbox-container {
-moz-appearance: none !important;
	border: none !important;
  background-image: url("x.png") !important;  
background-position: left center;
background-repeat: no-repeat;
padding-left: 4px;
padding-right: 10px;
padding-bottom: 2px;
padding-top: 1px;
background-color: #transparent;
margin: 0px 0 2px 0px !important;
min-height: 22px !important;
}


.textbox-input-box {
border-top: 2px solid;
-moz-border-top-colors: #878787 #B5B5B5;
border-bottom: 2px solid;
-moz-border-bottom-colors: #E1E1E1 #F3F3F3;
margin: 0px 0px 0px -2px;
padding: 0px 0px 1px 2px;
background-color: #FFFFFF !important;
min-height: 22px !important;
}




#search-bar {
  width: 128px;
}


.autocomplete-history-dropmarker {
 -moz-appearance: none !important;
  border: none  !important;
  background: inherit !important;
  margin: 3px 0px 6px 0px !important;
background-image: url("rightcap.png") !important;  
background-repeat: no-repeat  !important;
list-style-image: url("snapback.png") !important;
  width: 20px !important;
  background-color: transparent  !important;
padding: 0 !important
}


/* ::::: page proxy icon ::::: */


#page-proxy-deck,
#page-proxy-button {
 max-height: 16px !important;
 max-width: 16px !important;
}


#search-proxy-button {
 -moz-appearance: none !important;
  margin: 2px 2px 2px 6px !important;
}

Alles anzeigen

Würde mich sehr freuen, wenn ihr mir was dazu sagen könntet!

Gruß
loshombre

Dr. Evil

Die Suchleiste hat die id searchbar statt search-bar.