Neues Theme fürs Forum

Autor

Beitrag

zuglufttier
Inventar

#1 erstellt: 12. Aug 2014, 23:08

Ahoi,

ich habe auch mal wieder ein bisschen mit CSS rumgespielt... Wer möchte, kann sich das ja mal angucken. Vielleicht mache ich das mal weiter, allerdings ist es ein bisschen schwierig, weil doch relativ sparsam mit CSS Klassen und IDs umgegangen wurde

Anbei mal der Code, der unter anderem mit Stylish (

https://userstyles.org/styles/104310/hifi-forum-in-anders) oder dergleichen benutzt werden kann. Ich empfehle dringend die Fonts zu benutzen, dich ich da angebe! So sieht's bei mir dann aus:

https://df6a.https.c...ots/104310_after.png

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
@import url(http://fonts.googleapis.com/css?family=Average+Sans);

@-moz-document domain(hifi-forum.de) {

* {
border: none !important;
}

b {
font-weight: 400;
}

br {
line-height: 1
}

html, body, table, tr, td, a, textarea, input {
font-family: 'Open Sans' !important;
font-weight: 300;
font-size: 100% !important;
font-size: 0.95rem !important;
}

#main {
background: #333 !important;
}

#header-left #q {
background: transparent !important;
}

#header-left #form-search {
width: auto;
height: auto;
}

#header-left .submit {
background-color: #009AD3 !important;
font-weight: bold !important;
padding: 0.3rem !important;
height: auto;
width: auto
}

.tab-menu > li, .tab-menu > li.active {
margin-top: 0;
height: 1.6em !important;
vertical-align: middle;
padding: 0.2rem !important;
}

td.kat .thnorm, td.kat .navbar {
color: #333 !important;
}

tr.desc th, .thsmall, tr.header, tr.desc td {
background-color: #009AD3 !important;
font-weight: bold !important;
}

tr.desc th a, tr.desc th {
color: #fff !important;
font-size: 1rem
}

h3 a {
color: #333 !important;
font-weight: bold
}

.main-table-row.even, tr.odd td {
background-color: #e8e8e8 !important;
}

.main-table-row.odd, tr.even td {
background-color: #fff !important;
}

.topicButton {
color: #fff !important;
}

.topicButton:hover {

}

.button {
color: #333 !important;
border: 1px solid #ddd !important;
}

.button:hover {
cursor: pointer !important;
}

input {
font-weight: normal;
padding: 0.3rem;
background-color: #eee !important;
}

input.button {
background: none;
height: auto;
width: auto !important;
}

select {
font-weight: normal;
padding: 0.5rem;
background-color: #eee;
border: 1px solid #ddd !important;
}

.kat, a.font-switch {
color: #fff !important;
background-color: transparent!important;
}

.kat {
color: #333 !important;
font-size: 1.2rem !important;
}

.posting-row table {
width: 100%;
}

.reply-actions, .reply-actions a, .td1 .postButton, .td2 .postButton {
font-size: 0.8rem !important;
}

textarea {
font-family: monospace !important;
border: 1px solid rgba(0,0,0,0.1) !important;
}

#p_title {
border: 1px solid rgba(0,0,0,0.1) !important;
background: #fff !important;
}

input[type=submit] {
cursor: pointer;
border: 1px solid rgba(0,0,0,0.05) !important;
}

span.norm, span.quote {
display: block !important;
}

.posting-text, .quote {
line-height: 1.625em !important;
font-size: 1rem !important;
color: #000 !important;
font-family: 'Average Sans';
}

.td1 p, .td2 p, .td1, .td2 {
font-family: 'Average Sans' !important;
font-size: 1rem;
}

.posting-text table {
background-color: transparent !important;
}

.td1, .td2 {
font-size: 0.8rem !important;
}

.td1 a, .td2 a {
font-family: 'Average Sans' !important;
}

.td1 table, .td2 table {
background-color: transparent !important;
}

.quote {
font-style: italic;
background-color: rgba(0,0,0,0.025);
color: #444 !important;
border-radius: 1rem;
padding: 1rem;
margin-left: 1rem
}

.quote:before {
content: "„"
}

.postButton.quote:before {
content: ""
}

.postButton.quote:after {
content: ""
}

.quote:after {
content: "“"
}

.postButton.quote {
margin: 0
}

.td1 {
background-color: rgba(0,0,0,0.03) !important;
}

a, .postButton.quote {
text-decoration: none;
color: #215D82;
font-weight: normal;
font-style: normal;
background-color: transparent
}
.tab-menu > li > a {
padding: 0 !important;
padding-left: 10px !important;
padding-right: 10px !important;
}

.tab-menu > li > a > span {
vertical-align: initial;
font-size: initial;
}

a:hover {
background-color: transparent;
color: #174460 !important;
text-decoration: underline !important;
}

a.topiclink, a.norm, span.userlink a {
text-decoration: none;
color: #215D82;
font-weight: normal;
}

a.norm {
}

a.topiclink {
font-style: italic
}
}

[Beitrag von zuglufttier am 13. Aug 2014, 12:39 bearbeitet]

Hüb'
Moderator

#2 erstellt: 13. Aug 2014, 08:45

Hi,

das Bild/der Screenshot, den Du verlinkst, wird bei mir leider nicht angezeigt.

Grüße
Frank

zuglufttier
Inventar

#3 erstellt: 13. Aug 2014, 12:39

Sollte nun gehen...

Igelfrau
Inventar

#4 erstellt: 13. Aug 2014, 16:57

Ich mag Tomaten auf den Augen haben, aber was ist da nun so neu daran, dass du dir die viele Arbeit gemacht hast?

Das sieht ziemlich ähnlich zu meinem bevorzugten "Retro Blau" aus, das in den Einstellungen bereits wählbar ist.

zuglufttier
Inventar

#5 erstellt: 13. Aug 2014, 17:07

Es sind schöne Schriftarten da und es sind ca. 5.000 Ränder verschwunden, die einfach unnötig sind. Ein riesiger Unterschied ist es nicht, das stimmt.

Weiterhin sind fast alle Unterstreichungen weg, die sonst das Auge stören. Sie sind nun farblich abgesetzt, was für einen konsistenteren Eindruck sorgt. Wenn alles unterstrichen ist, dazu noch die ganzen schwarzen Ränder, ist kein Fokus mehr auf das Wesentliche da, weil irgendwie alles wichtig sein soll.

Nun gibt es nur zwei Grautöne, die die einzelnen Posts voneinander unterscheiden. Links sind blau und fertig. Auch sehen die Zitate nun ein bisschen hübscher aus. Sie sind außerdem schwächer vom Kontrast her, da die eigentliche Nachricht im Vordergrund steht.

Die restlichen Ränder können wegfallen, da die Bereichen schon durch räumliche Trennung von einander zu unterscheiden sind.

[Beitrag von zuglufttier am 13. Aug 2014, 17:12 bearbeitet]

Igelfrau
Inventar

#6 erstellt: 13. Aug 2014, 17:29

Besten Dank für deine Erläuterungen.