Beiträge von harff182

harff182

Zitat von milupo

Du verwendest mehrfach [label$] als Attributselektor. Das bedeutet, der angegebene Text des Attributs steht am Ende eines längeren Textes. Einerseits verwendest du in Zeile 63 [label="Yter"], das bedeutet Yter ist der vollständige Text des Attributs. Andererseits in Zeile 68 [label$="Yter"], das bedeutet, dass der Text von label länger ist und Yter am Ende steht. Was denn nun?

Das habe ich so nicht in Erinnerung gehabt.

Ich hab halt mit meinen Tests solange rumprobiert, bis was funktioniert hat und es dann so gelassen.

Der Text ist immer der komplette Text des Bookmarks. Dann kann ich also "$" überall weglassen?

Son Goku :

Und wie färbst Du den Text für den Ordner "Scripte" im "Mozilla"-Ordner?

Das ist das, was ich (noch) nicht hinbekomme...

harff182

2002Andreas :

klappen beide nicht.

Hier mal mein kompletter code für das .css, das ich importiere:

CSS

 /*    36_Lesezeichen_pimpen.css    
    mit Hilfe von Andy in meiner Nachfrage:
    https://www.camp-firefox.de/forum/thema/133931/?postID=1192141#post1192141

     211210:    Fontspielereien am Lesezeichen-Zeilen-Text ;) 
            font-weight: 400 = normal
            font-weight: 500 = medium 
            font-weight: 600 = semi bold 
            font-weight: 700 = bold
            https://developer.mozilla.org/de/docs/Web/CSS/font-weight#summary
    
    220811:    Son Goku: einzelne Labels einfärben
*/
#PlacesToolbarItems toolbarbutton.bookmark-item menupopup menu.menu-iconic.bookmark-item,
#PlacesToolbarItems toolbarbutton.bookmark-item menupopup menuitem.menuitem-iconic.bookmark-item,
#PlacesToolbarItems > .bookmark-item > .toolbarbutton-text {
    font-weight: 700 !important;    
    font-size: 11px !important;
}

#PlacesToolbarItems toolbarbutton.bookmark-item menupopup menu.menu-iconic.bookmark-item,
#PlacesToolbarItems toolbarbutton.bookmark-item menupopup menuitem.menuitem-iconic.bookmark-item
{
    color: darkblue !important;
    font-size: 10px !important
}

/*    220811:    einzelne Bookmark-Labels einfärben
            Son Goku:    https://www.camp-firefox.de/forum/thema/135124 
*/
/*    alles Ordner in der Lesezeichenleiste: */
.bookmark-item[label$="2 do"] {
        font-weight: 700  !important;
        color:red !important;        
    }
.bookmark-item[label$="DZ2do"] {
        font-weight: 700  !important;
        color:red !important;        
    }
    
.bookmark-item[label$="YTer"] {
        font-weight: 700  !important;
        color:red !important;        
    }
    
/*    wenn es ein Link in einem Ordner sein soll, klappt das hier... */
#PlacesToolbarItems toolbarbutton.bookmark-item menupopup menuitem.menuitem-iconic.bookmark-item[label$="Startseite"] {
        font-weight: 700  !important;
        color:red !important;        
}
#PlacesToolbarItems toolbarbutton.bookmark-item menupopup menuitem.menuitem-iconic.bookmark-item[label$="Startseite - Stadtwerke Düsseldorf AG"] {
        font-weight: 700  !important;
        color:red !important;        
}

#PlacesToolbarItems toolbarbutton.bookmark-item menupopup menuitem.menuitem-iconic.bookmark-item[label$="Spezial Drähte - Zivipf.de"] {
        font-weight: 700  !important;
        color:red !important;        
}

/*    aber wenn es ein Ordner in dem Ordner sein soll ??  */

toolbarbutton.bookmark-item[label="YTer"] menuitem.bookmark-item[label="Alter"] {
    font-weight: bold !important;
    color: #F20 !important;
}

toolbarbutton.bookmark-item[label$="YTer"] menu.bookmark-item[label$="Alter"] {
    font-weight: bold !important;
    color: red !important;
}

Alles anzeigen

harff182

Mit diesem Code von Son Goku habe ich einige Ordner-Labels in der LZLeiste verändert:

CSS

/*    220811:    einzelne Bookmark-Labels einfärben
            Son Goku:    https://www.camp-firefox.de/forum/thema/135124 
*/
.bookmark-item[label="2 do"] {
        font-weight: 700  !important;
        color:red !important;        
    }
.bookmark-item[label="DZ2do"] {
        font-weight: 700  !important;
        color:red !important;        
    }
    
.bookmark-item[label="YTer"] {
        font-weight: 700  !important;
        color:red !important;        
    }
/*    und wenn es was in dem Ordner sein soll ??  */

.bookmark-item[label="Alter"] {
        font-weight: 700  !important;
        color:red !important;        
}

Alles anzeigen

Im Ordner "YTer" habe ich einen Eintrag "Alter".

Wie ändere ich dessen Farbe?

mDv...

harff182

Zitat von gero

Ja ... da bekomme ich um den weissen Rahmen noch einen roten hinzu ...

Hast Du eine userChromeShadow.css ?

Wenn ja, zeig mal...

harff182

Schuß ins Blaue:

border-bottom 2px solid Hintergrundfarbe !important;

Für den aktiven TAB?

BTW: es wäre geschickter für die Helfer gewesen, wenn Du einen eigenen Thread aufmachst

harff182

2002Andreas :

Danke für den Hinweis

Da war ich das letzte und einzige mal, als ich nach dem Upgrade Win7 => W10 das gleiche Design wiederhaben wollte.

Hab jetzt fast 'n halbes Stündchen dran rumgespielt und nix gescheites hinbekommen.

Setz ich mal auf meine 2do Liste als Letztes für wenn ich garnix anderes zu tun hab

guuts nächtle...

harff182

Mira_Belle :

Zitat von Mira_Belle

Ich füge mal ein Bild ein, damit klarer wird, was ich meine.

Wieso haben die beiden FF-Fenster in Deinem Bild verschiedene Titel-Leisten-Farben?

Wie hasn dat anjestellt?

Auch haben wollen

Oder ist das auch wieder ein Win11-Feature?

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

harff182

Zitat von Sören Hentzschel

Firefox-Anpassungen sind nun einmal Spielereien.

Die aber lehrreich sein können.

Mich hat es z.B. unheimlich genervt, daß ich auf dem MDN zwar den Border image generator entdeckt hatte, aber

- mit von mir hochgeladenen SVGs nur base64 zurückbekam.

- die helle Schnörkel-Vorlage nur für primär dunkle Hinterhgründe taugt.

Ich habs nunmal nicht so mit SVG und base64 und dunklen Füchsen

Dann hab ich mir im Netz einen schwarzen SVG-Rahmen gesucht, der mir etwas zusagt und solange rumgebastelt, bis er mit meinem "Goldbärchen-Design" harmoniert:

Und demnext guck ich mal ob ich nen Rahmen/Border finde, den ich noch besser finde, denn jetzt weis ich ja, wie es geht

Lange Rede, kurzer Sinn: ich hab heut abend mal wieder einiges dazugelernt und kann zufrieden machen.

harff182

Ich weis, ich bin nicht der schnellste, aber meine Mom unten hat Vorrang, wenns um Ihre Pflege geht.

Zitat von Mira_Belle

Verrätst Du mir

Auch wenn es bisher schon Lösungen gab, hier meine:

CSS

/*    Den Text "Dialog-Design by harff182" will ich ganz unten rechts inne Ecke.... */    
    #aboutDialogContainer::after {
        content: "Dialog-Design by harff182 " !important;
        font-size: 10px !important;
        color: black !important;
        margin-left: 789px !important;
        margin-bottom: -2px !important;
        border-left: 2px solid grey !important;
        border-top: 2px solid grey !important;
        border-bottom: 0px !important;
        border-right: 0px !important;
        border-top-left-radius: 3px !important;
    }

Alles anzeigen

Zitat von Mira_Belle

Aber es ist ja Deine "Spielwiese"

....zum lernen

Mir gehts dabei oft mehr um ein "Proof of Concept", also ob ich was hinbekomme.

Sei es ein großes Bild im Hintergrund, oder ein kleines mehrfach hinter-/untereinander oder ein Farbverlauf oder...

Selbiges gilt für mein Füchschen

Sei es normale Rahmen, Schnörkel-Rahmen oder ein Polygon-Rahmen: probieren geht über Studieren.

Feinarbeiten mach ich erst dann, wenn ich glaube, eine Variante für länger zu behalten.

Für mich ist es auch schön und hilfreich, zu sehen, welche Design-Vielfalt, oft mit Code, hier auftaucht und dass es wieder was zum abgucken/testen gibt.

Damit kann ich mich Abends super vom Streß/Frust des Tage ablenken

harff182

Einen hab ich noch:

harff182

Das Wetter war bescheiden und ich hatte genug Muße, wieder etwas rumzuspielen

Ergebnisse:

und

Jeweils in diversen Gradient-Farb- und Backgound-Versionen, je nach Wetter, Tages- oder Jahreszeit oder Gemütsverfassung.

Ich wünsch Euch allen eine trockene Woche und wende mich jetzt meinem Lieblingsport zu: Snooker gucken

harff182

Zitat von oldman53

da kann das AddOn 'Selective Bookmarks Export Tool' weiter helfen.

Danke für den Tip, auf sowas hab ich gewartet

Grade ausprobiert und tut, was ich erwartet habe.

harff182

Ich hab ja in meinen Dialog ganz links oben den Text "Das hier ist meine Spielwiese zum lernen " mit diesem Code eingefügt:

CSS

    #aboutDialogContainer::before {
        content: "Das hier ist meine Spielwiese zum lernen " !important;
         font-size: 14px !important;
        color: red !important;
        border-right: 2px solid red !important;
        border-bottom: 2px solid red !important;
        border-bottom-right-radius: 3px !important;
    }

Nun werden ja an diversen Stellen im Dialog-Code mit z.B. [href='about:credits'] anklickbare Links geschaffen bzw zur Verfügung gestellt.

Könnte ich meinen Text auch mit einem Link ausstatten, der dann auf diesen Thread hier verweist?

harff182

Is zwar der aus #163 , aber Danke, Schema erkannt, Problem gebannt

harff182

2002Andreas :

Danke, ich hab mir Deinen Code aus #162 mal angepaßt, kommt ganz gut:

Auch wenn ich nicht unbedingt der Hover-Fan bin, möchte ich den Spendenbereich hovern, scheitere aber bisher

Über eine Lernhilfe würde ich mich freuen

harff182

Zitat von Mira_Belle

Besser?

Ein glücklicher Fuchs

Bezüglich background-size : wenn du sowas nachgucken willst, besser hier:

background-size - CSS | MDN

Die background-size CSS Eigenschaft definiert die Abmessungen eines Hintergrundbildes. Die Abmessungen des Bildes können komplett festgelegt werden oder nur…

developer.mozilla.org

Mit den Erklärungen + Beispielen komme sogar ich oft klar

guuts nächtle...

harff182

hm...

Warum hast Du das #aboutDialog davor? Funktioniert doch auch ohne

harff182

Zitat von grisu2099

Meinst du das in dieser Art?

Nicht so ganz, da bin ich pingelig in meinen Vorstellungen.

Wenn das "Dann" drin ist, dann soll es so wie bei mir rechts vom Händchen sein und dann muß "spenden" kleingeschrieben sein.

Aaaaber:

Wenn ich "Dann: " einsetze, wäre das akzeptabel. Ich geh mal spielen...

harff182

Danke, dann bastel ich mal weiter, ob ich was hinbekomme, was mir gefällt.

Und am späten Freitag aben darf ich Dir ein schönes Wochende wünschen

Beiträge von harff182

Link im Ordner in der LZLeiste farblich ändern

Link im Ordner in der LZLeiste farblich ändern

Link im Ordner in der LZLeiste farblich ändern

Rahmen um Lesezeichen-Ordner-Menü entfernen

Mit Version 96 hat sich der aktive Tab optisch verändert

Wunsch: eine hauchdünner heller Rand beim dunklen Theme

Wunsch: eine hauchdünner heller Rand beim dunklen Theme

About Seiten mit CSS Codes anpassen

Dialog Hilfe/Über Firefox

Dialog Hilfe/Über Firefox

Dialog Hilfe/Über Firefox

Dialog Hilfe/Über Firefox

Wie EINEN Lesezeichenordner in anderen PC kopieren?

Dialog Hilfe/Über Firefox

Dialog Hilfe/Über Firefox

Dialog Hilfe/Über Firefox

Hilfedialog (Anpassungen)

Dialog Hilfe/Über Firefox

Dialog Hilfe/Über Firefox

Tipp: Buttons mit (kleinen) abgeschrägten Ecken