Oberflächenanpassung

Schrauberecke: Hier geht es um optische und funktionelle Veränderungen (ohne Themes oder Personas) von Firefox oder von Webseiten per CSS-Codes oder JavaScript.
bugger
Mitglied
Beiträge: 75
Registriert: Mi, 18. Jun 2008 13:20

Oberflächenanpassung

#1

Beitrag von bugger Themen-Starter » Di, 12. Jun 2018 20:39

Hallo!
Vieleicht hat jemand zu den folgen "Problemen" eine Idee.

Ich habe über folgenden CSS Code

Code: Alles auswählen

/* reload button in urlbar */
#stop-reload-button .toolbarbutton-icon {
  fill: rgb(102,102,102);
  height: 22px !important;
  width: 28px !important;
  padding: 4px !important;
  position: absolute !important;
}

#stop-reload-button {
  transform: translateX(-36px);
  border-radius: 0px !important;
  z-index: 10 !important;
  margin-right: -32px;
}

#wrapper-stop-reload-button .chromeclass-toolbar-additional {
  margin-right: 0px !important;
  transform: translateX(0px);
}

#stop-reload-button[animate="true"] {
  transform: translateX(-36px);
  opacity: 0.8;
}
den stop-reload-button optisch in die #urlbar verschoben, aber leider ist der Toolbarbutton so groß, das ein Klick auf den #url-history-dropmarker nur in der vorderen Hälfte seine Funktion ausfürt, in der anderen wird der Reload ausgeführt.
stop-reload.png
Die einzige CSS Anweisung die Auswirkung auf #stop-reload-button hat ist max-height, aber die schrumpf dann leider die ganze nav-bar zusammen.
Kennt jemand eine Möglichkeit die größe der Klickbaren Fläche zu verkleinern? Optimal wäre es wenn man die Größe des Buttons auf 24x24 px ändern könnte.

Zudem versuche ich das Icon der Screengrab Webextension im Context Menu zu ändern.
Das hinzufügen funktioniert soweit mit diesem CSS Code

Code: Alles auswählen

#_02450914-cdd9-410f-b1da-db004e18c671_-menuitem-_s3sg_context_popup {
  -moz-appearance: none !important;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAh1JREFUeNqkU81qGlEU/mbmOqOViSQuxEVqYouCUChMFi1UCjWltNCNoE9QJMUn8BEC2ZaKjxDB0PYFAjarphTEENIurNYWtYpaNf6NY++5iW0X2dgcODOXe+73nXO+c680n89xHWPxeHyxfp7NZhGLxd4tRcB9i7uRSCTS3JHJZHaWwH+UotHoTjqdfj2dTq88cVWLtMcYQzKZfMlyudyLcrksAqFQCKlUCvl8HuFwGETa7XYxHo9FXNM0uFwu2Gw22O12zGYziUmS9JUDDWIsFAoYjUaIRLbRbP5Eq9WC1+uFx+MRBIPBANVqFW63GxwH0zRlme/ber2eAJINh0PU6zVUKhWRKXfwBj0WQGT7Cfb3D3hVFo6PP3Hy7h8CdTKZgJys3+/zLN9RLJ7yEoHDoyJ2dzO4/zSFow+nWFlZQ6PRwPm5KQhoCiplp5LI6vUm/0qQeYgxFT7/XdwxDBErosmr0qAoKo/bSCOZcUU1yq4oysVcmSbAur7Gex7hUdhAqVYjTjx+eI+L+gurq56/BKQBgS3LulT6hiBYX7+JUukbAoHbCAUuRGu32zg7+wy/Pwia7oJAob7JNjZuQVWJQOFjcmJz04ly+QdOTr6IuK7rAuxwODiBRQQK8/l8b/f2XhmmOedZZOFUL/1V1YFgUMfiLv17qWjZ6XRUyel0PpNl+cH/PCTe9nuS3kHVXb6LZczk3pOu+5x/CzAA79biq6IGyQsAAAAASUVORK5CYII=") !important;
  background-repeat: no-repeat !important;
  background-position: 2px 0px !important;
}
Nur leider bleibt das Original Icon bestehen.
context-icon.png
Versuche mit diesem uc.js

Code: Alles auswählen

setTimeout(function() {
  document.getElementById('_02450914-cdd9-410f-b1da-db004e18c671_-menuitem-_s3sg_context_popup').removeAttribute('image');
}, 5000);
von hier viewtopic.php?t=125272#p1083896 brachten kein Erfolg, da die ID anscheinend nicht von Anfang an erzeugt wird, jedenfalls vermute ich das aufgrund dieser Fehlermeldung in der Browser Konsole

Code: Alles auswählen

TypeError: document.getElementById(...) is null[Weitere Informationen]  RemoveImageTag.uc.js:2:3
Auch zeigt ein hinzufügen vom z-index: 9999 !important keine Wirkung.

Wo ich mich noch nicht mit beschäftigt habe aber auch gerne eine Lösung für hätte ist das ändern der Schriftart/Schriftgröße bei den Suchvorschlägen.
search.png
search.png (3.04 KiB) 567 mal betrachtet
Danke im vorraus und über Vorschläge würde ich mich sehr freuen!

Benutzeravatar
2002Andreas
Moderator
Beiträge: 37988
Registriert: Fr, 04. Jul 2008 19:25
Wohnort: Niedersachsen

Re: Oberflächenanpassung

#2

Beitrag von 2002Andreas » Di, 12. Jun 2018 20:47

Zur ersten Frage.

Dein css Code verschiebt hier keinen Reload Button. Ich kann mir auch nicht vorstellen dass das mit css überhaupt funktioniert.

Darum teste es doch bitte mal mit dieser Erweiterung:

https://addons.mozilla.org/en-US/firefo ... dress-bar/
Mit freundlichem Gruß
Andreas
Mein System    Meine Add-ons

bugger
Mitglied
Beiträge: 75
Registriert: Mi, 18. Jun 2008 13:20

Re: Oberflächenanpassung

#3

Beitrag von bugger Themen-Starter » Di, 12. Jun 2018 21:01

Habe es geraden in einem neuen Profil nochmal getestet.
reload.png
Den Reload Button habe ich im Anpassen Modus nur rechts neben die urlbar geschoben.
Aber das mit der Extension werde ich auch noch testen, aber eine Lösung über CSS wäre mir lieber.

bugger
Mitglied
Beiträge: 75
Registriert: Mi, 18. Jun 2008 13:20

Re: Oberflächenanpassung

#4

Beitrag von bugger Themen-Starter » Mi, 13. Jun 2018 9:10

Der Reloadbutton von der Extension ist von der größe her für mich passend, aber ich schaffe es nicht die gewünschte Reihenfolge hinbekommen.
Die Reihenfolge star-button, dropmarker, reload ist nicht möglich, da reload und star-button im page-action-button zusammengefasst sind.

Hiermit konnte ich die Schrift der Suchvorschläge anpassen

Code: Alles auswählen

/* change font size/weight for searchbar results */
.search-panel-tree richlistitem :-moz-any(.ac-emphasize-text-title, .ac-title-text) {
  font-size: 11px !important;
  font-weight: normal !important;
}
searchbar.png
searchbar.png (2.62 KiB) 490 mal betrachtet

bugger
Mitglied
Beiträge: 75
Registriert: Mi, 18. Jun 2008 13:20

Re: Oberflächenanpassung

#5

Beitrag von bugger Themen-Starter » Mi, 13. Jun 2018 14:16

Nächstes Problem erledigt ...

Code: Alles auswählen

/* reload button in urlbar */
#stop-button,
#reload-button {
  padding: 2px !important;
}

#stop-reload-button .toolbarbutton-icon,
#stop-button .toolbarbutton-icon,
#reload-button .toolbarbutton-icon {
  fill: rgb(102,102,102);
  height: 14px !important;
  width: 18px !important;
  padding: 0px !important;
}

#stop-reload-button {
  transform: translateX(-29px);
  border-radius: 0px !important;
  margin-right: -26px;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  width: 18px !important;
}
stopreload.png

Bleibt nur noch das Icon vom Context Menu, hätte da jemand eine Idee?

EffPeh
Senior-Mitglied
Beiträge: 1499
Registriert: Mi, 04. Okt 2017 10:22

Re: Oberflächenanpassung

#6

Beitrag von EffPeh » Mi, 13. Jun 2018 14:40

bugger hat geschrieben:
Di, 12. Jun 2018 20:39

Versuche mit diesem uc.js

Code: Alles auswählen

setTimeout(function() {
  document.getElementById('_02450914-cdd9-410f-b1da-db004e18c671_-menuitem-_s3sg_context_popup').removeAttribute('image');
}, 5000);
von hier viewtopic.php?t=125272#p1083896 brachten kein Erfolg, da die ID anscheinend nicht von Anfang an erzeugt wird, jedenfalls vermute ich das aufgrund dieser Fehlermeldung in der Browser Konsole

Code: Alles auswählen

TypeError: document.getElementById(...) is null[Weitere Informationen]  RemoveImageTag.uc.js:2:3
Hm. Ich kann mir das eigentlich nicht wirklich vorstellen, aber probier's doch dann einfach mal mit setInterval... :)

Code: Alles auswählen

let element = document.getElementById( '_02450914-cdd9-410f-b1da-db004e18c671_-menuitem-_s3sg_context_popup' );
let mySetInterval = setInterval( eliminate , 5000 );

function eliminate() {
  if ( element.hasAttribute( 'image' ) ) {
      element.removeAttribute( 'image' );
  } else {
      clearInterval( mySetInterval );
  }
};
Windows 10 | FF 61.0 (64-Bit) / FF 60.0 (64-Bit)

bugger
Mitglied
Beiträge: 75
Registriert: Mi, 18. Jun 2008 13:20

Re: Oberflächenanpassung

#7

Beitrag von bugger Themen-Starter » Mi, 13. Jun 2018 15:03

Da kommt leider auch der selbe Fehler

Code: Alles auswählen

TypeError: element is null[Weitere Informationen] screengrab.uc.js:5:1
Ist nur seltsam das der Eintrag über CSS ansprechbar ist, aber über JS nicht.

EffPeh
Senior-Mitglied
Beiträge: 1499
Registriert: Mi, 04. Okt 2017 10:22

Re: Oberflächenanpassung

#8

Beitrag von EffPeh » Mi, 13. Jun 2018 15:26

bugger hat geschrieben:
Mi, 13. Jun 2018 15:03
Da kommt leider auch der selbe Fehler

Code: Alles auswählen

TypeError: element is null[Weitere Informationen] screengrab.uc.js:5:1
Ist nur seltsam das der Eintrag über CSS ansprechbar ist, aber über JS nicht.
Achso, das ganze Element ist nicht da. Ja, merkwürdig irgendwie... :-??
Dann testen wir im Interval, ob das Element vorhanden ist, und falls ja, nehmen wir eben dann erst das Attribut heraus... :wink:

Code: Alles auswählen

let mySetInterval = setInterval( eliminate , 5000 );

function eliminate() {
	let element = document.getElementById( '_02450914-cdd9-410f-b1da-db004e18c671_-menuitem-_s3sg_context_popup' );
	if ( typeof( element ) != 'undefined' && element != null ) {
		if ( element.hasAttribute( 'image' ) ) {
			element.removeAttribute( 'image' );
		} else {
			clearInterval( mySetInterval );
		}
	}
};
Windows 10 | FF 61.0 (64-Bit) / FF 60.0 (64-Bit)

bugger
Mitglied
Beiträge: 75
Registriert: Mi, 18. Jun 2008 13:20

Re: Oberflächenanpassung

#9

Beitrag von bugger Themen-Starter » Mi, 13. Jun 2018 15:44

Ich glaube das ist eine aussichtslose sache, das Element wird wohl nur erzeugt wenn das Context Menu geöffnet wird. Schließt man das Context Menu, wird das Element auch wieder "zerstört". Ein erneutes anzeigen des Context Menu erzeugt wieder das Element mit dem original Icon.
Wenn es nicht einen weg gibt den JS Code beim erzeugen des Context Menu zu starten, bliebe nur den Code alle paar ms auszuführen.
Das erscheint mit jedoch nicht wirklich vernünftig.

EffPeh
Senior-Mitglied
Beiträge: 1499
Registriert: Mi, 04. Okt 2017 10:22

Re: Oberflächenanpassung

#10

Beitrag von EffPeh » Mi, 13. Jun 2018 15:49

bugger hat geschrieben:
Mi, 13. Jun 2018 15:44
[...]
Das erscheint mit jedoch nicht wirklich vernünftig.
Richtig. Also testen wir das noch... :P

Code: Alles auswählen

window.addEventListener('contextmenu', function (e) {
	let element = document.getElementById( '_02450914-cdd9-410f-b1da-db004e18c671_-menuitem-_s3sg_context_popup' );
	if ( typeof( element ) != 'undefined' && element != null ) {
		if ( element.hasAttribute( 'image' ) ) {
			element.removeAttribute( 'image' );
		}
	}
});
Windows 10 | FF 61.0 (64-Bit) / FF 60.0 (64-Bit)

bugger
Mitglied
Beiträge: 75
Registriert: Mi, 18. Jun 2008 13:20

Re: Oberflächenanpassung

#11

Beitrag von bugger Themen-Starter » Mi, 13. Jun 2018 16:02

Knapp daneben, aber doch vorbei. Erst in Kombination mit setTimeout mit sagenhaften 5ms funktioniert es.

Code: Alles auswählen

window.addEventListener('contextmenu', function (e) {
  setTimeout(function() {
    let element = document.getElementById( '_02450914-cdd9-410f-b1da-db004e18c671_-menuitem-_s3sg_context_popup' );
    if ( typeof( element ) != 'undefined' && element != null ) {
      if ( element.hasAttribute( 'image' ) ) {
        element.removeAttribute( 'image' );
      }
    }
  }, 5);
});
Vielen Dank EffPeh für deine Hilfe!

EffPeh
Senior-Mitglied
Beiträge: 1499
Registriert: Mi, 04. Okt 2017 10:22

Re: Oberflächenanpassung

#12

Beitrag von EffPeh » Mi, 13. Jun 2018 16:05

Bitteschön... :)
Windows 10 | FF 61.0 (64-Bit) / FF 60.0 (64-Bit)

Benutzeravatar
2002Andreas
Moderator
Beiträge: 37988
Registriert: Fr, 04. Jul 2008 19:25
Wohnort: Niedersachsen

Re: Oberflächenanpassung

#13

Beitrag von 2002Andreas » Mi, 13. Jun 2018 16:52

Dieser css Code funktioniert hier auch ohne das zusätzliche Script.

Bitte mal testen.

Code: Alles auswählen

#_02450914-cdd9-410f-b1da-db004e18c671_-menuitem-_s3sg_context_popup {
  -moz-appearance: none !important;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAh1JREFUeNqkU81qGlEU/mbmOqOViSQuxEVqYouCUChMFi1UCjWltNCNoE9QJMUn8BEC2ZaKjxDB0PYFAjarphTEENIurNYWtYpaNf6NY++5iW0X2dgcODOXe+73nXO+c680n89xHWPxeHyxfp7NZhGLxd4tRcB9i7uRSCTS3JHJZHaWwH+UotHoTjqdfj2dTq88cVWLtMcYQzKZfMlyudyLcrksAqFQCKlUCvl8HuFwGETa7XYxHo9FXNM0uFwu2Gw22O12zGYziUmS9JUDDWIsFAoYjUaIRLbRbP5Eq9WC1+uFx+MRBIPBANVqFW63GxwH0zRlme/ber2eAJINh0PU6zVUKhWRKXfwBj0WQGT7Cfb3D3hVFo6PP3Hy7h8CdTKZgJys3+/zLN9RLJ7yEoHDoyJ2dzO4/zSFow+nWFlZQ6PRwPm5KQhoCiplp5LI6vUm/0qQeYgxFT7/XdwxDBErosmr0qAoKo/bSCOZcUU1yq4oysVcmSbAur7Gex7hUdhAqVYjTjx+eI+L+gurq56/BKQBgS3LulT6hiBYX7+JUukbAoHbCAUuRGu32zg7+wy/Pwia7oJAob7JNjZuQVWJQOFjcmJz04ly+QdOTr6IuK7rAuxwODiBRQQK8/l8b/f2XhmmOedZZOFUL/1V1YFgUMfiLv17qWjZ6XRUyel0PpNl+cH/PCTe9nuS3kHVXb6LZczk3pOu+5x/CzAA79biq6IGyQsAAAAASUVORK5CYII=") !important;
  background-repeat: no-repeat !important;
  background-position: 2px 3px !important;
}

#_02450914-cdd9-410f-b1da-db004e18c671_-menuitem-_s3sg_context_popup > hbox > image{
display:none!important;}
Screenshot (85).png
Mit freundlichem Gruß
Andreas
Mein System    Meine Add-ons

bugger
Mitglied
Beiträge: 75
Registriert: Mi, 18. Jun 2008 13:20

Re: Oberflächenanpassung

#14

Beitrag von bugger Themen-Starter » Mi, 13. Jun 2018 19:55

Das ist ja noch eleganter :) Vielen Dank dafür!
Kann man diesen "hbox > image" Aufbau irgendwo in den Entwicklerwerkzeugen finden?
Oder wie bist du zu diesem Code gekommen?

Benutzeravatar
2002Andreas
Moderator
Beiträge: 37988
Registriert: Fr, 04. Jul 2008 19:25
Wohnort: Niedersachsen

Re: Oberflächenanpassung

#15

Beitrag von 2002Andreas » Mi, 13. Jun 2018 19:57

bugger hat geschrieben:
Mi, 13. Jun 2018 19:55
Oder wie bist du zu diesem Code gekommen?
Ich habe einfach eine Weile gesucht und erst immer den Fehler gehabt, Icon statt Image zu nehmen :oops:

Freut mich wenn es dir gefällt. :D
Screenshot (87).png
Mit freundlichem Gruß
Andreas
Mein System    Meine Add-ons

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste