Mit content kann man auch eine Url zu einer Grafik angeben:
Dafür habe ich mich entschieden (am einfachsten, nur kopieren), ein Dankeschön an Dich milupo.
Danke auch an .DeJaVu , ist genau so , und auch an 2002Andreas , wäre auch eine Möglichkeit.
aber ohne die Eigenschaft wird das nie funktionieren.
Danke für den Hinweis, Sören.
ein Dankeschön an Dich milupo
Gern geschehen, aber die Möglichkeit habe nicht ich erfunden. 
Gern geschehen, aber die Möglichkeit habe nicht ich erfunden.
Du hast sie aber weiter gegeben, das ist wichtig, damit es funktioniert.
Noch zur Ergänzung: Auf MDN steht, dass bei URIs die absoluten (also vollständigen Pfade) angegeben werden sollen. Die angegebenen Beispiele sind aber alle Webadressen. Bei lokalen Adressen ist das anscheinend nicht nötig.
Die angegebenen Beispiele sind aber alle Webadressen. Bei lokalen Adressen ist das anscheinend nicht nötig.
Denke ich auch, milupo, sonst dürfte es wohl nicht funktionieren.
Nun brauche ich wieder Hilfe, weil ich nicht weiter komme. Den folgenden Code habe ich eingefügt:
/* auf Adresse wird verwiesen */
.pageNavigation::before {
color: red !important;
content: " Du bist hier: " !important;
font-size: 18px !important;
font-weight: 900 !important;
margin-left: 20px !important;
} Der Eintrag erscheint auch in der Navi-Leiste, aber über der Adresse. Ich möchte ihn natürlich vor diese haben, und außerdem wird die Höhe der Leiste jetzt automatisch erweitert.
Der Eintrag erscheint auch in der Navi-Leiste, aber über der Adresse. Ich möchte ihn natürlich vor diese haben, und außerdem wird die Höhe der Leiste jetzt automatisch erweitert.
.pageNavigation bezeichnet eine Box. Wenn du hier mit ::before arbeitest, willst du de facto eine Box vor eine Box setzen. Da du wahrscheinlich wie ich margin-left und margin-right gesetzt hast, wird der Bereich für Navigation über die ganze Bildschirmbreite ausgedehnt. Wenn du links margin-left wegnimmst, steht dann dein content-Text außerhalb des Bereichs. Probiere mal das:
li[title="camp-firefox.de"]::before {
...
}Probiere mal das:
Die Lösung ist natürlich perfekt, danke milupo.
In der Zwischenzeit habe ich noch mit dem alten Code probiert und eine halbwegs zufriedene Lösung gefunden, aber da musste ich dann mit viele margin-Werten arbeiten. Rechts die Icon-Box ist noch nicht fertig gewesen, da hätte ich noch weiter machen müssen.
Also, da ziehe ich deine Lösung allemal vor.
Kommt mir bekannt vor, das darf nicht alleine stehen:
.pageNavigation .breadcrumbs ol[itemprop="breadcrumb"]
{
position: relative !important;
left: 160px !important;
}
#tpl_wcf_article .pageNavigation .breadcrumbs ol[itemprop="breadcrumb"],
#tpl_wbb_threadAdd .pageNavigation .breadcrumbs ol[itemprop="breadcrumb"],
#tpl_wbb_thread .pageNavigation .breadcrumbs ol[itemprop="breadcrumb"],
#tpl_wcf_ignoredUsers .pageNavigation .breadcrumbs ol[itemprop="breadcrumb"],
#tpl_wcf_compulsory .pageNavigation .breadcrumbs ol[itemprop="breadcrumb"],
#tpl_wbb_userPostList .pageNavigation .breadcrumbs ol[itemprop="breadcrumb"],
#tpl_wbb_unresolvedThreadList .pageNavigation .breadcrumbs ol[itemprop="breadcrumb"]
{
position: relative !important;
left: -15px !important;
}
.pageNavigation .breadcrumbs ol[itemprop="breadcrumb"]::before
{
color: #bb1900 !important;
content: " Du bist hier: " !important;
font-size: 12px !important;
font-weight: 900 !important;
margin-right: 5px !important;
margin-top: 1px !important;
}Wie ersichtlich ist das nicht für jede Sektion gleich.
Kommt mir bekannt vor
Das soll es auch bleiben, denn du hast es ja dort gezeigt RE: Anpassung Camp-Firefox Hilfe-Forum
Mir hat es gefallen, nur musste ich den Code umbauen, weil zu dem Zeitpunkt des Kopierens dort noch .pageNavigation .pageNavigationIcons.jsPageNavigationIcons::after { stand. Wenn ich jetzt hinschaue, dann wäre ich eventuell (
) selbst drauf gekommen.
Ich bedanke mich, Code funktioniert prima.
Eine Sache noch, gibt es eine Möglichkeit einen kleinen Abstand zwischen den Schriftzug und der Adresse einzubauen.
Das ist richtig, hat aber genau mit diesem Text nichts zu tun.
weil zu dem Zeitpunkt des Kopierens dort noch .pageNavigation .pageNavigationIcons.jsPageNavigationIcons::after { stand.
Aber nicht bei mir, weil diese Passage bei mir ausgeblendet wird und das schon länger (ich führe seit April eine Historie), ebenso gibt es diesen Text bei mir schon länger.
Die 160px sind dadurch notwendig, weil ich hinter dem Haken noch Text stehen habe "Als gelesen markieren", das wäre dieser Teil:
.pageNavigation .pageNavigationIcons.jsPageNavigationIcons a.markAllAsReadButton::after
Das ist was anderes, als du schreibst, es verlängert den Haken mit plausiblem Text, der Haken wird aber nicht immer angezeigt, deshalb -15px für bestimmte Bereiche des Forums. Und das vermutlich auch nur, weil davor auch ein Symbol steht, das mich nicht interessiert.
Ideal ist es, wenn man fremde Styles übernehmen will, sich ein Bild (Screenshot) vom eigenen anzufertigen, dann den anderen komplett zu übernehmen und davon auch ein Bild machen, und dann vergleichen. Hier werden Elemente ausgeblendet, die bei dir vermutlich sichtbar sind, da müssen dann Positionen nachgebessert werden.
.DeJaVu ,
danke für Deine Erklärungen, für mich ist nur wichtig, dass mit Deinem Code alles funktioniert. Ich werde aber trotzdem mit dem Code-Schnipsel von milupo testen, ob er den gleichen Zweck erfüllt.
Eine Sache noch, gibt es eine Möglichkeit einen kleinen Abstand zwischen den Schriftzug und der Adresse einzubauen.
Das habe ich erledigt:
Hier RE: Anpassung Camp-Firefox Hilfe-Forum habe ich gesagt, dass ich den Code-Schipsel von Dir RE: Anpassung Camp-Firefox Hilfe-Forum testen werde.
Jetzt bin ich zu folgendem Ergebnis gekommen. Ein Teil von .DeJaVu , und der zweite Teil dann von Dir.
So ist es für mich die beste Lösung. Also , danke nochmals an beide Mitstreiter.
.pageNavigation .breadcrumbs ol[itemprop="breadcrumb"]::before {
color: #bb1900 !important;
content: " Du bist hier: " !important;
font-size: 18px !important;
font-weight: 900 !important;
margin-left: 15px !important;
margin-top: -2px !important; }
li[title="camp-firefox.de"] {
margin-left: 20px !important; }Das Ergebnis:
Auf dem Screenshot von milupo ist ein brauner hintergrund mit rnden Ecken zu sehen.
Wie muß das CSS dafür lauten ?
Meine Forumsseite ist ziemlich angepasst. Dies ist der Code für den besagten Bereich:
CSS.main { background-color: wheat !important; margin-left: 250px !important; margin-right: 250px !important; border-radius: 2em !important; }Der Code kommt in die userContent.css. Falls du noch keinen Code für das Forum hast, musst du den Code noch in @-moz-document domain("camp-firefox.de") { ... } einbetten.
och, das hier habe ich fast vergessen.
Danke schön.
ersetzte mal das die beiden "margin" mit folgendes.
margin:0 auto!important;sollte besser funktionieren
Neuerdings funktioniert dieser Code nicht mehr:
/* Button - Zitieren - Hintergrundfarbe */
.buttonGroup > li:last-child .button[data-tooltip="Zitieren"],
.messageFooterButtons > li:last-child .button[data-tooltip="Zitieren"],gold
.messageFooterButtonsExtra > li:last-child .button[data-tooltip="Zitieren"] {
background: lightblue !important; } Deshalb habe ich mal selbst versucht einen neuen Ansatz zu finden, wobei es um diese Button geht:
Für diese Button habe ich jetzt folgenden Code erstellt:
/* Button - Inhalt melden - Hintergrundfarbe */
.buttonGroup > li:last-child .button[data-tooltip="Inhalt melden"],
.messageFooterButtons > li:last-child .button[data-tooltip="Inhalt melden"],
.messageFooterButtonsExtra > li:last-child .button[data-tooltip="Inhalt melden"] {
margin-right: -10px !important;
background: orange !important; }
.buttonGroup > li:last-child .button[data-tooltip="Inhalt melden"]:hover,
.messageFooterButtons > li:last-child .button[data-tooltip="Inhalt melden"]:hover,
.messageFooterButtonsExtra > li:last-child .button[data-tooltip="Inhalt melden"]:hover {
margin-right: -10px !important;
background: greenyellow !important; }
/* Button - Zitieren - Hintergrundfarbe */
.icon.icon16.fa-quote-left{
padding-bottom: 23px !important;
padding-top: 9px !important;
padding-left: 11px !important;
padding-right: 22px !important;
background: gold !important; }
.icon.icon16.fa-quote-left:hover{
background: greenyellow !important; }
/* Button - Bearbeiten - Farbe */
.jsMessageEditButton{
margin-top: 8px !important;
margin-bottom: 8px !important;
background: wheat !important; }
.jsMessageEditButton:hover{
background: greenyellow !important; }
/* Button - Stern (als hilfsreichste Antwort markieren) - Hintergrundfarbe */
.icon.icon16.fa-star{
padding-bottom: 23px !important;
padding-top: 9px !important;
padding-left: 11px !important;
padding-right: 22px !important;
background: lightblue !important; }
.icon.icon16.fa-star:hover{
background: greenyellow !important; } Kann das so verwendet werden, oder hat wer bessere Vorschläge?
Nur mal so auf die Schnelle zum oberen Code: Ich kann mir nicht vorstellen, dass „gold“ ein Selektor ist und wenn, müsste ein Komma danach stehen. Ich denke aber, dass das ein Relikt von einer Zuweisung background: gold ist. Und damit ein Fehler.
Und damit ein Fehler.
Natürlich ist das ein Fehler, den Code-Schnipsel habe ich mir von .DeJaVu ausgeborgt, beim Einbau und Anpassen ist das dann passiert. Als wenn man Scheuklappen in dem Moment auf hat, ich bin nicht darauf gekommen. Danke, für die Hilfe, der Code funktioniert natürlich noch immer.
der Code funktioniert natürlich noch immer.
Leider habe ich mich da geirrt, denn es erfolgt nicht mehr die gewünschte Anzeige. Nun habe ich den Code für die Button angepasst, wobei der Stern ausgeblendet wird. Der Code funktioniert in allen Fox-Versionen.
/* Button - Inhalt melden - Hintergrundfarbe */
.button[data-tooltip="Inhalt melden"] {
margin-right: -10px !important;
background: orange !important; }
.button[data-tooltip="Inhalt melden"]:hover {
margin-right: -10px !important;
background: greenyellow !important; }
/* Button - Zitieren - Hintergrundfarbe */
.button[data-tooltip="Zitieren"] {
background: lightblue !important; }
.button[data-tooltip="Zitieren"]:hover {
background: greenyellow !important; }
/* Button - Bearbeiten - Farbe */
.jsMessageEditButton{
margin-right: 8px !important;
/* margin-top: 8px !important;
margin-bottom: 8px !important; */
background: wheat !important; }
.jsMessageEditButton:hover{
background: greenyellow !important; }
/* Button - Stern (als hilfsreichste Antwort markieren) - ausblenden */
.icon.icon16.fa-star{
display: none !important; }
Leider habe ich mich da geirrt, denn es erfolgt nicht mehr die gewünschte Anzeige.
Welche Anzeige erfolgt nicht mehr?
Welche Anzeige erfolgt nicht mehr?
Wenn Du so direkt fragst, dann ahne ich Schlimmes.
Für den Button "Zitieren" funktionierte der Code nicht mehr. Wegen Deiner Rückfrage habe ich das nun vorsorglich noch einmal getestet, und siehe da, er wird wieder farblich dargestellt. Frage den Fuchs woran das gelegen hat, ich kann es nicht sagen.
.buttonGroup > li:last-child .button[data-tooltip="Zitieren"],
.messageFooterButtons > li:last-child .button[data-tooltip="Zitieren"],
.messageFooterButtonsExtra > li:last-child .button[data-tooltip="Zitieren"] {
background: lightblue !important; }Edit:
Da ist doch was faul, denn ich habe gerade einen Beitrag geschrieben, dann erscheint ganz rechts der Stern (hilfreiche Antwort), und dann funktioniert auch der Code für "Zitieren" nicht mehr. Das war es, deswegen habe ich in dem neuen Code auch den Stern ausgeblendet.
