About Seiten mit CSS Codes anpassen

Endor

Musst Du mal testen.

Keine Ahnung ob es da auch geht.

Bin schon froh wenn ich die Zeit finde es im 80er

wieder hinzubekommen.

Mfg.
Endor

grisu2099

Habe eben einen schnellen Blick drauf geworfen...

Was mir aufgefallen ist: Der Schriftzug "Endors Firefox" ist auf den Seiten 2+3 nach oben verschoben - da müßte noch nachgebessert werden.

Ansonsten: Tolle Basis zum Umbauen auf mein Design. Danke dafür!

FuchsFan

Zitat von Endor

So hier mal etwas für about:welcome

Danke, Endor, so gefällt es mir wieder.

Endor

Gerne, freut mich wenn es gefällt. :wink:

Mfg.
Endor

Boersenfeger

Eben mal getestet im Nightly.

Sollte auch dort funktionieren.

Breite musst Du für Dich dann noch anpassen.

In diesem Absatz im Code:

CSS

.screen{
margin-left: auto !important;
margin-right: auto !important;
justify-content: center!important;
align-items: center!important;
max-width: 1200px !important;
min-height: 90vh !important;
max-height: 90vh !important;
margin-top: 30px !important;
margin-bottom: 20px !important;
padding-bottom: 20px !important;
padding-top: 15px !important;
padding-left: 50px !important;
padding-right: 50px !important;
background-color: #fffff0 !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;}

Alles anzeigen

bei max-width: 1200px !important; den Wert erhöhen bis es passt.

Mfg.
Endor

FuchsFan

Zitat von grisu2099

ist auf den Seiten 2+3 nach oben verschoben - da müßte noch nachgebessert werden.

Hiermit passt es dann bei mir (Blöcke angepasst):

CSS

h1{
margin-top: 20px !important;
color: #cc0000 !important;
font-size: 35px !important;
font-weight: bold !important;
min-height: 100px !important;}

.secondary-cta > span:nth-child(1){
color: #1a75ff !important;
font-weight: bold !important;
font-size: 17px !important;}

h2{
color: #1a75ff !important;
margin-top: -15px !important;
margin-bottom: 10px !important;
font-weight: bold !important;
font-size: 17px !important;}

.screen:before {
margin-top: 100px !important;
margin-left: auto !important;
margin-right: auto !important;
justify-content: center!important;
align-items: center!important;
content: "xxx Firefox";
font-weight:bold !important;
font-size: 26px !important;
color:red !important; }

Alles anzeigen

Boersenfeger

Prima nun passt in beiden Versionen alles. Vielen Dank!

FuchsFan

Zitat von Boersenfeger

Prima nun passt in beiden Versionen alles. Vielen Dank!

Sollte eventuell ich angesprochen sein (weil Beitrag darüber), es war mir eine Ehre.

Boersenfeger

OK, gerne, aber deine Änderung war nicht von Nöten..

Habe den Code aus # 415 mit dem Fuchs Logo und der Breitenanpassung auf 1500 px übernommen und meinen Nicknamen eingesetzt..

Endor

Hallo zusammen.

Mein CSS Code für about:welcome hat einen Fehler, habe ich eben erst

festgestellt und ich weiß nicht wie beheben.

Im Original wird das Firefox Logo angezeigt.

Mit meinem obigen CSS Code aber nicht mehr. Im Moment verstehe ich noch nicht

wieso das so ist. Habt Ihr da eine Idee?

So sieht es im Original aus:

Mfg.

Endor

FuchsFan

Zitat von Endor

Habt Ihr da eine Idee?

Eine besondere Idee habe ich auch nicht, aber eventuell hilft dir das erst mal weiter. Ich stelle dir mal den Block rein, den ich auf die Schnelle verändert habe. Damit sieht es dann so aus:

CSS

.screen{
margin-top: 15px !important;
margin-left: 110px !important;
max-width: 1200px !important; /* Breite der Box */
border: 5px solid dodgerblue! important;
border-radius:24px !important;
padding: -60px -60px !important;
background: #f8f8ff !important;
box-shadow: inset 0 0 15px 15px lightblue !important; /* innerer Schatten */
}

Endor

FuchsFan

Dein Block war ein Volltreffer.

Jetzt habe ich das Logo auch.

Muss nur noch ein paar Sachen anpassen.

Vielen vielen Dank!!

Mfg.
Endor

FuchsFan

Zitat von Endor

Dein Block war ein Volltreffer.

Ja, Endor, der Übeltäter dabei ist align-items: center !important;.

2002Andreas

Zitat von FuchsFan

padding: -60px -60px !important;

Padding Werte dürfen nicht negativ sein, also nicht mit einem - Zeichen.

FuchsFan

Zitat von 2002Andreas

Padding Werte dürfen nicht negativ sein, also nicht mit einem - Zeichen.

Gut zu wissen, Andreas. Danke!

Endor

So hier die neue Version.

Den Schriftzug "Endors Firefox" habe ich jetzt festgenagelt, der hüpft nicht mehr rauf oder runter.

CSS

@-moz-document url(about:welcome) {


html{background:#ffffff!important;}


.screen{
margin-left: auto !important;
margin-right: auto !important;
max-width: 1200px !important;
min-height: 90vh !important;
max-height: 90vh !important;
margin-top: 30px !important;
margin-bottom: 20px !important;
padding-bottom: 20px !important;
padding-top: 15px !important;
padding-left: 50px !important;
padding-right: 50px !important;
background: #fffff0 !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;}


.screen:hover{
border-left-color: #bbddff !important;
border-top-color: #bbddff !important;
border-right-color: #11508d !important;
border-bottom-color: #11508d !important;}


h1{
margin-top: 160px !important;
color: #cc0000 !important;
font-size: 35px !important;
font-weight: bold !important;}


.secondary-cta > span:nth-child(1){
color: #1a75ff !important;
font-weight: bold !important;
font-size: 17px !important;}


h2{
color: #1a75ff !important;
margin-top: 20px !important;
margin-bottom: 10px !important;
font-weight: bold !important;
font-size: 17px !important;}


.brand-logo{
margin-top: 160px !important;
margin-bottom: -170px !important;}


[class="secondary-cta top"]{
position:absolute !important;
top: 130px !important;
left: 570px !important;}


.screen:before {
position:absolute !important;
top: 70px !important;
left: 650px !important;
content: "Endors Firefox";
font-weight:bold !important;
font-size: 26px !important;
color:red !important; }

.tiles-container:hover {
background: LemonChiffon !important;}

.primary{
margin-top: 45px !important;
-moz-appearance: none !important;
background: #0060df url("..//icons/Fuchs4.png") no-repeat !important;
background-position:16px 11px!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;}


.primary:hover{
background: #003eaa url("..//icons/Fuchs4.png") no-repeat !important;
background-position:16px 11px!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;}


button[class="secondary"][value="secondary_button"][data-l10n-id="onboarding-multistage-welcome-secondary-button-label"]{
-moz-appearance:none!important;
background: #F0F0F0 url("..//icons/Bild15.png") no-repeat !important;
color:black!important;
font-size:14px!important;
text-decoration:none!important;
padding-right:40px!important;
padding-left:40px!important;
padding-bottom: 4px !important;
padding-top: 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:12px 4px!important;
border-radius:20px!important;}


button[class="secondary"][value="secondary_button"][data-l10n-id="onboarding-multistage-welcome-secondary-button-label"]:hover{
-moz-appearance:none!important;
background: #B2EDFA url("..//icons/Bild15.png") no-repeat !important;
color:black!important;
font-size:14px!important;
text-decoration:none!important;
background-position:12px 4px!important;
border-radius:20px!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;}


button[class="secondary"][value="secondary_button"][data-l10n-id="onboarding-multistage-theme-secondary-button-label"],
button[class="secondary"][value="secondary_button"][data-l10n-id="onboarding-multistage-import-secondary-button-label"]{
-moz-appearance:none!important;
background: #F0F0F0 url("..//icons/Bild42.png") no-repeat !important;
color:black!important;
font-size:14px!important;
text-decoration:none!important;
padding-right:40px!important;
padding-left:40px!important;
padding-bottom: 4px !important;
padding-top: 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:12px 4px!important;
border-radius:20px!important;}


button[class="secondary"][value="secondary_button"][data-l10n-id="onboarding-multistage-theme-secondary-button-label"]:hover,
button[class="secondary"][value="secondary_button"][data-l10n-id="onboarding-multistage-import-secondary-button-label"]:hover{
-moz-appearance:none!important;
background: #B2EDFA url("..//icons/Bild42.png") no-repeat !important;
color:black!important;
font-size:14px!important;
text-decoration:none!important;
background-position:12px 4px!important;
border-radius:20px!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;}


[class="indicator current"] {
background: lime !important;}


[class="indicator "] {
background: gold !important;
opacity: 1 !important;}
}

Alles anzeigen

Es kann sein, dass ihr da noch was anpassen müsst:

bei diesen beiden Absätzen bei left eventuell den Wert höher setzen

damit es passt.

CSS

[class="secondary-cta top"]{
position:absolute !important;
top: 130px !important;
left: 570px !important;}


.screen:before {
position:absolute !important;
top: 70px !important;
left: 650px !important;
content: "Endors Firefox";
font-weight:bold !important;
font-size: 26px !important;
color:red !important; }

Alles anzeigen

Mfg.
Endor

grisu2099

Zitat von Endor

Endor habe ich jetzt festgenagelt, der hüpft nicht mehr rauf oder runter.

FuchsFan

Zitat von Endor

So hier die neue Version.

Sehr schön, Endor, alles wird gut,

Endor

:wink:

Boersenfeger

Danke, auch Nightly hat jetzt ein Gesicht

Endor

Hallo zusammen.

Hätte da auch einen neuen:

about:config

Anpassung für Warnungsseite die zuerst kommt und weitere Seiten.

CSS Code

CSS

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

    @-moz-document url-prefix(about:config){

    html {
    background: #ffffff !important;
    margin-top: 70px !important;}
    
    .title{margin-left: 0px !important;}
    
    #warningTitle {
    color: #cc0000 !important; 
    font-size: 42px !important; 
    font-weight: bold !important;}

    #search-container::before{
    content: "Endors erweiterte Einstellungen" !important;
    margin-left:450px!important;
    color:red !important;
    font-weight:bold !important;
    font-size:22px!important;}

    body{ 
    background-color: #fffff0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center!important;
    align-items: center!important;
    max-width: 1250px !important; /* <-- Hier, Breite bei Bedarf anpassen */
    min-height: 750px !important;
    margin-top: -35px !important;
    margin-bottom: 30px !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-radius: 20px !important;
    border-width:  4px !important;
    border-style: outset !important;}    
    
    #search-container{    
    left: 102px !important;
    top:  50px !important;
    position: absolute !important;
    max-width: 1247px !important; /* <-- Hier, Breite bei Bedarf anpassen */
    border:none !important;
    background: none !important;}
    
    #about-config-search{
    margin-top: 20px !important;
    border-radius: 20px !important;
    border-color: blue !important;}
    
    #prefs{
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    border-bottom-left-radius:20px !important;
    border-bottom-right-radius:20px !important;
    border-color: red !important;
    margin-top: 100px !important;}
    
    .deleted > th:nth-child(1),
    .deleted > td:nth-child(2),
    .deleted > td:nth-child(3),
    .deleted > td:nth-child(4){border-top-color: red !important;}
    
    .deleted > th:nth-child(1)::before,
    .deleted > td:nth-child(2)::before,
    .deleted > td:nth-child(3)::before,
    .deleted > td:nth-child(4)::before{
    border-bottom-color: red !important; 
    background-color: #fffff0 !important; }
    
    table#prefs:not([has-visible-prefs=""]) {
    border: 0 !important;}    
     
    table {
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    border-bottom-left-radius:20px !important;
    border-bottom-right-radius:20px !important;}
    
    tr:nth-child(even) {background-color: #fffff0 !important;}
    
    tr:nth-child(even):hover {background-color: #ffeb99 !important;}
    
    tr:nth-child(odd){background: #FFFFFF !important;}
    
    tr:nth-child(odd):hover{background: #ffeb99 !important;}
    
    .button-delete {fill: red !important;}
    
    .button-edit {fill: orange !important; background-color: transparent !important;}
    
    .button-toggle {fill: #00b300 !important; background-color: transparent !important;}
    
    .button-reset {fill: red !important;}    
    
    .button-add {fill: red !important; background-color: transparent !important;}
    
    .button-add:hover {fill: red !important; background-color: #ffff00 !important;}
    
    .button-delete:hover {fill: red !important; background-color: #ffff00 !important;}    
    
    .button-reset:hover {fill: red !important; background-color: #ffff00 !important;}
    
    .button-edit:hover {fill: orange !important; background-color: #ffff00 !important;}
    
    .button-toggle:hover {fill: #00b300 !important; background-color: #ffff00 !important;}
                
    #show-all{
    -moz-appearance:none!important;
    background: #F0F0F0 url("..//icons/Bild3.png") no-repeat !important;
    color:black!important;
    font-size:14px!important;
    text-decoration:none!important;
    padding-right:40px!important;
    padding-left:40px!important;
    padding-bottom: 4px !important;
    padding-top: 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:12px 5px!important;
    border-radius:20px!important;}
        
    #show-all:hover{
    -moz-appearance:none!important;
    background: #B2EDFA url("..//icons/Bild3.png") no-repeat !important;
    color:black!important;
    font-size:14px!important;
    text-decoration:none!important;
    background-position:12px 5px!important;
    border-radius:20px!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;}    
    
    #warningButton{
    min-width: 320px !important;
    background: #0060df url("..//icons/warning.png") no-repeat !important;
    min-height: 46px!important;
    background-position:14px 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:22px!important;}
        
    #warningButton:hover{
    background: #003eaa url("..//icons/warning.png") no-repeat !important;
    background-position:14px 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:22px!important;}        
    }

Alles anzeigen

Symbole:

Habe aber noch ein kleines Problem damit:

Habe keinen Weg gefunden diesen roten Strich zu entfernen, ohne bei der Tabelle auch den
oberen Strich zu entfernen, was ich ja nicht will.

Hier wie im Bild steht, sieht man bei hover die Ecken, was eigentlich nicht sein sollte.
Auch da habe ich bis jetzt keinen Weg gefunden.

Mfg.
Endor

About Seiten mit CSS Codes anpassen

Ähnliche Themen

Mehrzeilige Tableiste für aktuelle Firefox-Versionen

Addons Manager Nightly