Selektor für "Neu" gesucht

harff182

Bin wieder mal zu blöd, über die Browser-Werkzeuge was zu finden

Mit welchem Selektor kann ich diesen "Button" ansprechen?

Dharkness

Hi,

das wäre dann .badge.label.newMessageBadge.

harff182

Dharkness :

Geil

Da is nix drin, wonach ich gesucht hab

Wie hast Du den gefunden?

Dharkness

Guckst Du da ↓.

harff182

Ahhhh... mit "Werkzeuge für Web-Entwickler" hab ichs jetzt auch gefindet.

Hatte nur "Browser-Werzeuge" ohne Erfolg versucht.

Danke für den Schubs

milupo

Zitat von harff182

Bin wieder mal zu blöd, über die Browser-Werkzeuge was zu finden

Da es sich um ein Element einer Webseite handelt, einfach Rechtsklick auf das Element und aus dem Kontextmenü Untersuchen auswählen.

harff182

milupo :

Wieder was gelernt - hoffentlich find ich die Gehinzelle wieder, wo das jetzt drinsteht

aborix

Es gibt eine umfangreiche Dokumentation zu den Entwicklerwerkzeugen:

MDN - Firefox Developer Tools ff.

milupo

Zitat von aborix

Es gibt eine umfangreiche Dokumentation zu den Entwicklerwerkzeugen:

Ergänzend: Das Original ist natürlich in Englisch. Die Seiten der Dokumentation sind aber, zumindest ein Teil davon, ins Deutsche übersetzt. Bei einigen Seiten ist die deutsche Übersetzung auch veraltet.

harff182

aborix : is gebookmarkt... ...guck ich bestimmt ab und an rein.

milupo: Im Notfall wird einem ja hier geholfen...

Dharkness :

Magst Du den Code für die 3 hier teilen?

Ich find trotz "Untersuchen" wieder nicht die richtigen Selektoren und könnte damit morgen für "Hilfreichste Antwort" (und vielleicht für die Zukunft ) lernen, wie es geht, also bitte nicht vorsagen

Bisher hab ichs nur geschafft, direkt ums ertse Icon einen gelben Hintergrund reinzubasteln

Aber morgen ist ja auch noch ein Tag, in diesen Sinne

guuts nächtle...

milupo

Hast du denn im Inspektor dann auch mal auf die Pfeilspitze vor dem Eintrag geklickt, um darunterliegende Einträge aufzuklappen? Auch ist dann im Eintrag eine Ellipsis (drei nebeneinder befindliche Punkte) zu sehen. Da kann man ebenfalls drauf klicken, um aufzuklappen.

Dharkness

Aber gerne doch, guckst Du da ↓.

CSS

/* Inhalt melden */
.jsReportPost.jsOnly,
.jsReportPost.jsOnly:hover {
    border: 0 !important;
}
.jsReportPost.jsOnly a {
    background: #FFA500;
    padding: 3px 5px !important;
}
.jsReportPost.jsOnly a:hover {
    background: #336CCF !important;
    color: #FFF !important;
}
.jsReportPost.jsOnly span {
    min-width: 108px;
}
.jsReportPost.jsOnly span::after {
    content: "Inhalt melden" !important;
    padding-left: 10px !important;
}


/* Zitieren und Melden */
.jsQuoteMessage,
.jsQuoteMessage:hover {
    border: 0 !important;
    margin-left: 5px !important;
}
.jsQuoteMessage a {
    background: #FFD700;
    padding: 3px 5px !important;
}
.jsReportConversationMessage.jsOnly a {
    background: #F10;
    color: #FFF !important;
    padding: 3px 5px !important;
    margin-left: 5px !important;
}
.jsQuoteMessage a:hover {
    background: #336CCF !important;
    color: #FFF !important;
}
.jsReportConversationMessage.jsOnly a:hover {
    background: #336CCF !important;
    color: #FFF !important;
}
.jsQuoteMessage span {
    min-width: 68px;
}
.jsQuoteMessage span::after {
    content: "Zitieren" !important;
    padding-left: 10px !important;
}

/* Beitrag bearbeiten */
footer > div > ul > li:nth-child(1) {
    border: 0 !important;
    margin-left: 5px !important;
}
.button.jsMessageEditButton {
    border: 0 !important;
    background: #F5DEB3;
    padding: 3px 5px !important;
}
.button.jsMessageEditButton:hover {
    border: 0 !important;
    background: #336CCF !important;
    color: #FFF !important;
}

/* Als „Hilfreichste Antwort“ markieren */
.jsMarkAsBestAnswer,
.jsMarkAsBestAnswer:hover {
    border: 0 !important;
}
.jsMarkAsBestAnswer a {
    background: #77B7E3;
    padding: 3px 5px !important;
    margin-left: 5px !important;
}
.jsMarkAsBestAnswer a:hover {
    background: #336CCF !important;
    color: #FFF !important;
}
.jsMarkAsBestAnswer span {
    min-width: 148px;
}
.jsMarkAsBestAnswer span::after {
    content: "Hilfreichste Antwort" !important;
    padding-left: 10px !important;
}

Alles anzeigen

omar1979

Ich hab da mal selber mit Hilfe von Stilbearbeitung eine Code gemacht, dass nur das "Neu" im neuen Messages ändert.Hoffe es hat geklappt. Würde gerne eure Meinungen wissen da das mein 1.stes Script ist.

Code

.badge.label.newMessageBadge {
.badge, a.badge {
    font-size: 13px;
}
.badge, a.badge {
    background-color: blue;
    border-radius: 2px;
    color: #fafafa;
    display: inline-block;
    line-height: 1.28;
    padding: 2px 6px;
    position: relative;
    vertical-align: middle;
    white-space: nowrap;
    word-wrap: normal;
    font-weight: 400;
}
}

Alles anzeigen

Dharkness hab es Dank deinem Bild im Beitrag Nr:

#4

geschaft. Danke dir für das volle Bild.

etwas erweitert die Code:

Code

.messageGroupStarter .messagePublicationTime .datetime::after {
    content: ' Themenstarter';
    background-color: red;
    color:white;
    padding-block: 5px;
    padding-left: 5px;
    padding-right: 8px;
}

*, ::before, ::after {
    box-sizing: inherit;
    min-width: 0;
}
.messageHeaderMetaData .messagePublicationTime {
    color: blue;
}


.badge.label.newMessageBadge {
.badge, a.badge {
    font-size: 13px;
}
.badge, a.badge {
    background-color: blue;
    border-radius: 2px;
    color: white;
    display: inline-block;
    line-height: 1.28;
    padding: 2px 6px;
    position: relative;
    vertical-align: middle;
    white-space: nowrap;
    word-wrap: normal;
    font-weight: 400; }
}

Alles anzeigen

und so siehts aus.. ohne das "Neu".

Jetzt meine Frage: kann ich nach dem "Vor 8 Stunden" noch ein Abstand machen, damit das rote Hintergrund nicht zusammenklebt?

Und kann man Firefox nicht mehr Offline starten?

Früher langte es, wenn man bei Eigenschaften, Verknüpfung, Ausführen in: "C:\Program Files\Mozilla Firefox" <-hier ein -offline anhängte, dass dann so aussah: "C:\Program Files\Mozilla Firefox"-offline

Die letzte Code von mir funkt doch nicht da im Forum.

2002Andreas

Zitat von omar1979

nach dem "Vor 8 Stunden" noch ein Abstand machen,

Neuer Code, Zeile 5 ist neu eingefügt.

CSS

.messageGroupStarter .messagePublicationTime .datetime::after {
    content: ' Themenstarter';
    background-color: red;
    color:white;
    margin-left: 10px !important;
    padding-block: 5px;
    padding-left: 5px;
    padding-right: 8px;
}

Bei den anderen Einträgen in deinem Code weiß ich nicht, was du damit machen wolltest.

omar1979

Zitat von 2002Andreas

deinem Code weiß ich nicht, was du damit machen wolltest.

ich glaube die Zeilen 10 bis 13 sind unnötig.. und die underen mit padge sind für das *Neu* das dahintersteht.. hab einfach das meiste vom Inspektor kopiert und geändert. :-9

aber die Code funkt hier im Forum nicht, nur im inspektor.

CSS

.messageGroupStarter .messagePublicationTime .datetime::after {
    content: ' Themenstarter';
    background-color: red;
    color:white;
    margin-left: 10px !important;
    padding-block: 5px;
    padding-left: 5px;
    padding-right: 8px;
}

.messageHeaderMetaData .messagePublicationTime {
    color: blue;
}

.badge.label.newMessageBadge {
.badge, a.badge {
    font-size: 13px;
}
.badge, a.badge {
    background-color: blue;
    border-radius: 2px;
    color: white;
    display: inline-block;
    line-height: 1.28;
    padding: 2px 6px;
    position: relative;
    vertical-align: middle;
    white-space: nowrap;
    word-wrap: normal;
    font-weight: 400; }
}

Alles anzeigen

Jetzt siehts mit dein Zeile so aus. Aber wie macht man es, dass es im Forum so anzeigt? Habe es als CSS-Datei geladen. Oder funkt es nur mit dem Stilbearbeitung?

2002Andreas

Zitat von omar1979

Aber wie macht man es

Meinst du das so?

Wenn ja, dann teste bitte.

CSS

.messageGroupStarter .messagePublicationTime .datetime::after {
    content: ' Themenstarter';
    background: red !important;
    color: white !important;
    padding-block: 1.6px;
    padding-left: 5px !important;
    padding-right: 8px !important;
    margin-left: 10px !important;
}

.messagePublicationTime time.datetime {
    background: blue !important;
    color: white !important;
    padding-block: 1.5px !important;
    padding-left: 5px !important;
    padding-right: 0px !important;
    margin-left: 10px !important;    
}

.badge.label.newMessageBadge {
    background: green !important;
 }

Alles anzeigen

omar1979

2002Andreas zeigt das bei dir im Forum so an oder nur wenn du den Stilbearbeitung offen hast?

2002Andreas

Zitat von omar1979

nur wenn du den Stilbearbeitung offen hast?

Auch in der userContent.css sieht das dann so aus.

omar1979

Zitat von 2002Andreas

der userContent.css

ahhh.. ich hab das userContent.css garnicht^^ muss ich die Code dort eintragen, damit es im Forum aktiv wird? Ich hab die code nur in einem CSS-Datei reingetan und im userChrome.css geladen

2002Andreas

Zitat von omar1979

ich hab das userContent.css garnicht

userChrome.css = Firefox

userContent.css = Webseiten und alle Seiten die sich in einem neuen Tab öffnen

Zitat von omar1979

muss ich die Code dort eintragen

Ja

#15

Selektor für "Neu" gesucht

harff182 25. Oktober 2021 um 21:17

Ähnliche Themen

ShadowRoot: Neue Aufruf-Methode für CSS-Regeln

Tabs mehrzeilig

Fenster wird erst maximiert, dann verkleinert rechts dargestellt, dann links ...

Druckvorschau zu klein

Seit Firefox-Version 87.0 fehlt bei einem Bild/Foto im Rechtsklick-Kontextmenü der Eintrag "Grafik-Info anzeigen"