CSS Manipulation (ausgelagert aus Upgrade von XenForo)

GiveThatLink

Bekanntes Mitglied
Hat was :)

So bisschen Polishing
Code:
.avatar.avatar--s,
.avatar.avatar--xs
{
    border: none !important;
}

.structItem--thread:nth-child(odd),
tr.dataList-row:nth-child(odd),
.fr-box.fr-basic .fr-wrapper
{
    background:#eee !important;
}

h4.block-textHeader:first-child
{
    background: #d1d7ff !Important;
    position: relative !important;
    left: -11px !important;
    width: 101% !important;
    padding-left: 12px !important;
    font-weight: 600 !important;
}
 
Zuletzt bearbeitet:

GiveThatLink

Bekanntes Mitglied
Welche Farbe solls denn sein? Mit oder ohne Tupfen? :D
Code:
/* Oben */
.bbCodeBlock-title
{
    background: #dbe0ff !important;
}

/* Unten */
.bbCodeBlock
{
    background: #d1d7ff !important;
}

/* selected text in the box */
.fr-wrapper ::selection
{
    background: #ffc700 !important;
    color: #0a0a0a !important;
}
 

GiveThatLink

Bekanntes Mitglied
Wäre es möglich, dass sich einige Mitglieder mal an Fliesstext gewöhnen könnten?:icon_tsts:

Falls jemand das Forum auf eine bestimmte Breite haben will, weil Bildschirm zu klein oder oder
Code:
.p-nav-opposite
{
    margin-left: 0 !important;
}

.p-navgroup--member .p-navgroup-linkText,
.p-navgroup-link--logout .p-navgroup-linkText,
.p-navgroup-link--search .p-navgroup-linkText,
.p-body-sidebar
{
    display: none !important;
}

.p-body-main--withSidebar .p-body-content
{
    padding-right: 0 !important;
}

.p-body
{
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 10px !important;
}


.p-body,
.p-pageWrapper,
.p-navSticky,
.p-sectionLinks-inner
{
    min-width: 960px !important;
    max-width: 960px !important;
    margin: 0 auto !important;
}

.cccb-margins
{
    margin: 0 !important;
    padding: 0 !important;
}

.p-nav-list:before,
.p-nav-list:after
{
    display: inline-block;
    width: 0 !important;
    content: none !important;
}

.p-nav-opposite
{
    margin-right: 0 !important;
}
min/max in Pixel anzugeben! Inhalt zentriert.

Das andere sind Teiloptimierungen, wo oben rechts die Texte wegfallen und die Symbole bleiben, oder die Forenleiste mit auf Breite formatiert wird. Kann jeder für sich halten wien Dachdecker.

CODE-Box mit CourierNew und Farbe
Code:
/* code blocks */

.bbCodeBlock-title
{
    color: #b00 !important;
    font-weight: 600 !important;
}

.CodeMirror-scroll
{
    background: #eee !important;
}

.bbCodeBlock--code,
code, kbd, pre, samp
{
    font-family: Consolas !important;
    background: #eee !important;
    font-size: 1.05em !important;
    line-height: initial !important;
}

.bbCodeBlock,
.bbCodeBlock-title,
.bbCodeBlock-content
{
    font-size: 14px !important;
}

.CodeMirror-linenumber
{
    color: red !important;
}
#1 Korrektur zu ".bbCodeBlock--code" statt ".bbCodeBlock"
#2 CODE Anpassung auf Consolas und 1.05em
 
Zuletzt bearbeitet:

GiveThatLink

Bekanntes Mitglied
Ich verstehe nicht, was es dir bringt, wenn du immer wieder Teile des generierten css postest.
Meinst du damit mich? Worin besteht dein Verständnisproblem? Kontext? Wurde gegeben. Wohin damit? Stylus, oder in Firefox mit entsprechendem Deckmantel
Code:
@-moz-document  url-prefix(...)
{
...
}
Wobei ich Stylus den Vorzug gebe, weil es sofort aktiv ist. Und in jedem Browser nutzbar, userChrome.css geht nur in Firefox.

Ausserdem ist es nicht generiert, sondern hand-bearbeitet, somit sorgfältig recherchiert.
 

GiveThatLink

Bekanntes Mitglied
Das kann ich auch, aber das wars auch schon. Aber tot ist tot und das sollte man auch respektieren. Und der Rest ist damit auch gestorben.
 

dr_tommi

alter Oldie
Das kann ich auch, aber das wars auch schon. Aber tot ist tot und das sollte man auch respektieren. Und der Rest ist damit auch gestorben.
Deine letzten Äußerungen waren etwas wirr. Von Kontext und Zusammenhang kam nichts rüber.
Aber wenn ich deine Codeschnipsel richtig interpretiere zeigst du Interessierten wie sie mit Zusatztools ein Aussehen von Teilen des Boardes hinbekommen könnten, damit es so aussieht wie du es willst.
Warum sollte z.B. ich das machen?
Wenn es einen Wunsch für eine Änderung des Designs für alle geben sollte, kann man das doch als Vorschlag einbringen.
Wenn du allerdings nur mal darstellen wolltest dass man mit Tools im lokalen Browser auch das Aussehen ändern kann, dann könnte man das auch in einem separaten Thread machen.
Vielleicht gibt es weitere Interessenten.
 

chaospir8

★★★★★-Oldie
hmm. Zwar denke ich, dass ich @GiveThatLink verstehe: Er hat, wenn ich das richtig sah, auf die Design-Wünsche mancher Boardies (und sich selbst) mit angepassten CSS reagiert.
Man kann diese mit "Hilfsmitteln" auf jeweiligem Client nutzen, so dass das Board dann dem Wunsch entsprechend aussieht ... oder es kann auf dem Server eingebaut werden.
Nur, was @ibinsfei meint, dass diese CSS nicht einfach so auf dem Server liegt, sondern generiert wird zur Laufzeit aus mehreren Dateien und weiteren Einstellungen der Boardsoft.
So viel zum Technischen.

Was ich aber nicht verstehe, sind die Anspielungen auf unser ehemaliges Boardmitglied Brummelchen.
Ist Brummelchen tot (als Person) oder meint jemand, dass @GiveThatLink unser Brummbär im neuen Pelz ist?
Oder interprätiere ich etwas hinein? Falls ja, dann igonoriert diesen zweiten Passus meines Beitrags bitte! 🤪
 

GiveThatLink

Bekanntes Mitglied
Dann mag ich das erweitern. Ich habe Spass daran, mir Seiten so zurecht zu biegen, wie ich sie gerne hätte. Und ich gebe das auch gerne weiter. Wie neulich jemand hier gefragt hat, wie man den Hintergrund vom Zitat einfärben kann. "Weil ich es kann" :)

Wenn sich der Style vom Forum ändern sollte, dann ändert sich hier auch der Code. Aber ich habe nichts dagegen, wenn du solche Beiträge in einen Sammelbeitrag ab trennen möchtest.

Bislang kenne ich vbb, wbb, xenforo bedingt. Bislang gefällt mir das neue Xenforo, es ist anders, aber mit woltlab ebenbürtig. DIe Farbgestalung ist wie gehabt.

Was mir vorhin aufgefallen ist, dass die cc-cb-Weiterleitung wohl nicht aktiv ist. Allerdings ist mir die recht egal, weil ich das eh umgehe und dann ist auch der Referer komplett aussen vor.

"geben und nehmen", "teile und herrsche". :icon_funny:
 

GiveThatLink

Bekanntes Mitglied
In eniem anderen XenForo 2-basierten Forum
Vielleicht nutzen die eine andere Sprachdatei?

@jr33 - #4 für den Editor
".fr-wrapper ::selection"

äh, falls das nicht ausreichend gewesen sein sollte: Da ich etliche Forensoftware kenne und auch die ganz alten, die im direkten Vergleich zu heute echter Krampf teils waren. Moderne Forensoftware berücksichtig etliches, auch eine mobile Ansicht ohne verkrüppelt zu sein. Deswegen nochmal ausdrücklich:
:icon_prost:
 

GiveThatLink

Bekanntes Mitglied
Das ist wohl richtig, aber auch gewollt. Da jr33 jetzt kein spezifisches Forum genannt hat, kann ich auch nur so antworten. Und so weit wie ich das verstanden habe, geht es wohl um markieren Text im Editor, nicht anderweitig, denn anderweitig wird vom Browser und/oder Betriebssystem gesteuert. Ich kann seinen Wunsch sogar nachvollziehen, weil gerade hier, wo ich schreibe, der Hintergrund auf #d9d9df steht und die Farbe für markierten Text auf #EEEEF1
Das ist ganz helles Grau auf dunklerem Grau und da hat er Erkennungsprobleme. Und deswegen der Code, den ich auch nutze, weil es einfach sichtbarer ist.

Du musst es nicht zwingend kritisieren, weil du es nicht nachvollziehen kannst. Für manche ist das hilfreich. Wenn ich für mich das komplette Forum umstylen täte, dann könntest du mir evtl nen Vogel zeigen, nur würde ich damit nicht hausieren gehen, sondern allenfalls wie hier Ausschnitte anbieten, überwiegend auf Nachfrage.

Und wen es nicht interessiert, muss ja nicht reinklicken.

Nochmal wegen CODE oben. Es hat viele Vorteile, diversen Code in nichtproportionaler Schriftart darzustellen, um zB eine 0 von einem O oder I und l zu unterscheiden, oder Leerzeichen, die beim Abtippen geschlabbert werden.

Es gibt seit geraumer Zeit auch etliche stilistische Hilfsmittel, um zB durchgestrichenen Text deutlicher hervorzuheben.

non-strike strike
Code:
s
{
    text-decoration-color: #e80000 !important;
    font-style: italic !important;
    text-decoration-thickness: 3px !important;
}
(Hinweis: Chrome kann kein -thickness)
 
Zuletzt bearbeitet:

ibinsfei

Team (Technik) - BOFH
Mitarbeiter
Du musst es nicht zwingend kritisieren, weil du es nicht nachvollziehen kannst.
Das lag daran, dass du wirr CSS-Schnipsel gepostet hast, ohne dass ein Zusammenhang erkennbar wurde. Erst relativ spät hast du zu erkennen gegeben, dass du die CSS mittels eines Tools manipulierst.
Wenn ich für mich das komplette Forum umstylen täte,
Damit hättest du ein grösseres Problem, weil eben das CSS generiert ist und du scheitern würdest, wenn du die Unterschiede in verschiedenen Bereichen halbwegs beibehalten wolltest (z.B. verschiedene Farben in verschiedenen Foren etc.).
Nochmal wegen CODE oben. Es hat viele Vorteile, diversen Code in nichtproportionaler Schriftart darzustellen, um zB eine 0 von einem O oder I und l zu unterscheiden, oder Leerzeichen, die beim Abtippen geschlabbert werden.
Genau dies macht das CODE-Element.
 

GiveThatLink

Bekanntes Mitglied
verschiedene Bereiche
Der Aufwand wäre höher, aber nicht unmöglich. Aber egal, darum gehts ja nicht.

Das mit dem CODE-Block, das ist aber nicht auf Anhieb zu erkennen - du hast aber recht, es ist ist nichtproportional
font-family: Monaco,Menlo,Consolas,'Roboto Mono','Andale Mono','Ubuntu Mono',monospace;

Seh grad, hier wird Consolas angewendet, woher das immer kommen mag in oder mit Windows. Danke für den Hinweis/Brainstorming, dann hätte ich das gerne nur ein px größer, wenn machbar, 14px statt 1em, alternativ 1.05em.
 

ibinsfei

Team (Technik) - BOFH
Mitarbeiter
Der Aufwand wäre höher, aber nicht unmöglich.
Da du nicht unbedingt erkennen kannst, wo du bist, wäre es bei verschiedenen Farben unmöglich.
Seh grad, hier wird Consolas angewendet, woher das immer kommen mag in oder mit Windows. Danke für den Hinweis/Brainstorming, dann hätte ich das gerne nur ein px größer, wenn machbar, 14px statt 1em, alternativ 1.05em.
Ich habe ihn mal auf 15px gesetzt, das sollte passen.
 

GiveThatLink

Bekanntes Mitglied
Für @FeelDr77
Code:
/* mobile tweak */

@media (max-width:650px){
   
    .structItem-cell.structItem-cell--meta .structItem-minor,
    .structItem-pageJump,
    .structItem-extraInfoMinor,
    .pairs.pairs--justified,
    .structItem-cell.structItem-cell--latest,
    .pairs.pairs--justified::before,
    .pairs.pairs--justified::after,
    .structItem-cell.structItem-cell--latest::before
    {
        display: inline !important;
    }

    .structItem-cell.structItem-cell--latest::before
    {
        content: none !important;
    }
    .structItem-cell.structItem-cell--latest
    {
        margin-left: 3px !important;
    }

    .pairs.pairs--justified::after,
    .structItem-cell.structItem-cell--latest
    {
        content: " | " !important;
    }

    .structItem-pageJump
    {
        margin-left: 0 !important;
        font-size: 16px !important;
    }
    .structItem-pageJump a
    {
        padding: 0 6px !important;
    }
}
Für Firefox wird Stylus benötigt.
 

vinyl

♫ ♪ ♫ ♪ ♪
man sollte zumindest festhalten, dass mann @GiveThatLink bei css fragestellungen zukünftig zu rate ziehen könnte.
 
Zuletzt bearbeitet:
Oben Unten