Allgemeine Fragen und Antworten zum persönlichen Seitenlayout und dem Einsatz von CSS + SASS

Hier kannst Du Vorschläge für Grafikänderungen sowie alternative Layouts machen.

Allgemeine Fragen und Antworten zum persönlichen Seitenlayout und dem Einsatz von CSS + SASS

- 1
- 2
- 3
- 4
- 5
Seite 3 von 12

NatsukiMiwaV.I.P.

05. Apr 2016

hat geklappt x3 danke dir vielmals!

martin m²

05. Apr 2016

Ich muss euch wieder einmal nerven

Und zwar hab ich mir jetzt überlegt dass ich mir ein transparentes Hintergrund bild einbaue plus Farbverlauf hiter dem Hintergrund. Das PROBLEM: Im CSS Editor der WebDeveloper Toolbar meines Firefox funktioniert der Code einwandfrei nur hier auf der Seite direkt nicht.

Ich Rätsle gerade worans liegt

CODE:

CSS #content/*Inhalt*/ {

/*Hintergrund*/background: /*#00FFF9 /*Farbcode*/ url('http://cdn.anisearch.de/images/member/upload/38/38366/images/ChocolaandVanillaMATEStripes%281680x1050%29.png')/*Grafik mit %20 als Leerzeichen*/, linear-gradient(180deg, #22FF00, #2AD4C7) repeat /*wiederholung Ja/Nein*/ fixed /*fest, wenn nein löschen oder auskommentieren*/ center /*zentriert, wenn nein löschen oder auskommentieren*/ top /*position, z.B. oben (top)*/;
}

Info der Text der /*so*/ Aussieht ist Auskommentiert, d.h. das sind meine Eigenen Kommentare.

LG und Danke schon mal im Voraus

Beitrag wurde zuletzt am 05.04.2016 20:21 geändert.

クロキューV.I.P.

05. Apr 2016

Also Kommentieren ist 'ne tolle Sache, sollte man auch immer beherzigen, aber bei deinem Beispiel muss ich mal sagen, dass das too much bzw. auch ziemlich unübersichtlich ist, wenn du Kommentare dazwischen hast; da solltest du vielleicht besser formatieren, willst du so viele Kommentare drin behalten.

#content {
background:
     #00FFF9 /* la la */
     url(bla) /* la la */
     ,linear-gradient(...) /* la la */
     repeat
     fixed
     center
     top;
}

Sieht so sauberer aus und man kann besser Fehlersuchen.

Ohne das jetzt auszuprobieren, möchte ich mal auf ein paar Sachen hinweisen:
Deine Farbe oben ist auskommentiert, denn /* deine farbe /* => /* ist Anfang eines Kommentars, sprich es fehlt dir ein */ nach deiner Farbe.

#content/*Inhalt*/ {

/*Hintergrund*/background: #00FFF9 /*Farbcode*/ url('http://cdn.anisearch.de/images/member/upload/38/38366/images/ChocolaandVanillaMATEStripes%281680x1050%29.png')/*Grafik mit %20 als Leerzeichen*/, linear-gradient(180deg, #22FF00, #2AD4C7) repeat /*wiederholung Ja/Nein*/ fixed /*fest, wenn nein löschen oder auskommentieren*/ center /*zentriert, wenn nein löschen oder auskommentieren*/ top /*position, z.B. oben (top)*/;
} => Das könnte es also "fixen".

Beitrag wurde zuletzt am 05.04.2016 21:36 geändert.

martin m²

05. Apr 2016

Ich weis ab wo es klemmt aber nicht wie ich es lösen kann.

CSS ... url('http://cdn.anisearch.de/images/member/upload/38/38366/images/ChocolaandVanillaMATEStripes%281680x1050%29.png') /*Grafik mit %20 als Leerzeichen*/, linear-gradient(180deg, #22FF00, #2AD4C7) ...

hier aus dem CSS tool der Web Developer Toolbar

Web-Developer-Tolbar CSS... url("images/member/upload/38/38366/images/ChocolaandVanillaMATEStripes%281680x1050%29.png%29,linear-gradient%28180deg,#2f0,%232ad4c7") ...

vielleicht ist hier die lösung versteckt denn wenn ich meinen code in die mein installiertes tool einfüge klappts, wenn er von der seite abruft klappts nicht. Ausserdem habe ich die Farbe erstmal absichtlich rausgenommen damit ich sehe obs klappt und der code für den Farbverlauf habe ich aus dem internet nur die farbwerte und die Grad-Zahl hab ich verändert.

LG

SkyFiefV.I.P.

05. Apr 2016

klose91 Also Kommentieren ist 'ne tolle Sache, sollte man auch immer beherzigen, aber bei deinem Beispiel muss ich mal sagen, dass das too much bzw. auch ziemlich unübersichtlich ist, wenn du Kommentare dazwischen hast; da solltest du vielleicht besser formatieren, willst du so viele Kommentare drin behalten.

Da kann ich dir nur zustimmen.

Aber die Funktion „linear-gradient“ an sich, ist glaube ich zurzeit nicht möglich.

martin m²

05. Apr 2016

Mein webbrowser kann den befehl schon aber er bekommt den CSS Text verkehrt geschickt wenn ich das nochmal richtig ansehe ich habs vorerst mal Auskommentiert.

LG und Danke für die Zeit und Mühe

VendelAdmin

06. Apr 2016 – Themenstarter

Wie SkyFief schon richtig anmerkte, wird leider "linear-gradient" vom Filter bisher nicht unterstützt und der Eintrag somit in die CSS-Datei nicht übernommen.

Yukki

18. Apr 2016

Kennt hier Jemand den Code um die Farbe vom Spoiler zu ändern?
Border und Hover habe ich schon.

xShadowLightV.I.P.

18. Apr 2016

.spoiler {
background: #Farbe;
}

Ein Farbverlauf, so wie es jetzt im Standarddesign ist, geht glaube ich nicht, da linear-gradient rausgefiltert wird.

Kommentare (1)

Zeige alle Kommentare

martin m²

18. Apr 2016

So ich schmeiss mal wieder mit CSS-Code um mich ;)

Und diesmal nicht weil ich hilfe brauch sondern nur zum Ideen Austausch

Ich hab mal ein eigenes Desing gemacht.

Wer es testen will für den hau ich einfach mal meinen CSS als Spoiler rein.

text/css #content {

background: #00FFF9;
background-image: url('http://cdn.anisearch.de/images/member/upload/38/38366/images/ChocolaandVanillaMATEStripes%281680x1050%29.png'), /*linear-gradient(180deg, #22FF00, #2AD4C7) // Farberlauf,Auskommentiert da derzeit nicht möglich */;
background-attachment: fixed;
background-position: center top;
background-size: 1920 1080;
}
#logo {
background: url('http://cdn.anisearch.de/images/member/upload/38/38366/images/aniSearchWestminster.png');
}
#header::before {
background: url('http://cdn.anisearch.de/images/member/upload/38/38366/images/NekoparaSteamheadercentered.jpg') center;
}
#top {
color: #FF0000;
}
#mainnav {
background-color: rgba(251, 8, 8, 0.5);
}
#start #details-subs {
background-color: rgb(251, 8, 8);
}
#start #details-subsB {
background-color: #ff3f00;
}
#details-right > section > h2 {
background-color: #FF0000;
}
#footer {
border-top-color: #FF0000;
background: rgba(251, 8, 8, 0.5);
}

Diesmal sind keine Kommentare mehr enthalten da es sonst für mich und Andere unübersichtlich wird. Nur eine nicht verfügbare funktion ist als kommentar enthalten.

NatsukiMiwaV.I.P.

10. Mai 2016

bei mir will wieder etwas nicht, bzw die farbe nimmt es nicht an, obwohl es im code schon drin ist...nämlich im postfach: der balken "absender", wenn du jemandes nachricht liest, ist bei mir braun statt blau -.-" kann mir jmd helfen und sich mal bitte meinen css code durchgucken? ^^" möchte es gerne wie vorher haben bzw möchte, dass mein code das annimmt was ich da angegeben habe xD

wäre dieser hier:

#logo{ /*aniSearch Logo*/
background-image: url("http://puu.sh/mly5m/5e6b85c49e.png");
}
#topnav>li:first-child>a {
background-color: transparent;
}
#header:before{ /*Header*/
background-image: url("http://img5.fotos-hochladen.net/uploads/4208112smalls6zgk3w91pb.jpg ");
opacity: 1;
}
#header{ /*Abschlusstrich des Headers*/
border-bottom: 2px solid #00ffff;
}
#content {
background-image: url(http://img5.fotos-hochladen.net/uploads/takingphotoscndik79sg23.jpg);
background-attachment: fixed;
}

a { /*Globale Linkfarbe*/
color: rgb(72, 154, 255);
}
#avatar.hover { /*Avatar Hover*/
box-shadow: -1px -1px 0px 0px #58d8ec,1px -1px 0px 0px #58d8ec,1px 1px 0px 0px #58d8ec,-1px 1px 0px 0px #58d8ec;
}
#avatar .menuitem { /*Avatar Hoverfenster*/
background-color: rgb(7,232,210)!important;
outline: 1px solid rgb(7,232,210)!important;
}
#avatar .menuitem>li:hover { /*Avatar Hoverfenster Menüpunkte Hover*/
background-color: #03c6b5 ;
}
#avatar .logout { /*Logout*/
background-color: rgba(114, 209, 232);
}
#usercp.hover { /*UserCP Hover*/
background-color: #58d8ec;
box-shadow: -1px -1px 0px 0px #58d8ec,1px -1px 0px 0px #41A8E9,1px 1px 0px 0px #58d8ec,-1px 1px 0px 0px #1960dc;
}
#usercp.hover .menuitem { /*UserCP Hoverfenster*/
background-color: #58d8ec;
outline: 1px solid #58d8ec;
}
#usercp .menuitem>li:hover { /*UserCP Hoverfenster Menüpunkte Hover*/
background-color: #1A71AF;
}
.menuitem>li span { /*Menüpunkte Schrift*/
color: #FFFFFF;
}
#mainnav{ /*Navigationsleiste*/
background-color: rgba(0, 255, 255, 0.0);
}
#mainnav .menu>li.active { /*Navigationsleiste aktiv*/
background-color: rgba(0, 229, 238, 0.7);
}
#mainnav .menu>li.hover { /*Navigationleiste Hover*/
background-color: rgba(0, 255, 255, 0.75);
box-shadow: -1px -1px 0px 0px #00ffff,1px -1px 0px 0px #00ffff,1px 1px 0px 0px #00ffff,-1px 1px 0px 0px #00ffff;
}
#mainnav .menu>li.hover .menuitem { /*Navigationsleiste Hoverfenster*/
background-color: rgba(135,206,250,1);
box-shadow: -1px -1px 0px 0px #00ffff,1px -1px 0px 0px #00ffff,1px 1px 0px 0px #00ffff,-1px 1px 0px 0px #00ffff;
}
#mainnav .menu>li .menuitem>li:hover { /*Navigationsleiste Hoverfenster Menüpunkte Hover*/
background-color: rgba(135,206,250,1);
}
#mainnav .menu>li .menuitem>li:hover span { /*Navigationsleiste Hoverfenster Menüpunkte Hover Textfarbe*/
color: #000;
}
#searchbox { /*Suchleiste*/
background-color: #1A71AF;
border-bottom: 2px solid #62B8EE;
}
#searchbox #searchbar { /*Suchfeld*/
border: 2px solid #85BBDD;
}
#searchbox #searchbar>li:last-child:before { /*Die Pfeile da*/
color: #85BBDD;
}
#start { /*Rand*/
border: 1px solid #62B8EE;
}
#start #details-subs, #start #details-subsB { /*Tabs*/
background-color: #62B8EE;
}
#start #details-subs>li>a, #start #details-subsB>li>a { /*Tabs Rand*/
border: none;
}
#details-outer #details-inner>section>h2 { /*Überschriftenleiste*/
background-color: #62B8EE;
border-top: 3px solid #6A85A9;
color: #FFFFFF;
}
#details-outer #details-inner>section.empty>h2 { /*Überschriftenleiste leer*/
color: rgb(68, 68, 68);
}
#details-outer #details-inner>section>h2>a { /*Überschriftenleiste Links*/
color: #FFF;
}
#details-outer #details-inner>section.accordion>h2:after {
background-color: #6A85A9;
}
#details-right>section>h2{ /*Boxen rechts Überschrift*/
background-color: #4876ff;
}
#details-right>section { /*Boxen rechts*/
background-color:rgba(255,255,255,0.4);
border: 1px solid #62B8EE;
}
@media (min-width: 900px) /*Index Links*/
.responsive-table tbody th[scope="row"]>a {
color: #489AFF;
}
.pagenav>a { /*Forum Seitenanzeige*/
border: 1px solid #7CBEE8;
background-color: #7CBEE8;
}
.pagenav>.pagenav-current { /*Seitenanzeige aktiv*/
background-color: #1A71AF;
border-color: #1A71AF;
}
.pagenav>a:hover { /*Seitenanzeige Hover*/
background-color: #1A71AF;
border-color: #1A71AF;
}
#newthread { /*Thema erstellen Button*/
background-color: #7CBEE8;
}
#newthread:hover { /*Thema erstellen Button Hover*/
background: #1A71AF;
}
.sbuttonA, .sbuttonB { /*Buttons*/
background-color: #7CBEE8;
}
.sbuttonA:hover, .sbuttonB:hover { /*Buttons Hover*/
background-color: #1A71AF;
border-color: #1A71AF;
}
article.comment>header>div.cpanel>span:before { /*Forum Kommentarpfeil*/
background-color: #7CBEE8;
}
article.comment>header>div.cpanel>ul { /*Forum Kommentarfenster*/
background-color: #7CBEE8;
}
article.comment>header>div.cpanel>ul>li:hover { /*Forum Kommentarfenster hover*/
background-color: #1A71AF
}
responsive-table thead th { /*Index Listenansicht*/
background-color: #62B8EE;
border: 1px solid #6A85A9;
}
.responsive-table tbody tr {
background-color: #add8e6; /*Hintergrundfarbe der ungeraden Felder (Das erste, dritte, fünfte, etc.)*/
border: 2px solid #87ceff; /*Der Zugehörige Rand*/
}
.responsive-table tbody tr:nth-child(even) {
background-color: #bfefff!important; /*Hintergrundfarbe der geraden Felder (Das zweite, vierte, sechste, etc.)*/
}
.responsive-table thead th { /*Warteliste Überschrift*/
background-color: #87cefa;
border: 1px solid #ffffff;
}
.pbutton { /*Erweiterte Suche*/
background-color: #62B8EE;
}
.tabs { /*Same*/
background-color: #62B8EE;
}
.pbutton-container { /*Rand*/
border: 1px solid #62B8EE;
}
#tabs-content-filters { /*Erweiterte Suche abgeschickt*/
background-color: #62B8EE;
}
#filters-items>li { /*Aktive Filter*/
background-color: #275575;
}
.tabs>li { /*Tabs*/
border: none;
}
article.comment { /*Forum Beiträge*/
background-color: #FFF!important;
border: 1px solid #62B8EE!important;
}
#forumCategories>li a { /*Forum Kategorien*/
background-color: #FFF;
}
#forumCategories>li a.bold { /*Forum Kategorien aktiv*/
background-color: #ffa54f;
}
article.comment>div.comments>h3 { /*Forum Kommentare*/
background-color: #62B8EE;
border: 1px solid #62B8EE;
}
article.comment>div.comments { /*Forum Kommentare Rand*/
border: 1px solid #62B8EE;
}
article.comment>ul.badges>li>a { /*Forum Smileys*/
background-color: #c4c4c4 !important;
}
#forumindex>li{ /*Forum Threads*/
background-color: #bfefff;
}
#forumindex>li:nth-child(odd) { /*Forum Threads ungerade*/
background-color: #add8e6;
}
#forumindex>li.readed { /*Forum Threads gelesen*/
background-color: #c4c4c4!important;
}
#itemSubscriptionBox { /*Forum abonnieren*/
background-color: #62B8EE;
color: #FFF;
}
#itemSubscriptionBox>ul>li:hover { /*Forum abonnieren Hover*/
background-color: #1A71AF;
}
#itemSubscriptionBox>ul>li>div { /*Forum abonnieren Rand*/
border-left: 3px solid #FFF;
}
article.comment>h2:first-of-type { /*PN Überschrift*/
background-color: rgb(98, 184, 238);
}
#footer { /*Footer*/
border-top: 2px solid #00f5ff; /*Farbe der Linie über dem Footer*/
background-color: #00eeee; /*Hintergrundfarbe des Footers*/
}

#footer h4 { /*Footer Überschrift*/
border-bottom: 1px solid#ffffff; /*Farbe der kleinen Ränder unter den Überschriften*/
color: #ffffff; /*Farbe der Überschriften ("Partner" etc.)*/
}
#footer a { /*Footer Links*/
color: #ffffff; /*Farbe der Links ("Impressum", "Regeln", "FAQ", etc.)*/
}
#sidenav-main { /*Mobil Menü*/
background-color: #41A8E9;
}
#sidenav-main>.menu>li .menuitem>li:hover { /*Mobil Menü Hover*/
background-color: #1A71AF;
}
#page-action>li { /*Profilbuttons*/
border: 1px solid #85BBDD;
color: #62B8EE;
}
#page-action>li:hover { /*Profilbuttons Hover*/
background-color: #85BBDD;
}
#page-action>li:before { /*Profilbuttons Symbole*/
color: #62B8EE;
}
#table-menu>li.hover { /*Suchansicht aktiv*/
border-color: #275575;
background-color: #275575;
}
#table-menu>li { /*Suchansicht inaktiv*/
background-color: rgb(26, 113, 175);
color: #CCCCCC;
}
#table-menu-content>div { /*Suchansicht Inhalt*/
background-color: #275575;
}
#indexABC>li.active { /*Suchansicht "Beginnt mit" aktiv*/
background-color: #4EBBFF;
}
#indexABC>li { /*Suchansicht "Beginnt mit" inaktiv*/
background-color: #7FB1D0;
}
#indexABC>li:hover { /*Suchansicht "Beginnt mit" hover*/
background-color: #154161;
}
.f10g { /*Suchansicht "Covers" kleiner Text*/
font-size: 12px;
color: #A5A5A5;
}
.msgBox>div.notice { /*Suchansicht Hinweisbox*/
border: 1px solid #FFF;
background-color: #FFF;
}
.btype0 { /* Index Covers*/
background-color: #284050 !important;
}
.covers>li>a .title>div { /*Index Covers Links*/
color: #7BCCFF;
}
.gallery>li>a .title>div { /*Index Galerie Links*/
color: #7BCCFF;
}
.inputBox-Header { /*Eintragen Boxen*/
background: #FFFFFF;
border: 1px solid #B5D7ED;
}
.inputBox-Header>.inputBox-List { /*Eintragen Boxen Highlight*/
background: #B5D7ED;
}
#toTop { /*To top Button*/
background: url("http://puu.sh/mpAEo/39ab457ecb.png") no-repeat left top;
}
#toTopHover { /*To top Button Hover*/
background: url("http://puu.sh/mpAEo/39ab457ecb.png") no-repeat left -42px;
}
.icheckbox, .iradio { /*Checkboxen + Radiobuttons*/
background: url("http://puu.sh/mpB0q/e48824558b.png") no-repeat;
}
.covers>li>a .title {
background: linear-gradient(to bottom, rgba(102,102,102,0) 0%, #000000 100%);
}
#ratingBox>div #ratingSettings tr>td #eplus { /*Bewerten +Button*/
border: 1px solid #7CBEE8;
background-color: #7CBEE8;
}
#ratingBox>div #ratingSettings tr>td #eplus:hover { /*Bewerten +Button Hover*/
background-color: #1A71AF;
border-color: #1A71AF;
}
#ratingBox>div #ratingSettings tr>td #maxEpisodes { /*Bewerten Max-Button*/
border: 1px solid #7CBEE8;
background-color: #7CBEE8;
}
#ratingBox>div #ratingSettings tr>td #maxEpisodes:hover { /*Bewerten Max-Button Hover*/
background-color: #1A71AF;
border-color: #1A71AF;
}
#ratingBox>div #ratingSettings tr>td:last-child>.setDateToday { /*Bewerten "Heute"*/
color: rgb(72, 154, 255);
}
#ratingBox>div>footer #ratingMode { /*Bewerten Anzeige wechseln*/
color: rgb(72, 154, 255);
}
#cstar-rating>div { /*Bewerten Sterne*/
color: #1A71AF;
}
.ui-slider { /*Bewerten Slider Rand*/
border: 1px solid #1A71AF;
}
.ui-slider .ui-slider-handle { /*Bewerten Slider*/
border: 2px solid #1A71AF;
background-color: #1A71AF;
}
#pollFrame { /*Forum Umfragen*/
background: #FFFFFF;
border: 1px solid #62B8EE;
}
#start {
background-color: rgba(187,255,255,0.7); /*Hintergrundfarbe der Box*/
border: 1px solid #63b8ff; /*Umrandung der Box*/
}
@media screen and (min-width: 801px)
{
#details-outer
{
margin-right: 0 !important;
margin-left: -300px;
float: right;
}
#details-inner
{
margin-right: 0 !important;
margin-left: 310px;
}
#details-right
{
float: right;
}

.urgent-msg {
background-color: #62B8EE;
border-bottom: 1px solid #62B8EE;
}

#ratingBox>div>header {
background-color: #62B8EE;
}

#ratingBox>div {
border: 2px solid #62B8EE;
}}
.spoiler:hover {background-color: transparent;}
.spoiler, .spoiler-visible{border: 1px solid blue;}
.spoiler {background: transparent;}
.spoiler::before{color: blue;}
.spoiler::after {display: none;}

Kommentare (1)

Zeige alle Kommentare

herojokerV.I.P.

10. Mai 2016

@NatsukiMiwa
Ich nenne hier nur mal syntaktische Fehler (gucke also nicht wie das eigentlich aussieht, ob es die Klassen und IDs wirklich gibt etc.):

Da fehlt eine öffnende geschweifte Klammer { vor bzw. nach /*Index Links*/. Allerdings wird dieser Bereich wohl nicht geschlossen (irgendwo fehlt dann eine schließende Klammer) - ich habe den Bereich mal direkt nach dem nachfolgenden Block geschlossen.
Bei /*Index Listenansicht*/ fehlt vor responsive-table ein Punkt.
Bei /*Logout*/ verwendest du rgba statt rgb (die vierte Komponente für die Durchsichtigkeit gibst du gar nicht an).

Hier der korrigierte und neu formatierte Code:

#logo { /*aniSearch Logo*/
   background-image: url("http://puu.sh/mly5m/5e6b85c49e.png");
}
#topnav > li:first-child > a {
   background-color: transparent;
}
#header:before { /*Header*/
   background-image: url("http://img5.fotos-hochladen.net/uploads/4208112smalls6zgk3w91pb.jpg");
   opacity: 1;
}
#header { /*Abschlusstrich des Headers*/
   border-bottom: 2px solid #00ffff;
}
#content {
   background-image: url(http://img5.fotos-hochladen.net/uploads/takingphotoscndik79sg23.jpg);
   background-attachment: fixed;
}

a { /*Globale Linkfarbe*/
   color: rgb(72, 154, 255);
}
#avatar.hover { /*Avatar Hover*/
   box-shadow: -1px -1px 0px 0px #58d8ec,1px -1px 0px 0px #58d8ec,1px 1px 0px 0px #58d8ec,-1px 1px 0px 0px #58d8ec;
}
#avatar .menuitem { /*Avatar Hoverfenster*/
   background-color: rgb(7,232,210) !important;
   outline: 1px solid rgb(7,232,210) !important;
}
#avatar .menuitem > li:hover { /*Avatar Hoverfenster Menüpunkte Hover*/
   background-color: #03c6b5 ;
}
#avatar .logout { /*Logout*/
   background-color: rgb(114, 209, 232);
}
#usercp.hover { /*UserCP Hover*/
   background-color: #58d8ec;
   box-shadow: -1px -1px 0px 0px #58d8ec,1px -1px 0px 0px #41A8E9,1px 1px 0px 0px #58d8ec,-1px 1px 0px 0px #1960dc;
}
#usercp.hover .menuitem { /*UserCP Hoverfenster*/
   background-color: #58d8ec;
   outline: 1px solid #58d8ec;
}
#usercp .menuitem > li:hover { /*UserCP Hoverfenster Menüpunkte Hover*/
   background-color: #1A71AF;
}
.menuitem > li span { /*Menüpunkte Schrift*/
   color: #FFFFFF;
}
#mainnav { /*Navigationsleiste*/
   background-color: rgba(0, 255, 255, 0.0);
}
#mainnav .menu > li.active { /*Navigationsleiste aktiv*/
   background-color: rgba(0, 229, 238, 0.7);
}
#mainnav .menu > li.hover { /*Navigationleiste Hover*/
   background-color: rgba(0, 255, 255, 0.75);
   box-shadow: -1px -1px 0px 0px #00ffff,1px -1px 0px 0px #00ffff,1px 1px 0px 0px #00ffff,-1px 1px 0px 0px #00ffff;
}
#mainnav .menu > li.hover .menuitem { /*Navigationsleiste Hoverfenster*/
   background-color: rgba(135,206,250,1);
   box-shadow: -1px -1px 0px 0px #00ffff,1px -1px 0px 0px #00ffff,1px 1px 0px 0px #00ffff,-1px 1px 0px 0px #00ffff;
}
#mainnav .menu > li .menuitem > li:hover { /*Navigationsleiste Hoverfenster Menüpunkte Hover*/
   background-color: rgba(135,206,250,1);
}
#mainnav .menu > li .menuitem > li:hover span { /*Navigationsleiste Hoverfenster Menüpunkte Hover Textfarbe*/
   color: #000;
}
#searchbox { /*Suchleiste*/
   background-color: #1A71AF;
   border-bottom: 2px solid #62B8EE;
}
#searchbox #searchbar { /*Suchfeld*/
   border: 2px solid #85BBDD;
}
#searchbox #searchbar > li:last-child:before { /*Die Pfeile da*/
   color: #85BBDD;
}
#start { /*Rand*/
   border: 1px solid #62B8EE;
}
#start #details-subs, #start #details-subsB { /*Tabs*/
   background-color: #62B8EE;
}
#start #details-subs > li > a, #start #details-subsB > li > a { /*Tabs Rand*/
   border: none;
}
#details-outer #details-inner > section > h2 { /*Überschriftenleiste*/
   background-color: #62B8EE;
   border-top: 3px solid #6A85A9;
   color: #FFFFFF;
}
#details-outer #details-inner > section.empty > h2 { /*Überschriftenleiste leer*/
   color: rgb(68, 68, 68);
}
#details-outer #details-inner > section > h2> a { /*Überschriftenleiste Links*/
   color: #FFF;
}
#details-outer #details-inner > section.accordion > h2:after {
   background-color: #6A85A9;
}
#details-right > section > h2{ /*Boxen rechts Überschrift*/
   background-color: #4876ff;
}
#details-right > section { /*Boxen rechts*/
   background-color:rgba(255,255,255,0.4);
   border: 1px solid #62B8EE;
}
@media (min-width: 900px){ /*Index Links*/
   .responsive-table tbody th[scope="row"]> a {
       color: #489AFF;
   }
}
.pagenav > a { /*Forum Seitenanzeige*/
   border: 1px solid #7CBEE8;
   background-color: #7CBEE8;
}
.pagenav >.pagenav-current { /*Seitenanzeige aktiv*/
   background-color: #1A71AF;
   border-color: #1A71AF;
}
.pagenav > a:hover { /*Seitenanzeige Hover*/
   background-color: #1A71AF;
   border-color: #1A71AF;
}
#newthread { /*Thema erstellen Button*/
   background-color: #7CBEE8;
}
#newthread:hover { /*Thema erstellen Button Hover*/
   background: #1A71AF;
}
.sbuttonA, .sbuttonB { /*Buttons*/
   background-color: #7CBEE8;
}
.sbuttonA:hover, .sbuttonB:hover { /*Buttons Hover*/
   background-color: #1A71AF;
   border-color: #1A71AF;
}
article.comment > header > div.cpanel > span:before { /*Forum Kommentarpfeil*/
   background-color: #7CBEE8;
}
article.comment > header > div.cpanel > ul { /*Forum Kommentarfenster*/
   background-color: #7CBEE8;
}
article.comment > header > div.cpanel > ul > li:hover { /*Forum Kommentarfenster hover*/
   background-color: #1A71AF
}
.responsive-table thead th { /*Index Listenansicht*/
   background-color: #62B8EE;
   border: 1px solid #6A85A9;
}
.responsive-table tbody tr {
   background-color: #add8e6; /*Hintergrundfarbe der ungeraden Felder (Das erste, dritte, fünfte, etc.)*/
   border: 2px solid #87ceff; /*Der Zugehörige Rand*/
}
.responsive-table tbody tr:nth-child(even) {
   background-color: #bfefff !important; /*Hintergrundfarbe der geraden Felder (Das zweite, vierte, sechste, etc.)*/
}
.responsive-table thead th { /*Warteliste Überschrift*/
   background-color: #87cefa;
   border: 1px solid #ffffff;
}
.pbutton { /*Erweiterte Suche*/
   background-color: #62B8EE;
}
.tabs { /*Same*/
   background-color: #62B8EE;
}
.pbutton-container { /*Rand*/
   border: 1px solid #62B8EE;
}
#tabs-content-filters { /*Erweiterte Suche abgeschickt*/
   background-color: #62B8EE;
}
#filters-items > li { /*Aktive Filter*/
   background-color: #275575;
}
.tabs > li { /*Tabs*/
   border: none;
}
article.comment { /*Forum Beiträge*/
   background-color: #FFF !important;
   border: 1px solid #62B8EE !important;
}
#forumCategories > li a { /*Forum Kategorien*/
   background-color: #FFF;
}
#forumCategories > li a.bold { /*Forum Kategorien aktiv*/
   background-color: #ffa54f;
}
article.comment > div.comments > h3 { /*Forum Kommentare*/
   background-color: #62B8EE;
   border: 1px solid #62B8EE;
}
article.comment > div.comments { /*Forum Kommentare Rand*/
   border: 1px solid #62B8EE;
}
article.comment > ul.badges > li > a { /*Forum Smileys*/
   background-color: #c4c4c4 !important;
}
#forumindex > li { /*Forum Threads*/
   background-color: #bfefff;
}
#forumindex > li:nth-child(odd) { /*Forum Threads ungerade*/
   background-color: #add8e6;
}
#forumindex > li.readed { /*Forum Threads gelesen*/
   background-color: #c4c4c4 !important;
}
#itemSubscriptionBox { /*Forum abonnieren*/
   background-color: #62B8EE;
   color: #FFF;
}
#itemSubscriptionBox > ul > li:hover { /*Forum abonnieren Hover*/
   background-color: #1A71AF;
}
#itemSubscriptionBox > ul > li > div { /*Forum abonnieren Rand*/
   border-left: 3px solid #FFF;
}
article.comment > h2:first-of-type { /*PN Überschrift*/
   background-color: rgb(98, 184, 238);
}
#footer { /*Footer*/
   border-top: 2px solid #00f5ff; /*Farbe der Linie über dem Footer*/
   background-color: #00eeee; /*Hintergrundfarbe des Footers*/
}

#footer h4 { /*Footer Überschrift*/
   border-bottom: 1px solid#ffffff; /*Farbe der kleinen Ränder unter den Überschriften*/
   color: #ffffff; /*Farbe der Überschriften ("Partner" etc.)*/
}
#footer a { /*Footer Links*/
   color: #ffffff; /*Farbe der Links ("Impressum", "Regeln", "FAQ", etc.)*/
}
#sidenav-main { /*Mobil Menü*/
   background-color: #41A8E9;
}
#sidenav-main >.menu > li .menuitem > li:hover { /*Mobil Menü Hover*/
   background-color: #1A71AF;
}
#page-action > li { /*Profilbuttons*/
   border: 1px solid #85BBDD;
   color: #62B8EE;
}
#page-action > li:hover { /*Profilbuttons Hover*/
   background-color: #85BBDD;
}
#page-action > li:before { /*Profilbuttons Symbole*/
   color: #62B8EE;
}
#table-menu > li.hover { /*Suchansicht aktiv*/
   border-color: #275575;
   background-color: #275575;
}
#table-menu > li { /*Suchansicht inaktiv*/
   background-color: rgb(26, 113, 175);
   color: #CCCCCC;
}
#table-menu-content > div { /*Suchansicht Inhalt*/
   background-color: #275575;
}
#indexABC > li.active { /*Suchansicht "Beginnt mit" aktiv*/
   background-color: #4EBBFF;
}
#indexABC > li { /*Suchansicht "Beginnt mit" inaktiv*/
   background-color: #7FB1D0;
}
#indexABC > li:hover { /*Suchansicht "Beginnt mit" hover*/
   background-color: #154161;
}
.f10g { /*Suchansicht "Covers" kleiner Text*/
   font-size: 12px;
   color: #A5A5A5;
}
.msgBox > div.notice { /*Suchansicht Hinweisbox*/
   border: 1px solid #FFF;
   background-color: #FFF;
}
.btype0 { /* Index Covers*/
   background-color: #284050 !important;
}
.covers > li > a .title > div { /*Index Covers Links*/
   color: #7BCCFF;
}
.gallery > li > a .title > div { /*Index Galerie Links*/
   color: #7BCCFF;
}
.inputBox-Header { /*Eintragen Boxen*/
   background: #FFFFFF;
   border: 1px solid #B5D7ED;
}
.inputBox-Header > .inputBox-List { /*Eintragen Boxen Highlight*/
   background: #B5D7ED;
}
#toTop { /*To top Button*/
   background: url("http://puu.sh/mpAEo/39ab457ecb.png") no-repeat left top;
}
#toTopHover { /*To top Button Hover*/
   background: url("http://puu.sh/mpAEo/39ab457ecb.png") no-repeat left -42px;
}
.icheckbox, .iradio { /*Checkboxen + Radiobuttons*/
   background: url("http://puu.sh/mpB0q/e48824558b.png") no-repeat;
}
.covers > li > a .title {
   background: linear-gradient(to bottom, rgba(102,102,102,0) 0%, #000000 100%);
}
#ratingBox > div #ratingSettings tr > td #eplus { /*Bewerten +Button*/
   border: 1px solid #7CBEE8;
   background-color: #7CBEE8;
}
#ratingBox > div #ratingSettings tr > td #eplus:hover { /*Bewerten +Button Hover*/
   background-color: #1A71AF;
   border-color: #1A71AF;
}
#ratingBox > div #ratingSettings tr > td #maxEpisodes { /*Bewerten Max-Button*/
   border: 1px solid #7CBEE8;
   background-color: #7CBEE8;
}
#ratingBox > div #ratingSettings tr > td #maxEpisodes:hover { /*Bewerten Max-Button Hover*/
   background-color: #1A71AF;
   border-color: #1A71AF;
}
#ratingBox > div #ratingSettings tr > td:last-child >.setDateToday { /*Bewerten "Heute"*/
   color: rgb(72, 154, 255);
}
#ratingBox > div > footer #ratingMode { /*Bewerten Anzeige wechseln*/
   color: rgb(72, 154, 255);
}
#cstar-rating > div { /*Bewerten Sterne*/
   color: #1A71AF;
}
.ui-slider { /*Bewerten Slider Rand*/
   border: 1px solid #1A71AF;
}
.ui-slider .ui-slider-handle { /*Bewerten Slider*/
   border: 2px solid #1A71AF;
   background-color: #1A71AF;
}
#pollFrame { /*Forum Umfragen*/
   background: #FFFFFF;
   border: 1px solid #62B8EE;
}
#start {
   background-color: rgba(187,255,255,0.7); /*Hintergrundfarbe der Box*/
   border: 1px solid #63b8ff; /*Umrandung der Box*/
}

@media screen and (min-width: 801px) {
   #details-outer {
       margin-right: 0 !important;
       margin-left: -300px;
       float: right;
   }
   #details-inner {
       margin-right: 0 !important;
       margin-left: 310px;
   }
   #details-right {
       float: right;
   }

   .urgent-msg {
       background-color: #62B8EE;
       border-bottom: 1px solid #62B8EE;
   }

   #ratingBox > div > header {
       background-color: #62B8EE;
   }

   #ratingBox > div {
       border: 2px solid #62B8EE;
   }
}
.spoiler:hover {
   background-color: transparent;
}
.spoiler, .spoiler-visible {
   border: 1px solid blue;
}
.spoiler {
   background: transparent;
}
.spoiler::before {
   color: blue;
}
.spoiler::after {
   display: none;
}

Fehler gefunden mit W3C CSS Validation Service.

NatsukiMiwaV.I.P.

10. Mai 2016

@zashiki warashi: danke hat geklappt ^^ weisst du wie ich noch die schrift in weiss kriege? o.o

@herojoker: das hat nix gebracht, hat nur noch mehr fehler hervorgebracht, hab mein altes wieder genommen und den code von zashiki eingefügt und schon war es gut ^^

Kommentare (4)

Zeige alle Kommentare

Mr5miley

16. Mai 2016

Habe da ein Problem mit den pre-erstellten Seitenlayouts. Auf meinem Profil und auch auf den Profilen von anderen, sowie in der Topliste wird die hälfte der Covers von einem unschönen grünen Cover überdeckt, so lange ich nicht mit der Maus darüber hovere. :/

^ Hier bin ich gerade mit der Maus auf dem Cover von Shinji, wie man allerdings unschwer erkennen kann, ist das Cover von Inaho zur Hälfte abgeschnitten.

Hat da jemand vielleicht eine Idee, woran das liegen kann? :D

Vielen Dank schon mal im Vorraus!

EDIT: Und kann man Spoiler auch noch irgendwie einfärben?

Finde das orange nicht gerade passend :/

Beitrag wurde zuletzt am 16.05.2016 20:11 geändert.

SkyFiefV.I.P.

16. Mai 2016

1)
so sollte es sein dir fehlt wahrscheinlich linear-gradient
.covers > li > a .title {
     background: linear-gradient(to bottom, rgba(51,51,51,0) 0%, #333 100%);
}
2)
so habe ich es übergangsweise man kann auch mehr machen
.spoiler {       /* Spoiler*/
   border: 1px solid #872c47;
   background: none;
   background-color: #e3dcbd;
}
.spoiler::before {   /* Spoiler Text*/
   color: #872c47;
}
.spoiler::after {   /* Spoiler Plus*/
   color: #872c47;
}
.spoiler:hover {       /* Spoiler Hover*/
   background-color: #ede7cc;
}