Weitere blaue Umrandungen

aborix

Zitat von 2002Andreas

Ich hatte mir erlaubt mal rund 2 Std nicht im Forum zu sein...sorry :oops::wink:

Ja , das war ohnehin scherzhaft gemeint, ich hätte vielleicht einen Smilie duzuschreiben sollen. :wink:

2002Andreas

Hallo aborix...

das weiß ich doch...sollte ja auch von mir nur eine Scherzhafte Antwort sein :wink:

Dir ein schönes Wochenende.

loshombre

Danke Andy.
Ja guck, geht doch Jetzt schraub ich mir daraus (von dir und Hombre Endor) mit meinem bestehenden Code was brauchbares als einen neuen Code zusammen und dann wird es schon irgendwie wieder passen Wenn dem so ist, wird es alles mehr übersichtlicher hier und vor allem aktueller und dann kann ich den ganzen alten Code in die Tonne kloppen.

Ich hoffe, das alte Camel verzeiht mir das Durcheinander hier :roll::mrgreen:

2002Andreas

Freut mich das es nun auch bei dir funktioniert

Zitat von loshombre

Jetzt schraub ich mir daraus

Viel Spaß dabei :wink:

aborix

loshombre:

Im Code aus #14 ist diese Zeile am blauen Rand schuld:

Zitat

outline: solid 1pt !important;

loshombre

andy mein Jung,
was kann ich so alles mit box-shadow anfangen, bzw. was dafür vergeben ?
Bin gerad bisschen am rum tüfteln

Sören Hentzschel

Box-Shadow-Generator von Mozilla:
https://developer.mozilla.org/de/docs/Web/CS…hadow_generator

Literatur dazu:
https://developer.mozilla.org/de/docs/Web/CSS/box-shadow

loshombre

aborix,
ja bitteschön! So ne bepisste Zeile und schon alles wieder gut. Eigentlich könnte (nein, sollte, müsste) ich da selbst drauf kommen und nicht euch hier damit belabbern!
Danke auch dir Hombre.

loshombre

Danke Sören. Dann wollen wir mal etwas malen nach Zahlen

2002Andreas

Zitat von aborix

ist diese Zeile am blauen Rand schuld:

Kann ich hier nicht so wirklich bestätigen.

Jeweils Fokus auf der Searchbar in beiden Screenshots.
Mit dem Eintrag sind hier 2 Rahmen...einer blue (abgerundet) und einer black (eckig)

[Blockierte Grafik: http://www2.pic-upload.de/thumb/30012090/Screenshot122.png]

Ohne den Eintrag ist es nur der blaue mit abgerundetem Rahmen.

[Blockierte Grafik: http://www2.pic-upload.de/thumb/30012115/Screenshot123.png]

Zitat von loshombre

und schon alles wieder gut.

Nur das zählt :klasse:

loshombre

Doch Andy, das passt und ist auch korrekt so auf deinen Bildern. Wenn man diese eine outline-Zeile auskommentiert, verschwindet der eckige Rahmen, also genau so wie es sein soll, bzw. wie ich es von Anfang an vor hatte.

2002Andreas

Zitat von loshombre

verschwindet der eckige Rahmen

Hallo loshombre..

dann hatte ich diese Aussage aus Beitrag Nr. 3 von dir falsch verstanden...sorry.

Zitat:

Zitat

womit man den Rand zB. aus der Adress -und Searchbar komplett ausgeblendet bekommt ?

loshombre

Alles gut mein Jung.
Um das zu verdeutlichen, hab ich etwas weiter unten dafür dann noch n kleines Bild gemacht.

Es ist fast alles wieder gut. Jetzt muss ich nur noch gucken, warum die Urlbar ein klein wenig breiter ist, als die Searchbar. Ich glaube, es sind die Buttons des Scriptes RevertBackForwardButton.uc.xul, die bei mir am rechten Ende sitzen. Kann eigentlich nur das sein, denn sonst sitzt hier nix mehr fuchsfremdes, oder eingearbeitetes in der Urlbar drin.
Muss ich mir mal in Ruhe mal anschauen.

[Blockierte Grafik: http://fs5.directupload.net/images/160313/vufd67th.jpg]

EDIT: Ja, das ist es. Bzw. der CSS Codeteil im Script. Dann werd ich mir das mal passend zusammen rücken.

Boersenfeger

Hier werkelt dieser Code..

CSS

#urlbar, #searchbar .searchbar-textbox{
-moz-appearance: none !important;


border-radius: 12px !important;
padding: 0 10px 0 10px !important;
}

@-moz-document url("chrome://browser/content/browser.xul") {


          #identity-box{
            color:black!important;
            background: transparent!important;}


          #urlbar{
            position: relative!important;
            z-index: 1!important;}


          #identity-box::after {
            content: ''!important;
            position: absolute!important; 
            height: 100%!important;
            width: 45%!important;
            top: 0!important;
            left: 0!important;
            opacity: .8!important;
            pointer-events: none!important; 
            z-index: -1!important}


          #identity-box.verifiedIdentity::after {
            background: lightgreen!important;}


          #identity-box.verifiedDomain::after {
            background: yellow!important;}


          #identity-box.unknownIdentity::after {
            background: red!important;}     
        }

Alles anzeigen

Ergibt:
[attachment=1]Mit Farbcode.jpg[/attachment]
Wie muss ich diesen Teil

CSS

#identity-box::after {
            content: ''!important;
            position: absolute!important; 
            height: 100%!important;
            width: 45%!important;
            top: 0!important;
            left: 0!important;
            opacity: .8!important;
            pointer-events: none!important; 
            z-index: -1!important}


          #identity-box.verifiedIdentity::after {
            background: lightgreen!important;}


          #identity-box.verifiedDomain::after {
            background: yellow!important;}


          #identity-box.unknownIdentity::after {
            background: red!important;}     
        }

Alles anzeigen

Umschreiben, damit es so aussieht, allerdings mit der jeweiligen farbigen Markierung? Also vorne rund...
[attachment=0]ohne Farbcode.jpg[/attachment]

2002Andreas

Meinst du das so?

[Blockierte Grafik: http://www2.pic-upload.de/thumb/30018295/Screenshot124.png]

Wenn ja bitte testen und den Wert anpassen:

CSS

#identity-box::after {
border-top-left-radius: 12px !important;
border-bottom-left-radius: 12px !important;
            content: ''!important;
            position: absolute!important;
            height: 100%!important;
width: 7%!important;
            top: 0!important;
            left: 0!important;
            opacity: .8!important;
            pointer-events: none!important;
            z-index: -1!important}


          #identity-box.verifiedIdentity::after {
border-top-left-radius: 12px !important;
border-bottom-left-radius: 12px !important;
width: 7%!important;
            background: lightgreen!important;}


          #identity-box.verifiedDomain::after {
border-top-left-radius: 12px !important;
border-bottom-left-radius: 12px !important;
width: 7%!important;
            background: yellow!important;}


          #identity-box.unknownIdentity::after {
border-top-left-radius: 12px !important;
border-bottom-left-radius: 12px !important;
width: 7%!important;
            background: red!important;}

Alles anzeigen

Und das wäre dein obiger kompl. Code etwas verändert, und mit den neuen Werten:

CSS

@-moz-document url("chrome://browser/content/browser.xul") {


#urlbar,.searchbar-textbox{
border-radius: 12px !important;
padding: 0 10px 0 10px !important;
}

          #identity-box{
            color:black!important;
            background: transparent!important;}


          #urlbar{
            position: relative!important;
            z-index: 1!important;}


          #identity-box::after {
border-top-left-radius: 12px !important;
border-bottom-left-radius: 12px !important;
            content: ''!important;
            position: absolute!important;
            height: 100%!important;
width: 7%!important;
            top: 0!important;
            left: 0!important;
            opacity: .8!important;
            pointer-events: none!important;
            z-index: -1!important}


          #identity-box.verifiedIdentity::after {
border-top-left-radius: 12px !important;
border-bottom-left-radius: 12px !important;
width: 6%!important;
            background: lightgreen!important;}


          #identity-box.verifiedDomain::after {
border-top-left-radius: 12px !important;
border-bottom-left-radius: 12px !important;
width: 7%!important;
            background: yellow!important;}


          #identity-box.unknownIdentity::after {
border-top-left-radius: 12px !important;
border-bottom-left-radius: 12px !important;
width: 7%!important;
            background: red!important;}     
        }

Alles anzeigen

Boersenfeger

Danke !
Es bleibt damit zwar rund aber ohne Farbe...
Hier nochmal der Gesamtcode mit deinem Teil, vielleicht fehlt irgendwo ne Klammer... :-??

CSS

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);


#urlbar {
font-size:18px !important;
font-weight:bold !important;
height: 32px;
}
#searchbar {
font-size:18px !important;
font-weight:bold !important;
height: 32px;
}


.urlbar-origin-label,
.urlbar-over-origin-box,
.urlbar-over-link-host-label, 
.urlbar-over-link-path-label {
margin-top: -1px !important;
margin-bottom: -1px !important;
}


#identity-box #identity-icon-label,
#identity-box #identity-icon-labels {
font-size: 13px !important;
}


#omnibar-defaultEngineName {margin-top: -1px !important;font-size:15px !important;font-weight:bold !important;}
#omnibar-defaultEngine {margin-top: 0px !important;
}


#urlbar #feed-button {list-style-image: none !important;
}
#urlbar, #searchbar .searchbar-textbox{
-moz-appearance: none !important;


border-radius: 12px !important;
padding: 0 10px 0 10px !important;
}


#identity-box::after {
border-top-left-radius: 12px !important;
border-bottom-left-radius: 12px !important;
            content: ''!important;
            position: absolute!important;
            height: 100%!important;
width: 7%!important;
            top: 0!important;
            left: 0!important;
            opacity: .8!important;
            pointer-events: none!important;
            z-index: -1!important}


#identity-box.verifiedIdentity::after {
border-top-left-radius: 12px !important;
border-bottom-left-radius: 12px !important;
width: 7%!important;
            background: lightgreen!important;}


#identity-box.verifiedDomain::after {
border-top-left-radius: 12px !important;
border-bottom-left-radius: 12px !important;
width: 7%!important;
            background: yellow!important;}


#identity-box.unknownIdentity::after {
border-top-left-radius: 12px !important;
border-bottom-left-radius: 12px !important;
width: 7%!important;
            background: red!important;}

Alles anzeigen

So wie auf deinem Shot soll es aussehen...

2002Andreas

Zitat von Boersenfeger

Hier nochmal der Gesamtcode mit deinem Teil

Damit sieht das hier so aus:

[Blockierte Grafik: http://www2.pic-upload.de/thumb/30020030/Screenshot125.png]

Der Code funktioniert hier ohne Probleme. An den Farben habe ich ja auch nichts verändert. Es muss dir also etwas anderes dazwischenfunken.

2002Andreas

Teste aber bitte auch diesen mal:

CSS

@-moz-document url("chrome://browser/content/browser.xul") {


#urlbar {
font-size:18px !important;
font-weight:bold !important;
height: 32px;
}
#searchbar {
font-size:18px !important;
font-weight:bold !important;
height: 32px;
}


.urlbar-origin-label,
.urlbar-over-origin-box,
.urlbar-over-link-host-label,
.urlbar-over-link-path-label {
margin-top: -1px !important;
margin-bottom: -1px !important;
}


#identity-box #identity-icon-label,
#identity-box #identity-icon-labels {
font-size: 13px !important;
}


#omnibar-defaultEngineName {margin-top: -1px !important;font-size:15px !important;font-weight:bold !important;}
#omnibar-defaultEngine {margin-top: 0px !important;
}


#urlbar #feed-button {list-style-image: none !important;
}


#urlbar,.searchbar-textbox{
border-radius: 12px !important;
padding: 0 10px 0 10px !important;
}    



          #urlbar{
            position: relative!important;
            z-index: 1!important;}


          #identity-box::after {
border-top-left-radius: 12px !important;
border-bottom-left-radius: 12px !important;
            content: ''!important;
            position: absolute!important;
            height: 100%!important;
width: 7%!important;
            top: 0!important;
            left: 0px!important;
            opacity: .8!important;
            pointer-events: none!important;
            z-index: -1!important}


          #identity-box.verifiedIdentity::after {
border-top-left-radius: 12px !important;
border-bottom-left-radius: 12px !important;
width: 6%!important;
            background: lightgreen!important;}


          #identity-box.verifiedDomain::after {
border-top-left-radius: 12px !important;
border-bottom-left-radius: 12px !important;
width: 7%!important;
            background: yellow!important;}


          #identity-box.unknownIdentity::after {
border-top-left-radius: 12px !important;
border-bottom-left-radius: 12px !important;
width: 7%!important;
            background: red!important;}     
        }

Alles anzeigen

Boersenfeger

Danke, kann ich aber wohl erst in den nächsten Tagen testen..

Boersenfeger

Ha, Zeit geklaut...
Jetzt sieht es mit dem letzten Code so aus:
[attachment=0]2016-03-14_194837.jpg[/attachment]
Die vordere Ecke ist rot oder gelb oder grün...