About Seiten mit CSS Codes anpassen

2002Andreas

Zitat von FuchsFan

Da kommt Freude auf

So soll es ja auch sein

Zitat von FuchsFan

in die Schleudermaschine gegeben, das kam dabei heraus.

PS:

Nach dem Schleudern muss es noch in den Trockner, oder bei schönem Wetter auf die Leine

Endor

Zitat von FuchsFan

Endor habe ich mal in die Schleudermaschine gegeben

Jetzt wird mir auch klar warum mir so schwindelig geworden ist.

FuchsFan
Sieht auch gut aus.

Mfg.
Endor

FuchsFan

Zitat von Endor

Jetzt wird mir auch klar warum mir so schwindelig geworden ist.

Demnächst wähle ich einen kleineren Gang aus.

Zitat von Endor

Sieht auch gut aus.

Danke!

grisu2099

Zitat von FuchsFan

Den Code von grisu2099 und Endor habe ich mal in die Schleudermaschine gegeben, das kam dabei heraus.

Da kommt mir doch einiges bekannt vor...

Kann sich sehen lassen!

FuchsFan

Zitat von grisu2099

Da kommt mir doch einiges bekannt vor...

Gut, dass Du es erkennen kannst.

Ja, wegen der ganzen "Bereinigung" des Codes habe ich auch mal versucht das bei den aktuellen Versionen 111 und 112 einzusetzen. Ganz kleine Änderungen im oberen Teil musste ich vornehmen, ansonsten zu gebrauchen.

Eventuell kann mal jemand probieren, ob es so i.O. ist.

CSS

/* AGENT_SHEET */
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url(about:profiles) {
    
  html {
    background: #d9d9d9 !important;
  }    
    
/* alle Button */    
  button {
    background: #fff7e6 !important;
    border-style: outset !important;
    border-left-color: lightblue !important;
    border-top-color: lightblue !important;
    border-right-color: dodgerblue !important;
    border-bottom-color: dodgerblue !important;
    border-width: 2px !important;
    border-radius: 20px !important;
    background-position: 14px 7px !important;
    color: black !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 14px !important;
  }

  button:hover {
    background: #B2EDFA !important;
    background-position: 14px 7px !important;
    border-left-color: #bbddff !important;
    border-top-color: #bbddff !important;
    border-right-color: #11508d !important;
    border-bottom-color: #11508d !important;
  }

/* Originaler Text "Über Profile" ausgeblendet */
  #body > h1 {
    font-size: 0px !important; 
    margin-bottom: 30px !important;
  }

/* neuen Text mit HG eingefügt */
  h1::after {
    content: 'Meine Profile' !important;
    border: 2px ridge lightgrey !important;
    border-radius: 20px !important; 
    background-color: dodgerblue/* #009900 */ !important;
    color: white !important;
    font: 32px bold !important;
    line-height: 100px !important;
    text-align: center !important;
    min-width: 500px !important;
    max-width: 700px !important;
    padding: 0 50px !important;
    margin-left: 170px !important;
  }
  
  /* Erklärungstext: "Diese Seite…" */
  /* .page-subtitle {
    min-width: 640px !important;
    max-width: 640px !important;
    margin-top: 0px !important;
  } */
  
  #body {
    position: relative !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1200px !important; /* Breite anpassen zbs. auf 1600px, dann aber auch in Zeile 39 den Wert auf 71% erhöhen */
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    padding-bottom: 30px !important;
    padding-top: 15px !important;
    padding-left: 50px !important;
    padding-right: 50px !important;
    background-color: #fff7e6 !important;
    border: royalblue! important;
    border-width:  8px !important;
    box-shadow: 15px 15px 0px 0px #fdd342 inset !important;
    border-style: double !important;
  }
  
  .content-flex {
    flex: 1 1 56% !important;
  }
  
  .action-box{
    background: #f2e6d9 !important;
    border: 2px ridge lightgrey !important;
    margin-top: 20px !important;
    margin-right: -14px !important;
    /* margin-bottom: 80px !important; */
    border-radius: 14px !important;
    position: relative !important;
    min-width: 395px !important;
    max-width: 395px !important;
  }

  .action-box > h3, h2, h1 {
    color: #057A7A !important;
  }

/* Label "Neu starten"  */
  .action-box > h3/* :nth-child(1) */ {
    border: 2px ridge lightgrey !important;
    border-radius: 20px !important;
    background-color: lightgreen !important;
    text-align: center !important;
    min-height: 20px !important;
    max-height: 20px !important;
    max-width: 100px !important;
    padding: 3px 50px 6px 50px !important;
    margin: 0 auto 20px 90px!important;
  }

  #owned {        
    border: 2px ridge lightgrey !important;
    border-radius: 10px !important;
    min-width: 55vw !important;
    padding: 15px 20px 20px 20px !important;
    margin-top: 115px !important;
    background-color: #ecd9c6 !important;
    position: relative !important;
  }
    
/* Die Einstellungen ab hier sind für alle Profile */

/* Rahmen um die Profil-Gruppen */
  #profiles > div { 
    border: 3px ridge lightgrey !important;
    border-radius: 20px !important;
    padding: 15px 30px !important;
    margin-top: 30px !important;
    background: #F0F0F0 !important;
  }    

  #profiles > div > table {
    border-radius: 14px !important;
  }

  #profiles > div > table > tbody > tr:nth-child(1) > th:nth-child(1) {
    border-top-left-radius: 14px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  #profiles > div > table > tbody > tr:nth-child(1) > td:nth-child(2) {
    border-top-right-radius: 14px !important;
  }

  #profiles > div > table > tbody > tr:nth-child(3) > th:nth-child(1) {
    border-bottom-left-radius: 14px !important;
  }

  #profiles > div > table > tbody > tr:nth-child(3) > td:nth-child(2) {
    border-bottom-right-radius: 14px !important;
  }

  th, td {
    padding-left: 17px !important;
  }
  
  td {
    font-size: 14px !important;
  }

  hr {
    display: none !important;
  }

  h2 {
    margin-top: 25px !important;
  }

  [data-l10n-id="profiles-restart-normal"] {
    background-image: url("..//icons/Bild9.png") !important;
    background-repeat: no-repeat !important;
    margin-left: 28px !important;
    padding-left: 40px !important;
    padding-right: 155px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }

  [data-l10n-id="profiles-restart-normal"]:hover {
    background-image: url("..//icons/Bild9.png") !important;
    background-repeat: no-repeat !important;
  }

  [data-l10n-id="profiles-restart-in-safe-mode"] {
    background-image: url("..//icons/Bild10.png") !important;
    background-repeat: no-repeat !important;
    margin-left: 28px !important;
    padding-left: 40px !important;
    padding-right: 34px !important;
    margin-bottom: 10px !important;
  }

  [data-l10n-id="profiles-restart-in-safe-mode"]:hover {
    background-image: url("..//icons/Bild10.png") !important;
    background-repeat: no-repeat !important;
  }

  [data-l10n-id="profiles-create"] {
    background-image: url("..//icons/Bild11.png") !important;
    background-repeat: no-repeat !important;
    background-position: 14px 5px !important; 
    padding-left: 40px !important;
    padding-right: 20px !important;
  }

  [data-l10n-id="profiles-create"]:hover {
    background-image: url("..//icons/Bild11.png") !important;
    background-repeat: no-repeat !important;
  }

  [data-l10n-id="profiles-yes"] {
    color: green !important;
    font-weight: bold !important;
    font-size: 18px !important;
  }
  
  [data-l10n-id="profiles-no"]{
    color: red !important;
    font-size: 16px !important;
  }
  
  [data-l10n-id="profiles-opendir"] {
    background-image: url("..//icons/Bild12.png") !important;
    background-repeat: no-repeat !important;
    margin-left: 5px !important;
    padding-left: 40px !important;
    padding-right: 20px !important;
  }

  [data-l10n-id="profiles-opendir"]:hover {
    background-image: url("..//icons/Bild12.png") !important;
    background-repeat: no-repeat !important;
  }
    
  /* Label Profilname */
  #profiles > div > h2:nth-child(1) {
    border: 2px ridge lightgrey !important;
    border-radius: 20px !important;
    background-color: lightgreen !important;
    text-align: center !important;
    line-height: 40px !important;
    width: 20vw !important;
    height: 40px !important;
    margin: 0 0 20px 50px !important;
  }
    
/* Erklärung im Standardprofil */
  #profiles > div > h3 {
    color: red !important;
    border: 2px ridge red !important;
    border-radius: 10px !important;
    padding: 20px !important;
    margin: 0 0 20px 0 !important;
  }

/* Position der Schaltflächen Ordner öffen festlegen */
  #profiles > div:nth-child(n+1) > table > tbody > tr:nth-child(2) > td > button {
    position: absolute !important;
    right: 70px !important;
    margin-top: -8px !important;
  }

  #profiles > div:nth-child(n+1) > table > tbody > tr:last-child > td > button {
    position: absolute !important;
    right: 70px !important;
    margin-top: -8px !important;
  }

  #profiles > div:nth-child(n+1) > table:nth-child(n+1) > tbody:nth-child(1) > tr:nth-child(n+1),
  #profiles > div:nth-child(n+1) > table:nth-child(n+1) > tbody:nth-child(1) > tr:nth-child(n+1) > th:nth-child(n+1) {
    height: 32px !important;
  }

  [data-l10n-id="profiles-rename"] {
    background-image: url("..//icons/Bild13.png") !important;
    background-repeat: no-repeat !important;
    margin-top: 8px !important;
    padding-left: 40px !important;
    padding-right: 20px !important;
  }

  [data-l10n-id="profiles-rename"]:hover {
    background-image: url("..//icons/Bild13.png") !important;
    background-repeat: no-repeat !important;
  }

  [data-l10n-id="profiles-remove"] {
    background-image: url("..//icons/Bild8.gif") !important;
    background-repeat: no-repeat !important;
    background-position: 14px 6px !important;
    margin-top: 8px !important;
    padding-left: 40px !important;
    padding-right: 20px !important;
  }

  [data-l10n-id="profiles-remove"]:hover {
    background-image: url("..//icons/Bild8.gif") !important;
    background-repeat: no-repeat !important;
  }

  [data-l10n-id="profiles-set-as-default"] {
    background-image: url("..//icons/Bild14.png") !important;
    background-repeat: no-repeat !important;
    margin-top: 8px !important;
    padding-left: 40px !important;
    padding-right: 20px !important;
  }

  [data-l10n-id="profiles-set-as-default"]:hover {
    background-image: url("..//icons/Bild14.png") !important;
    background-repeat: no-repeat !important;
  }

  [data-l10n-id="profiles-launch-profile"] {
    background-image: url("..//icons/Bild15.png") !important;
    background-repeat: no-repeat !important;
    background-position: 14px 6px !important;
    margin-top: 8px !important;
    padding-left: 40px !important;
    padding-right: 20px !important;
  }

  [data-l10n-id="profiles-launch-profile"]:hover {
    background-image: url("..//icons/Bild15.png") !important;
    background-repeat: no-repeat !important;
  }

/* Zeilen(Boxen) rechts - der HG im Wechsel */
  #profiles > div:nth-child(odd) > table {   
    background: #f7edd4 !important;
  }
  #profiles > div:nth-child(even) > table {
    background: beige !important;
  }

  td:hover {
    background: #ffeb99 !important;
  }

  th {
    background-color: #ee7621 !important;
    padding-right: 10px !important;
    font-size: 13px !important;
  }

  th:hover {
    background-color: #b54f06 !important;
  }
}

Alles anzeigen

2002Andreas

Zitat von FuchsFan

den aktuellen Versionen 111

Zitat von FuchsFan

und 112 einzusetzen

Bei beiden Versionen alles ok hier

FuchsFan

Zitat von 2002Andreas

Bei beiden Versionen alles ok hier

Nöö, oben in der Box die Abstimmung passt da nicht, hast Du eventuell die Sidebar offen?

grisu2099

Zitat von FuchsFan

Eventuell kann mal jemand probieren, ob es so i.O. ist.

Ich mußte erstmal verdunkeln...

Kann man so nutzen (wenn man so hell mag... )

2002Andreas

Zitat von FuchsFan

hast Du eventuell die Sidebar offen?

Nein.

Ich muss hier die Breite ändern:

Mit Sidebar sieht es so aus hier:

FuchsFan

Zitat von grisu2099

Ich mußte erstmal verdunkeln...

Wie sieht bei Dir die Box rechts oben aus?

2002Andreas

Zitat von 2002Andreas

Ich muss hier die Breite ändern:

Also :

max-width: 300px !important;

FuchsFan

Zitat von 2002Andreas

Ich muss hier die Breite ändern:

Dann werde ich das bei mir auch machen, und dann den eingestellten Code abändern, falls doch darauf zugegriffen wird. danke, Andreas!

grisu2099

Zitat von FuchsFan

Wie sieht bei Dir die Box rechts oben aus?

Paßt bei mir:

Edit: Firefox 111.0.1

2002Andreas

Zitat von grisu2099

Paßt bei mir:

Könnte am Zoom liegen, oder der Größe vom Bildschirm

grisu2099

Zitat von 2002Andreas

Könnte am Zoom liegen, oder der Größe vom Bildschirm

Zoom (100%) - Bildschirm FullHD 1920x1080...

2002Andreas

Im Nightly passt es hier:

Zitat von grisu2099

Zoom (100%)

Ok, habe ich hier auch.

FuchsFan

Zitat von grisu2099

Paßt bei mir:

Danke!

So ist es hier auch, da muss ich schon maximale Werte nehmen, dass sich was ändert.

Zitat von grisu2099

Zoom (100%) - Bildschirm FullHD 1920x1080...

So auch hier.

2002Andreas

In der 111 passen auch die beiden anderen Button nicht perfekt:

grisu2099

Zitat von 2002Andreas

Im Nightly passt es hier:

Bei diesem Bild würde ich nicht von passend sprechen...

Da ist mir die obere Box zu weit rechts.

2002Andreas

Zitat von grisu2099

Da ist mir die obere Box zu weit rechts.

Aber die 3 Button/Einträge passen dort richtig, im Gegensatz zu Fx 111 - 112

About Seiten mit CSS Codes anpassen

Ähnliche Themen

Mehrzeilige Tableiste für aktuelle Firefox-Versionen

Addons Manager Nightly