About Seiten mit CSS Codes anpassen

2002Andreas

Zitat von Endor

Vielen Dank an dieser Stelle

Gerne doch

Boersenfeger

Zitat von Endor

Magst Du bitte nochmal testen.

Klappt jetzt auch !

Ich denke, das es vielleicht auch vorher schon geklappt hat. Ab und an muss das Nightly einfach neugestartet werden...

edvoldi

Ich habe auch noch ein wenig geändert, da ich nicht im Vollbild arbeite, passte es so wie so nicht bei mir.

Bei mir sieht es so aus:

CSS

/***   AGENT_SHEET   *********************/
/***   Geändert von EDV-Oldie   **********/
/***   Letzte Änderung am 21.11.2021   ***/
/***   https://www.camp-firefox.de/forum/thema/130540-about-seiten-mit-css-codes-anpassen/   */

/*   AGENT_SHEET   */
/*   about:loginsimportreport   */
    
    @namespace url(http://www.w3.org/1999/xhtml);
    @-moz-document url-prefix(about:loginsimportreport) {
        
    .summary:before {
    content: "Design by Edv-Oldie";
    font-size: 25px!important;
    font-weight: bold!important;
    color: blue !important;
    }

    body {
    margin-left: 170px !important;
    margin-right: auto !important;
    max-height: 86vh !important;
    max-width: 1200px !important; /* Breite anpassen */
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    padding-bottom: 20px !important;
    padding-top: 15px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    background-color: gainsboro !important;
    border-left-color: lightblue !important;
    border-top-color: lightblue !important;
    border-right-color: dodgerblue !important;
    border-bottom-color: dodgerblue !important;
    border-radius: 20px !important;
    border-width:  4px !important;
    border-style: outset !important;
    }
    
    body:hover{
    border-left-color:  #bbddff !important;
    border-top-color:  #bbddff !important;
    border-right-color:  #11508d !important;
    border-bottom-color:  #11508d !important;}
    
    #report-body {
    background: gainsboro !important; 
    min-width: 650px !important;
    margin-left: -900px !important;
    }
    
    /* Nullen auf gleiche Höhe bringen */    
    .new-logins { margin-top: 210px !important;  margin-left: -25px !important;}
    
     .exiting-logins {margin-top: 210px !important;}
    
    .duplicate-logins {margin-top: 211px !important;}
    
    .errors-logins {margin-top: 212px !important;margin-left: 30px !important;}
    
    .logins-list{border-top: none !important;}
    
    .summary > div:nth-child(2){
    margin-top: 10px !important;
    color: #0059b3 !important; 
    font-weight: bold  !important;
    font-size: 16px !important;
    line-height: 6 !important;}
    
    /* Farbe Überschrift ändern */
    .summary > h2:nth-child(1){color: crimson !important; margin-top: 80px !important;}

    /* Farbe Nummern ändern */
    .new-logins > div:nth-child(1),
    .exiting-logins > div:nth-child(1),
    .duplicate-logins > div:nth-child(1),
    .errors-logins > div:nth-child(1){color: #0059b3 !important;}

    /* Schaltfläche anpassen */
    .about-logins-import-report-learn-more {
    appearance:none !important;
    text-decoration: none !important;
    max-width: 170px !important;
    background: #F0F0F0 url("../../../Icons/Bild34.png")no-repeat !important;
    padding-left:40px!important;
    padding-top:  2px!important; 
    padding-right: 20px !important; 
    padding-bottom: 4px!important; 
    background-position:14px 4px!important;
    font-size: 14px !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:16px!important;
    color:black !important;}

    .about-logins-import-report-learn-more:hover{
    background: #B2EDFA url("../../../Icons/Bild34.png")no-repeat !important;
    appearance:none !important;
    text-decoration: none !important;
    max-width: 170px !important;
    border-style: outset !important;
    border-width:2px !important;
    border-left-color:  #bbddff !important;
    border-top-color:  #bbddff !important;
    border-right-color:  #11508d !important;
    border-bottom-color:  #11508d !important;
    background-position:14px 4px!important;}
    }

Alles anzeigen

Gruß

EDV-Oldie

FuchsFan

Zitat von edvoldi

Ich habe auch noch ein wenig geändert, da ich nicht im Vollbild arbeite

Hast Du mal den Button .about-logins-import-report-learn-more:hover überprüft, der reagiert hier nicht.

edvoldi

Stimmt, aber da habe ich, außer den Pfad nichts geändert, schaue ich morgen einmal nach

Gruß

EDV-Oldie

Endor

Hallo FuchsFan

Ändere diese Zeile ( Zeile 45 in meinem obigen CSS Code ) so:

.logins-list{margin-top: 30px !important; border-top: none !important;}

Dann funktioniert es hier wieder.

Mfg.
Endor

FuchsFan

Zitat von Endor

Ändere diese Zeile ( Zeile 45 in meinem obigen CSS Code ) so:

Danke, Endor, dann funktioniert auch der Button wieder in dem veränderten Code von edvoldi .

Dharkness

Zitat von Endor

Hier möchte ich eine Sammlung CSS Codes zum Anpassen verschiedener
about: Seiten, wie zbs. about:about usw. erstellen.

Sag mal, hast Du auch about:sessionrestore im Repertoire?

Endor

Hallo Dharkness

Ja haben wir :

CSS

    @-moz-document url-prefix(about:sessionrestore){
    
    html{background: #ffffff  !important;}
    
    .container:before {content: "Endors Sitzungswiederherstellung:";
    margin-left: 295px !important;
    font-size: 20px!important;
    font-weight: bold!important;
    color: red!important; }    
        
    h1{
    margin-top: 50px !important; 
    color: #cc0000 !important; 
    font-size: 22px !important; 
    font-weight: bold !important;
    min-height: 50px !important;}
        
    body{ 
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center!important;
    align-items: center!important;
    max-width: 1100px !important;
    min-height: 600px !important;
    max-height: 700px !important; 
    background-color: #fffff0 !important;
    margin-top: 40px !important;
    padding-top: 20px !important;
    padding-left: 25px !important;
    padding-right: 25px !important;
    border-left-color:  lightblue!important;
    border-top-color:  lightblue!important;
    border-right-color:  dodgerblue!important;
    border-bottom-color:  dodgerblue!important;
    border-radius: 20px !important;
    border-width:  4px !important;
    border-style: outset !important;}
        
    #errorTryAgain {
    -moz-appearance: none !important;
    background: #0060df url("..//icons/application_go.png") no-repeat !important;
    background-position:18px 10px!important;
    min-width: 235px!important;
    height: 40px!important;
    padding-left: 50px!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-style: outset !important;
    border-radius:30px!important;
    opacity: 1!important;}
    
    #errorTryAgain:hover{
    background: #003eaa url("..//icons/application_go.png") no-repeat !important;
    background-position:18px 10px!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-style: outset !important;
    border-radius:30px!important;}
    
    #errorCancel{
    -moz-appearance: none !important;
    color: white !important;
    background: #0060df url("..//icons/application_go.png") no-repeat !important;
    background-position:18px 10px!important;
    min-width: 229px!important;
    height: 40px!important;
    padding-left: 40px!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-style: outset !important;
    border-radius:30px!important;
    opacity: 1!important;}
    
    #errorCancel:hover{
    background: #003eaa url("..//icons/application_go.png") no-repeat !important;
    background-position:18px 10px!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-style: outset !important;
    border-radius:30px!important;}
    
    #tabsToggle {
    background: #efefef url("..//icons/Bild1.png") no-repeat !important;
    color:black!important;
    font-size:14px!important;
    text-decoration:none!important;
    padding-top: 3px !important;
    padding-bottom: 4px !important;
    padding-right:30px !important;
    padding-left:40px !important;
    border-color: #A6A4A4 !important;
    border-left-color:  #E6E5E5 !important;
    border-top-color:  #E6E5E5 !important;
    border-right-color:  #5C5B5B !important;
    border-bottom-color:  #5C5B5B !important;
    border-style: outset !important;
    border-width:1px !important;
    background-position:14px 7px!important;
    border-radius:16px!important; }
    
    #tabsToggle:hover{
    background: #CFE6F1 url("..//icons/Bild1.png") no-repeat !important;
    color:black!important;
    font-size:14px!important;
    text-decoration:none!important;
    background-position:14px 7px!important;
    border-left-color:  #e4e3e3 !important;
    border-top-color:  #e4e3e3 !important;
    border-right-color:  #5c5b5b !important;
    border-bottom-color:  #5c5b5b !important;
    border-style: outset !important;
    border-width:1px !important;}    
    
    #tabsToggle::after {
    display: none !important;}
    
    #tabList {border-radius:22px!important;}
    
    #restore {
    border-top-left-radius: 22px!important; 
    padding-left: 15px !important;
    background-color: #ee7621 !important;
    color: white !important;}

    #title{
    border-top-right-radius: 22px!important;
    background-color: #ee7621 !important;
    color: white !important;}
    
    #restore:hover,
    #title:hover {
    background-color: #b54f06 !important;}
    }

Alles anzeigen

Symbole:

Mfg.
Endor

Dharkness

Zitat von Endor

Ja haben wir

Dankeschön.

Boersenfeger

Ich danke auch, allerdings ist about:sessionrestore nicht in der Übersicht von about:about enthalten

Sören Hentzschel

Das ist ja auch schon wieder eine Seite, von der es null Sinn ergibt, diese gezielt aufzurufen. Insofern hat die Seite unter about:about auch nichts zu suchen. Es ist eher als Fehler zu betrachten, dass about:loginsimportreport auf about:about erscheint. Andere Seiten, die man nicht direkt aufruft, erscheinen dort ja auch nicht.

Boersenfeger

Sören, kümmere dich doch einfach nicht um die Basteleien, wir wissen, das es keinen Sinn macht, wollen dies aber...

Edit: Außerdem gehts im Moment um about:sessionrestore

Dharkness

Zitat von Sören Hentzschel

Insofern hat die Seite unter about:about auch nichts zu suchen.

Dort ist sie bei mir ja auch, so wie es sein soll, nicht zu sehen, ich habe sie nur in einem anderen Profil nach einem Absturz zu sehen bekommen.

Sören Hentzschel

Zitat von Boersenfeger

Sören, kümmere dich doch einfach nicht um die Basteleien, wir wissen, das es keinen Sinn macht, wollen dies aber...

Hä? Ich habe auf deine Frage geantwortet, die sich implizit durch deine Verwunderung stellte. Weder war es meine Aussage, dass es keinen Sinn ergeben würde, an der Seite zu basteln, noch wollte ich jemanden davon abhalten. Ich habe schlicht und ergreifend beantwortet, wieso die Seite nicht unter about:about auftaucht, sonst gar nichts…

Im Übrigen weiß ich nicht, wie andere das finden, wenn du sagst, ich solle mich nicht um die Basteleien kümmern. Immerhin habe ich ja doch auch ab und an einen hilfreichen Input, was eben jene Basteleien betrifft…

Zitat von Boersenfeger

Edit: Außerdem gehts im Moment um about:sessionrestore

Ja, darum ging es ja auch in meiner Antwort. Ich habe auch about:loginsimportreport erwähnt, weil das ebenfalls eine Seite ist, die man nicht direkt aufruft, und erklärt, dass diese die einzige Seite ist, auf welche die Begründung ebenfalls zutrifft, die aber trotzdem sichtbar ist…

Boersenfeger

Ich hätte die Antwort 1012 an Endor adressieren sollen, denn von ihm stammt der Code für about:about, mein Fehler

Eine Frage hatte ich übrigens gar nicht gestellt!

Mira_Belle

Zitat von Boersenfeger

Wie hast Du die drei Spalten hingezaubert?

Gruß

Mira

Sören Hentzschel

Zitat von Boersenfeger

Ich hätte die Antwort 1012 an Endor adressieren sollen, denn von ihm stammt der Code für about:about, mein Fehler

Endor hat doch nichts damit zu tun, welche Seiten auf about:about erscheinen, er hat nur die Gestaltung angepasst. Und selbst wenn du explizit ihn angesprochen hättest: Da ich die Antwort wusste, hätte ich selbstverständlich trotzdem geantwortet und mein Wissen nicht zurückgehalten.

Zitat von Boersenfeger

Eine Frage hatte ich übrigens gar nicht gestellt!

Du hast wörtlich geschrieben:

Zitat von Boersenfeger

allerdings ist about:sessionrestore nicht in der Übersicht von about:about enthalten

Und darin steckt implizit (nicht direkt gestellt!) die Frage: Wieso taucht about:sessionrestore eigentlich nicht in der Übersicht von about:about auf? Und das habe ich dir beantwortet. Aber das schrieb ich ja auch genau so (Hervorhebung hinzugefügt):

Zitat von Sören Hentzschel

Ich habe auf deine Frage geantwortet, die sich implizit durch deine Verwunderung stellte.

harff182

Zitat von Mira_Belle

Wie hast Du die drei Spalten hingezaubert?

Wahrscheinlich so ähnlich wie meinereiner:

CSS

/*    hübscheres about:about */
/*    Endor hier: https://www.camp-firefox.de/forum/thema/130540/?postID=1189557#post1189557

/*    211120: ma gucken ;) 
    220101: Farben, Ränder und Hintergründe  angepaßt
*/

/* AGENT_SHEET */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url("about:about") {
    html {
        background: gold !important; /*harff182 */
    }
        
    ul.columns {
        column-count: 3 !important;
        column-gap: 0px !important;
        margin: 0 !important;
    }
        
    body{ 
        /* background-color: #fffff0 !important; */
        background-color: yellow !important;    /*harff182 */
        max-width: 1200px !important;
        min-height: 600px !important;
        height: auto !important; 
        margin-top: 70px !important;
        margin-bottom: 30px !important;
        margin-left: 5px !important;
        padding-top: 45px !important;
        padding-left: 25px !important;
        padding-right: 25px !important;
        padding-bottom:  65px !important;
        border-left-color:  lightblue!important;
        border-top-color:  lightblue!important;
        border-right-color:  dodgerblue!important;
        border-bottom-color:  dodgerblue!important;
        border-color:  dodgerblue!important; /*harff182*/
        border-radius: 20px !important;
        border-width:  4px !important;
        border-style: solid !important;
    }
        
    .container > h1:nth-child(1){
        margin-left: 50px !important;
        color: blue !important; 
        font-size: 24px !important; 
        font-weight: bold !important;
    }
        
    ul{
        list-style: none !important;
    }
                        
    #abouts{
        min-width: 1120px !important;
        background-color: #ffffff !important;
        margin-left: -200px !important;
        margin-top: 25px !important;
        padding-top: 25px !important;
        padding-left: 25px !important;
        padding-right: 25px !important;
        padding-bottom:  25px !important;
        border-left-color:  lightblue!important;
        border-top-color:  lightblue!important;
        border-right-color:  dodgerblue!important;
        border-bottom-color:  dodgerblue!important;
        border-color:  lightblue!important;
        border-radius: 20px !important;
        border-width:  4px !important;
        border-style: solid !important;
        /*harff182: */
        background: linear-gradient(to bottom right, yellow, gold, orange, yellow, gold, orange) !important;
    }
        
    p{
        margin-left: 160px !important; 
        font-size:15px!important;
        font-weight: 600 !important;     /*harff182: Semo Bold*/
        font-style: italic !important;    /*harff182 */
    }
        
    h1::before {
        content: "Harffs Firefox:    "; 
        font-weight:bold !important;  
        color:red !important; 
        margin-left: 110px !important;
    }

    a{
        text-decoration: underline !important;
        color:black!important;
    }
    
    /* Breite der Schaltflächen */

    #abouts > li:nth-child(n+1){
        min-width: 170px !important;
        max-width: 170px !important;
    }
        
    /* Die ersten 14 */
    #abouts > li:nth-child(-n+14){
        appearance:none!important;
        background: #efefef url("../icons/Bild3.png")no-repeat !important;
        color:transparent!important;
        font-size:14px!important;
        text-decoration: underline!important;
        margin-top:3px!important;
        margin-bottom: 5px !important;
        margin-right:20px!important;
        margin-left: 55px !important;
        padding-right: 45px !important;
        padding-left:40px!important;
        padding-top: 1px!important;
        padding-bottom: 2px!important;
        border-left-color:  lightblue!important;
        border-top-color:  lightblue!important;
        border-right-color:  dodgerblue!important;
        border-bottom-color:  dodgerblue!important;
        border-style: outset !important;
        border-width:2px !important;
        background-position:14px 2px!important;
        border-radius:14px!important;
    }


    /* Die ersten 14 hover */
    #abouts > li:nth-child(-n+14):hover{
        appearance:none!important;
        background: #B2EDFA  url("../icons/Bild3.png")no-repeat !important;
        color:transparent!important;
        font-size:14px!important;
        text-decoration: underline !important;
        border-left-color:  #bbddff !important;
        border-top-color:  #bbddff !important;
        border-right-color:  #11508d !important;
        border-bottom-color:  #11508d !important;
        border-style: outset !important;
        border-width:2px !important;
        background-position:14px 2px!important;
        border-radius:14px!important;
    }
        
    /* Die mittleren 15 */
    #abouts > li:nth-child(n+15){
        appearance:none!important;
        background: #efffbf url("../icons/Bild3.png")no-repeat !important;
        color:transparent!important;
        font-size:14px!important;
        text-decoration: underline !important;
        margin-top:3px!important;
        margin-bottom: 5px !important;
        margin-right:5px!important;
        margin-left: 70px !important;
        padding-right: 25px !important;
        padding-left:40px!important;
        padding-top: 1px!important;
        padding-bottom: 2px!important;
        border-left-color:  #79d279 !important;
        border-top-color:  #79d279 !important;
        border-right-color:  #009900 !important;
        border-bottom-color:  #009900 !important;
        border-style: outset !important;
        border-width:2px !important;
        background-position:14px 2px!important;
        border-radius:14px!important;
    }

    /* Die mittleren 15 hover */
    #abouts > li:nth-child(n+15):hover{
        appearance:none!important;
        background: #B2EDFA  url("../icons/Bild3.png")no-repeat !important;
        color:transparent!important;
        font-size:14px!important;
        text-decoration: underline !important;
        border-left-color:  #bbddff !important;
        border-top-color:  #bbddff !important;
        border-right-color:  #11508d !important;
        border-bottom-color:  #11508d !important;
        border-style: outset !important;
        border-width:2px !important;
        background-position:14px 2px!important;
        border-radius:14px!important;
    }
    
    /* Die letzten 14 */
    #abouts > li:nth-child(n+30){
        appearance:none!important;
        background: cornsilk url("../icons/Bild3.png")no-repeat !important;
        color:transparent!important;
        font-size:14px!important;
        text-decoration: underline !important;
        margin-top:3px!important;
        margin-bottom: 5px !important;
        margin-right:45px!important;
        padding-left:40px!important;
        padding-top: 1px!important;
        padding-bottom: 2px!important;
        border-left-color:  #ffb2b2 !important;
        border-top-color:  #ffb2b2 !important;
        border-right-color:  #8d0000 !important;
        border-bottom-color:  #8d0000 !important;
        border-style: outset !important;
        border-width:2px !important;
        background-position:14px 2px!important;
        border-radius:14px!important;
    }

    /* Die letzten 14 hover */
    #abouts > li:nth-child(n+30):hover{
        appearance:none!important;
        background: #B2EDFA url("../icons/Bild3.png")no-repeat !important;
        color:transparent!important;
        text-decoration: underline !important;
        font-size:14px!important;
        border-left-color:  #bbddff !important;
        border-top-color:  #bbddff !important;
        border-right-color:  #11508d !important;
        border-bottom-color:  #11508d !important;
        border-style: outset !important;
        border-width:2px !important;
        background-position:14px 2px!important;
        border-radius:14px!important;
    }            
}

Alles anzeigen

have fun

grisu2099

Wahrscheinlich genau so, wie ich bei mir 4 Spalten gezaubert habe:

CSS

ul.columns {
    column-count: 4 !important;
    column-gap: 50px !important;
    margin: 0 !important;
    }

About Seiten mit CSS Codes anpassen

Ähnliche Themen

Mehrzeilige Tableiste für aktuelle Firefox-Versionen

Addons Manager Nightly