CSS Datei für dynamische Breite etc - Wer macht mit?

XimeX · 1. April 2010

Da vielen das neue Design von ComputerBase nicht so zusagt (hauptsächliche die fixe Breite), hab ich mich hingesetztund ein paar CSS Datein erstellt, die das Design abändern!
Ein Danke an die Anderen User die mir ein paar Verbesserungsvorschläge gezeigt haben!

Vorbereitung:

Um eigene CSS Datein einfügen zu könen braucht man entweder Firefox, Opera oder Chrome (+Iron, Chromium,...)!
Hier eine kleine Erklärung zum Einfügen der CSS Datein:

Firefox:
-) Downloaden der Erweiterung Stylish von Mozilla!
-) Unter Add Ons -> Eigene Stile -> Neuen Stil erstellen!
-) Dort die Befehle reinschreiben und speichern!

Opera:
-) Rechte Maustaste -> Seitenspezifische Einstellungen... -> Anzeige -> Eigenes Stylesheet
-) Hier die CSS Datei einfügen!

Chrome (+Iron, Chromium,...):
-) Wie bei Firefox das Stylish Add On von Chrome installieren!

WICHTIG!

Bitte keine Befehle Posten die Werbung blocken!

CSS-Datein:

Im Anhang befinden sich einige (fertige) CSS-Datein:
(Wer seine eigenen CSS-Datein zur Verfügung stellen will einfach posten! Ich stelle sie dann hier rein!)

firefox_css.txt -> Soldier Boy -> für Firefox (Stylish)

Flup · 1. April 2010

Bin grad auf Javascript-Basis dabei, eine zweispaltige Startseite zu erstellen (die erst ab Fensterbreite >1200px zweispaltig wird), ist aber alles andere als einfach...

XimeX · 1. April 2010

ok dann werd ich mal zusammenschreiben welcher css parameter für was zuständig ist! Mal schaun wer noch aller mithilft! CB 5.1 wird von usern gestaltet

Jesterfox · 1. April 2010

Wir könnten ja einen Wettbewerb draus machen: wer hat die schönste User-CSS ;-)

Ich hab mit Dragonfly auch schon ein bisschen rumgespielt und das Ergebnis im anderen Thread gepostet. Mein Ansatz ist halt etwas minimalistischer und baut grundsätzlich ein 2-Spaltiges Layout. Das sieht aber auch bei 1000px Breite noch gut aus finde ich. Ich bin mir nur noch nicht sicher, ob die Blöcke mit den Tesern bei den news immer gleich hoch sind, dann könnte man mit "float" anstelle von "display-block" arbeiten und den Platz neben einer "großen" News besser Nutzen...

Was ich auf jeden Fall auch drin hab ist Fettschrift für die Breadcrumb-Navigation oben im Forum. Damit kann ich endlich wieder die klickbaren Links vom aktuellen Bereich unterscheiden ;-)

Code:

#breadcrumbs li a { text-decoration:underline; font-weight: bold; }

Mr. Snoot · 1. April 2010

Im Thread wurden doch schon ein paar Lösungen gepostet.

Die Startseite und die News- und Artikelübersichten müssen mMn nicht breiter sein, da hier einfach nicht mehr Inhalt ist, der mehr Breite bräuchte. Sonst müsste man alles komplett umstrukturieren.

XimeX · 1. April 2010

@jesterfox
Das hab ich auch noch gesucht

Das ist echt schlimm ohne...

Ich arbeite auch gerade an einem eigenen! Gibts leicht schon einen Sammelthread mit lösungen? Wenn ja wo? Aber ich mein damit jetzt nicht den 1200+ posts thread^^

Ich zb hab auch wieder den schönen Rahmen außen rundeherum hinzugefügt! Das schaut sonst so abgehackt aus:

Code:

div#page { box-shadow: 0px 0px 20px #000000 !important; }

@mr. snoot
ein bisschen breiter schadet nicht! ich mach mir zumindestens die rechte spalte (sidebar div) etwas breiter damit sich jeder download eintrag in einer zeile ausgeht!

Jesterfox · 1. April 2010

Mit dem Schatten wirkt die Seite gleich noch viel cooler... danke ;-)

Die bisherigen Vorschläge sind aber tatsächlich irgendwo in dem Riesen-Thread versteckt.

Das hab ich bisher in der User-CSS:

Code:

#page { width: 90% !important; max-width: 1900px; }
#article-teaser-items { left: 353px; }
ul.plain li { padding:right: 20px; width: 50%; display: inline-block; float:left; }
#article-teaser-pics li { display: list-item; width: 100%; }
#breadcrumbs li a { text-decoration:underline; font-weight: bold; }
div#page { box-shadow: 0px 0px 20px #000000 !important; }

Ich hab mal auf "float" für die 2 Spalten umgestellt... klappt eigentlich ganz gut.

XimeX · 1. April 2010

mit dem bekommt man eine schöne breite sidebar zusammen! ich find die größe wäre perfekt!

Code:

div#main {
	width: 94% !important; /* Main Bereich %-tuel verkleinern (wird aber insgesamt trotzdem größer) um für Sidebar Platz zu schaffen! */
}

div#sidebar {
	margin-left: 0px !important; /* Ausrichtung */
	width: 350px !important; /*Sidebar Breite */
}

Mein gesamter code:

Code:

div#page {
	width: auto !important; /* Für dynamische Seitenbreite; Hier kann man auch seine EIGENE gewünschte FESTE Seitenbreite eintragen! */
	min-width: 950px !important; /* Mindestbreite laut CB; Für Smartphones etc könnte man sie kleiner machen! */
	max-width: 1200px !important; /* Max Seitenbreite: Max gewünschte Seitenbreite eingeben oder 100% für durchgehende max Fensterausfüllung! */
	box-shadow: 0px 0px 20px #000000 !important;
}

div#article-teaser {
	width: 605px !important; /* Damit der Teaser seine Originalgröße beibehält! */
}

div#main {
	width: 94% !important; /* Main Bereich %-tuel verkleinern (wird aber insgesamt trotzdem größer) um für Sidebar Platz zu schaffen! */
}

div#sidebar {
	margin-left: 0px !important; /* Ausrichtung */
	width: 350px !important; /*Sidebar Breite */
}

#breadcrumbs li a {
	text-decoration:underline !important; /* Pfadangabe im Forum unterstreichen */
	font-weight: bold !important; /* Pfadangabe im Forum fett darstellen */
}

an.ONE · 1. April 2010

Hm, werde ich mir auch mal ansehen

Bisher fand ich die Version von Falcon ganz in Ordnung:

Aber mal schauen, was ihr da bisher fabriziert habt

Mr. Snoot · 1. April 2010

@ Soldier Boy: hast recht, etwas breiter sieht sehr gut aus, werd das mal bei mir so übernehmen.

XimeX · 1. April 2010

hat noch jemand etwas zum blocken für die intellitxt?
Bitte nur per PN schicken!

Edit: code für werbung entfernen hab ich wieder entfernt! Will ja nicht das mein ach so geliebtes CB pleite geht!

Im anhang mal ein Screen von meiner ausführung zum besseren vorstellen (hier mit add blocker der in obiger ausführung rausgenommen wurde):

Mr. Snoot · 1. April 2010

Intellitxt wird in 3 Monaten sowieso abgeschaltet. Evtl. geht's aber auch noch über diese Seite: https://www.computerbase.de/impressum/intellitxt/

sudfaisl · 1. April 2010

Wie bindet man so eine CSS-Datei bei Firefox bzw. Opera ein?

Der TE hat mir für FF schon den Tipp gegeben das AddOn "Web Developer Toolbar" zu benutzen, wenn ich dort cb aber eine CSS-Datei zuweise hält das nur so lange, bis ich die Seite refreshe oder was anklicke.

Hat jemand nen besseren Vorschlag für FF oder notfalls einen für Opera?

Basti87 · 1. April 2010

Bei Opera musst du in die seitenspezifischen Einstellungen gehen, dort bei Anzeige dann unten den neuen Stylesheet auswählen,

XimeX · 1. April 2010

Opera ganz einfach: rechte maustaste->seitenspezifische einstellungen->Anzeige->Eigenes Stylesheet
Dort einfach nach der .css datei suchen und einfügen!

sudfaisl · 1. April 2010

Danke euch beiden. So sieht cb auf jeden Fall brauchbarer aus!
Auch die Artikel sind komfortabler zu lesen. Danke!

Dann werd ich jetzt wohl Opera für cb nutzen (müssen).

an.ONE · 1. April 2010

Das ganze kannste mit FF auch einfach nutzen:

C:\Users\User\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxxxx.default\chrome

Hier einfach eine "userContent.css" erstelllen, Code rein und fertig.

Grantig · 1. April 2010

@sudfaisl
Geht im FF auch ganz einfach per Addon: Stylish

@Soldier Boy
Danke!
Ich benutz deinen Code und jetzt schaut die Hauptseite um einiges besser aus.

dani.boese · 1. April 2010

Ich habe mir was mit "Stylish" gebastelt.
Hierbei hat es die Besonderheit, dass die Werbung noch komplett mit geladen und auch angezeigt wird, nur nicht innerhalb des sichtbaren Bereichs, sondern über der eigentlichen Seite

Startseite leicht breiter, News und Artikel sowie das Forum in voller Größe.
Auch bei der Bildergalerie ist jetzt wieder Platz.

Quasi sind alle Seiten Dynamisch bis auf die Startseite (gefällt mir so besser), kann aber auch komplett dynamisch sein

Zum Thema Werbung: So ein Art "Spendenkonto" für CB würde ich begrüßen

sudfaisl · 1. April 2010

Die Einführung eines Spendenkontos wird aus mir schleierhaften Gründen kategorisch abgelehnt, so wie ich das verstehe. Es wäre 1. eine zu unsichere Einnahmequelle (na immerhin noch was nebenbei ...) dann wäre 2. das Problem, dass die Nutzer keine Gegenleistung im materiellen Sinne bekommen und wenns als Spende gälte, fehlte der Spendenbeleg.

Solche Begründungen halt. Wäre auch für einen Donate-Button

CSS Datei für dynamische Breite etc - Wer macht mit?

Lt. Commander

Anhänge

Flup

Gast

Lt. Commander

Legende

Mr. Snoot

Gast

Lt. Commander

Legende

Lt. Commander

Captain Pro

Mr. Snoot

Gast

Lt. Commander

Anhänge

Mr. Snoot

Gast

Admin

Basti87

Gast

Lt. Commander

Admin

Captain Pro

Captain

Commander

Admin

Passend zum Thema