[CSS-Feature] Zeigt her eure Styles

Lass den Künstler in Dir frei!

[CSS-Feature] Zeigt her eure Styles

Avatar: aniSearchler
aniSearchler
#46
Erstmal Danke an xShadowLight für seinen Code der mir ziemlich geholfen hat!


Und jetzt, Yuuuuuhhhuuuuu  ... nach 3 Wochen hartem Kampf habe es auch ich als totaler CSS nichts Könner geschafft etwas was mir gefällt herzuzaubern. 
3 Wochen, weil ich eins bereits fertig hatte es mir aber nicht gefallen hat, also habe ich die letzten 2 Tage an diesem gearbeitet, ging diesmal schneller nachdem ich mir beim ersten die Haare vom Kopf gekratzt habe.
Auserdem habe ich wie Nicoletta geguckt was sich verändert  Hat ziemlich Zeit gekostet.

Texte sowie Links sind beide schwarz was natürlich Blödsinn ist wird auch noch gepatcht!

Profilseite mit geöffnetem Navigationsfenster.

- Header wird evtl. zu 50/50 ersetzt. 
Wer es selbst machen möchte muss unter einfach den Link zum Bild in die Klammer setzen.

- Das UserCP (wie es xShadowLight nannte) neben dem kleinen Profilbild sieht man so ziemlich gar nicht, mich persönlich juckt es auch eig. gar nicht, kann man aber patchen ... hoffe ich.

ProfilseiteHeadermitoffenerNavigationsleiste.jpg

Startseite.

- "Alle Anzeigen" Buttons werden evtl. noch verdunkelt.



Forumseite mit geöffnetem Profilunterfenster.

- Gelesene Threads werden mittelstark Transparent, mir persönlich gefällt das sehr ... Man wird mit einem tollen Hintergrundbild belohnt wenn man mehrere Threads besucht.



Footer

- Footer wird evtl. zu 50/50 ersetzt.
Wer es selbst machen möchte muss unter 221 einfach den Link zum Bild in die Klammer setzen.

- Hier sieht man das manche Texte (Zwischen Footer und Ansicht für diese ...) an wenigen dunklen stellen nicht leicht zu lesen sind, aber mit etwas Kraft und Scrollen an eine weiße stelle patcht es auch wieder.



Beiträge mit geöffnetem Spoiler und Kommentar.

- Der weiße Hintergrund der Beiträge ist auch etwas Transparent, was aber bei schwarzem Text bzw. nicht hellen Farben keinesfalls die Lesbarkeit einschränkt.
Wer den Hintergrund wechseln möchte muss unter 17 einfach den Link zum Bild in die Klammer setzen.

- Signaturen sind nur sehr leicht schwerer zu erkennen, mit 2 gesunden Augen geht das.
- Spoiler sind auch Transparent, verhalten sich aber genauso wie bei weißem Hintergrund.

Mensch dieses Transparent Blödsinn ist geil! 

Beitr%C3%A4geSpoilerKommentar.jpg

Indexseite mit geöffnetem Suchfilter und das Ding drunter.

- Tab, Suchfilter und das Ding unter dem Suchfilter sind in der gleichen Farbe, sollte aber nicht groß bei der Hand-Augen Koordination das anzuklicken was man braucht stören.
- Bei dem Ding passt mir noch etwas nicht, das ist auf dem Bild nicht sichtbar und zwar der Hover wenn man mit der Maus drüber fährt und es seine Farbe ändert, es wird noch gepatcht bzw. verschönert.
- Index liste ist in 2er Schritten Transparent, Matt. <- Wollte es ändern aber bin nun der Meinung das es super aussieht.
- Hinweistexte sind hellrot mit dunkelroten Rand umrandet, nicht wundern.


Topliste.

- Hellblau/Türkis wie auch immer = nicht bewertet, dunkelblau = bewertet.
- Hier sieht man es besser an "Seite ... von ..." neben der Seitenanzahl das es an dunklen Stellen schwer lesbar ist, hier müsste man schon die Farbe ändern, weil durch Scrollen kommt es von dort nicht weg, naja mir passt es ... Kann man evtl. patchen.


Animeseite bzw. Bewertung

- "Letzte Änderung ..." ziemlich schwer sichtbar, mit ändern der Farbe vom Header ist es gefixt.
Man kann die Farbe unter 362 ändern.

HELP:  Rechts in der 3ten Box unter Bewertungen befinden sich die Bewertungssäulen. Ich bekomme den Hover nicht verändert, sobald ich mit der Maus auf einen der Säulen draufgehe wird der Rand Rot, würde es gerne ändern nur Check ich es nicht. Vielleicht weiß jemand wie es zu patchen ist und kann mir per PN helfen.



Das Design ist eig. soweit fertig habe alles abgearbeitet, bestimmt kann man hier und da noch etwas fein machen oder selbst noch etwas umändern was nicht im Code von xShadowLight dabei war aber sonst sieht es (für mich) toll aus und ich denke das wichtigste ist erledigt .

Ich versuche dieses Design auch an der Sicherheit durchzubringen (Auch wenn ich bezweifle das es reinkommt wegen der Transparanz) wenn wirklich alles Super aussieht und ich es auch hinbekomme, ansonsten könnt ihr den Code hier finden: 
#logo{ /*aniSearch Logo*/
background-image: url(http://cdn.anisearch.de/images/member/upload/44/44146/images/aSLogo.png); /*URL für Hintergrundbild*/
}
#topnav>li:first-child>a { /*Username Hintergrund*/
background-color: rgba(3, 200, 252, 0.5);
}
#header:before{ /*Header*/
background-color: rgb(255, 255, 255);
background-image: url(); /*URL für Hintergrundbild*/
opacity: 1;
}
#header{ /*Abschlusstrich des Headers*/
border-bottom: 2px solid #071453;
}
#content { /*Seitenhintergrund*/
background-color: rgb(255, 255, 255);
background-image: url(); /*URL für Hintergrundbild*/
background-attachment: fixed;
}
a { /*Globale Linkfarbe*/
color: rgb(0, 0, 0);
}
#avatar.hover { /*Avatar Hover*/
box-shadow: -1px -1px 0px 0px #071453,1px -1px 0px 0px #071453,1px 1px 0px 0px #071453,-1px 1px 0px 0px #071453;
background-color: #ffffff;
}
#avatar .menuitem { /*Avatar Unterfenster*/
background-color: rgb(3, 200, 252)!important;
outline: 2px solid rgb(7, 20, 83)!important;
}
#avatar .menuitem>li:hover { /*Avatar Unterfenster ausgewählte Menüpunkte*/
background-color: #009bc1;
}
#avatar .logout { /*Logout*/
background-color: rgb(0, 155, 193,);
}
#usercp.hover { /*UserCP Hover (9x9 Kasten neben Avatar)*/
background-color: #03c8fc;
box-shadow: -1px -1px 0px 0px #071453,1px -1px 0px 0px #071453,1px 1px 0px 0px #071453,-1px 1px 0px 0px #071453;
}
#usercp.hover .menuitem { /*UserCP Unterfenster*/
background-color: #03c8fc;
outline: 2px solid #071453;
}
#usercp .menuitem>li:hover { /*UserCP Unterfenster ausgewählte Menüpunkte*/
background-color: #009bc1;
}
.menuitem>li span { /*Menüpunkte Avatar+UserCP Textfarbe*/
color: #000000;
}
#mainnav{ /*Navigationsleiste*/
background-color: rgba(3, 200, 252, 0.5);
}
#mainnav .menu>li.active { /*Navigationsleiste aktiv*/
background-color: rgba(3, 200, 252, 0.5);
box-shadow: -1px -1px 0px 0px #071453,1px -1px 0px 0px #071453,1px 1px 0px 0px #071453,-1px 1px 0px 0px #071453;
}
#mainnav .menu>li.hover { /*Navigationleiste Ausgewählt*/
background-color: rgba(3, 200, 252, 0.5);
box-shadow: -1px -1px 0px 0px #071453,1px -1px 0px 0px #071453,1px 1px 0px 0px #071453,-1px 1px 0px 0px #071453;
}
#mainnav .menu>li.hover .menuitem { /*Navigationsleiste Unterfenster*/
background-color: rgba(3, 200, 252, 0.75);
box-shadow: -1px -1px 0px 0px #071453,1px -1px 0px 0px #071453,1px 1px 0px 0px #071453,-1px 1px 0px 0px #071453;
}
#mainnav .menu>li .menuitem>li:hover { /*Navigationsleiste Unterfenster ausgewählte Menüpunkte */
background-color: rgb(0, 155, 193);
}
#mainnav .menu>li .menuitem>li:hover span { /*Navigationsleiste Unterfenster ausgewählte Menüpunkte Textfarbe*/
color: #000000;
}
#searchbox { /*Suchleiste*/
background-color: rgb(3, 200, 252);
border-bottom: 2px solid #071453;
}
#searchbox #searchbar { /*Suchfeld*/
border: 2px solid #071453;
}
#searchbox #searchbar>li:last-child:before { /*Pfeile im Suchfeld (Suchen)*/
color: #0066f9;
}
#start { /*Profildaten Box ... Boxen unter Navi-leiste im Thread*/
border: 1px solid #071453;
background-color: rgba(255, 255, 255, 0.75);
}
#start #details-subs, #start #details-subsB { /*Tabs*/
background-color: #03c8fc;
}
#start #details-subs>li>a, #start #details-subsB>li>a { /*Tabs Rand*/
border: none;
}
#details-outer #details-inner>section>h2 { /*Überschriftenleiste*/
background-color: #03c8fc; /*Hintergrund*/
border-top: 3px solid #071453; /*Obere Linie*/
color: #ffffff; /*Schriftfarbe*/
}
#details-outer #details-inner>section.empty>h2 { /*Überschriftenleiste leer*/
color: rgb(3, 200, 252);
}
#details-outer #details-inner>section>h2>a { /*Überschriftenleiste Links*/
color: #ffffff;
}
#details-outer #details-inner>section.accordion>h2:after { /*Überschriftenleiste +/- ... Minimieren*/
background-color: #071453;
}
#details-right>section>h2{ /*Profil "Über mich"Boxen/Thread rechts bzw. links Überschriften*/
background-color: #03c8fc;
}
#details-right>section { /*Profil "Über mich"Boxen/Thread rechts bzw. links*/
background-color: rgba(255, 255, 255, 0.75);
border: 1px solid #071453;
}
.pagenav>a { /*Forum Seitenanzeige*/
border: 1px solid #071453;
background-color: #4c9ddb;
}
.pagenav>.pagenav-current { /*Seitenanzeige aktiv*/
background-color: #071453;
border-color: #4c9ddb;
}
.pagenav>a:hover { /*Seitenanzeige ausgewählt*/
background-color: #071453;
border-color: #4c9ddb;
}
#newthread { /*Thema erstellen Button*/
background-color: #4c9ddb;
}
#newthread:hover { /*Thema erstellen Button ausgewählt*/
background: #071453;
}
.sbuttonA, .sbuttonB { /*"Alle Anzeigen" Buttons*/
background-color: #4c9ddb;
}
.sbuttonA:hover, .sbuttonB:hover { /*"Alle Anzeigen" Buttons ausgewählt*/
background-color: #071453;
border-color: #000000;
}
article.comment>header>div.cpanel>span:before { /*Forum Kommentarpfeil*/
background-color: #03c8fc;
}
article.comment>header>div.cpanel>ul { /*Forum Kommentarfenster*/
background-color: #03c8fc;
}
article.comment>header>div.cpanel>ul>li:hover { /*Forum Kommentarfenster ausgewählt*/
background-color: #009bc1;
}
responsive-table thead th { /*Index Listenansicht*/
background-color: #ff0000;
border: 1px solid #071453;
}
.responsive-table tbody tr { /*Index Rahmen*/
border: 1px solid #071453;
}
.pbutton { /*Erweiterte Suche (Suchfilter Button)*/
background-color: #03c8fc;
}
.tabs { /*Erweiterte Suche Unterfensterleiste*/
background-color: #03c8fc;
}
.pbutton-container { /*Erweiterte Suche Unterfenster Rahmen*/
border: 1px solid #071453;
}
#tabs-content-filters { /*Erweiterte Suche Hintergrundfarbe Suchbox (Text in "Suche nach..." eingeben -> Box erscheint*/
background-color: #03c8fc;
}
#filters-items>li { /*Erweiterte Suche Aktive Filter*/
background-color: #0066f9;
}
.ui-widget-content { /*Erweiterte Suche Suchergebnisse*/
border: 1px solid #071453;
}
.tabs>li { /*Tabs*/
border: none;
}
article.comment { /*Forum Beiträge Box Hintergrund*/
background-color: rgba(255, 255, 255, 0.75)!important;
border: 1px solid #071453!important;
}
#forumCategories>li a { /*Forum Kategorien Übersicht Hintergrund*/
background-color: #ffffff;
}
#forumCategories>li a.bold { /*Forum Kategorien aktiv*/
background-color: #71b7ee;
}
article.comment>div.comments>h3 { /*Forum Kommentarleiste*/
background-color: #03c8fc;
border: 1px solid #071453;
}
article.comment>div.comments { /*Forum Kommentare Rahmen*/
border: 1px solid #071453;
}
article.comment>ul.badges>li>a { /*Forum Smileys (Vergebene Smileys)*/
background-color: #03c8fc !important;
}
#forumindex>li{ /*Forum Threads 1*/
background-color: #009bc1;
}
#forumindex>li:nth-child(odd) { /*Forum Threads 2*/
background-color: rgb(3, 200, 252)!important;
}
#forumindex>li.readed { /*Forum Threads gelesen*/
background-color: rgb(3, 200, 252)!important;
opacity: 0.4;
}
#itemSubscriptionBox { /*Forum abonnieren (Stecknadel Zeichen)*/
background-color: #ffffff;
color: #000000; /*Schriftfarbe*/
}
#itemSubscriptionBox>ul>li:hover { /*Forum abonnieren ausgewählt*/
background-color: #009bc1;
}
#itemSubscriptionBox>ul>li>div { /*Forum abonnieren Striche Links*/
border-left: 3px solid #03c8fc;
}
article.comment>h2:first-of-type { /*PN Überschrift*/
background-color: rgb(255, 255, 255);
}
#footer { /*Footer + Abschlussstrich*/
border-top: 2px solid #071453;
background-color: #ffffff;
background-image: url(); /*URL für Hintergrundbild*/
}
#footer h4 { /*Footer Überschriften zur Links*/
border-bottom: 0.3px solid #000000;
color: #000000;
}
#footer a { /*Footer Links*/
color: #03c8fc;
}
.responsive-table thead th { /*Indexleiste (Titel, Veröffentlichung etc.)*/
background-color: #03c8fc;
border: 1px solid #071453;
}
#sidenav-main { /*Mobil Menü*/
background-color: #ff0000;
}
#sidenav-main>.menu>li .menuitem>li:hover { /*Mobil Menü Hover*/
background-color: #ff0000;
}
#page-action>li { /*Profilbuttons (Profilseite: Kontaktieren + Einstellungen unter Profilbild ... Anime: Bewerten Favorisieren etc.*/
border: 1px solid #071453;
color: #071453; /*Schriftfarbe*/
}
#page-action>li:hover { /*Profilbuttons ausgewählt*/
background-color: #03c8fc;
}
#page-action>li:before { /*Profilbuttons Symbole*/
color: #071453;
}
#table-menu>li.hover { /*Suchansicht aktiv (Unter Erweiterte Suche)*/
border-color: #071453;
background-color: #009bc1;
}
#table-menu>li { /*Suchansicht inaktiv*/
background-color: rgb(3, 200, 252);
color: #ffffff; /*Schriftfarbe*/
}
#table-menu-content>div { /*Suchansicht Unterfenster Hintergrundfarbe*/
background-color: #009bc1;
}
#indexABC>li.active { /*Suchansicht Unterfenster "Beginnt mit" aktiv*/
background-color: #009bc1;
}
#indexABC>li { /*Suchansicht Unterfenster "Beginnt mit" inaktiv*/
background-color: #071453;
}
#indexABC>li:hover { /*Suchansicht Unterfenster "Beginnt mit" ausgewählt*/
background-color: #03c8fc;
}
.f10g { /*Suchansicht "Covers" kleiner Text (Listenansicht + Elemente pro Seite)*/
font-size: 12px;
color: #ff0000;
}
.msgBox>div.notice { /*Suchansicht Hinweisbox*/
border: 1px solid #961616;
background-color: #db5555;
}
.btype0 { /* Index Anime Covers ... Anime -> Toplist (Nicht Bewertet)*/
background-color: #03c8fc !important;
}
.btype2 { /*Index Anime Covers ... Anime -> Toplist (Bewertet)*/
background-color: #071453 !important;
}
.covers>li>a .title>div { /*Index Covers Links bzw. Firmennamen*/
color: #03c8fc;
}
.gallery>li>a .title>div { /*Index Galerie Links*/
color: #ff0000;
}
.inputBox-Header { /*Eintragen/Editieren Boxen*/
background: #03c8fc;
border: 1px solid #071453;
}
.inputBox-Header>.inputBox-List { /*Eintragen Boxen Highlight*/
background: #03c8fc;
}
#toTop { /*To top Button (Erscheint beim runter Scrollen unten rechts)*/
background: url("http://puu.sh/mpAEo/39ab457ecb.png") no-repeat left top;
}
#toTopHover { /*To top Button ausgewählt*/
background: url("http://puu.sh/mpAEo/39ab457ecb.png") no-repeat left -42px;
}
.icheckbox, .iradio { /*Checkboxen + Radiobuttons*/
background: url("images/member/upload/44/44146/images/Zeichen2.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 #071453;
background-color: #03c8fc;
}
#ratingBox>div #ratingSettings tr>td #eplus:hover { /*Bewerten "+" Button ausgewählt*/
background-color: #009bc1;
border-color: #071453;
}
#ratingBox>div #ratingSettings tr>td #maxEpisodes { /*Bewerten Max-Button*/
border: 1px solid #071453;
background-color: #03c8fc;
}
#ratingBox>div #ratingSettings tr>td #maxEpisodes:hover { /*Bewerten Max-Button ausgewählt*/
background-color: #009bc1;
border-color: #071453;
}
#ratingBox>div #ratingSettings tr>td:last-child>.setDateToday { /*Bewerten "Heute" Text*/
color: rgb(0, 155, 193);
}
#ratingBox>div>footer #ratingMode { /*Bewerten "einfache Anzeige" Text*/
color: rgb(0, 155, 193);
}
#cstar-rating>div { /*Bewerten Sterne*/
color: #03c8fc;
}
.ui-slider { /*Bewerten Slider Rahmen*/
border: 1px solid #071453;
}
.ui-slider .ui-slider-handle { /*Bewerten Slider*/
border: 2px solid #071453;
background-color: #03c8fc;
}
#pollFrame { /*Forum Umfragen*/
background: #ffffff;
border: 1px solid #071453;
}
@media (min-width: 900px){ /*PNs Titel*/
.responsive-table tbody th[scope="row"]>a {
color: #000000;
}
}
.covers>li {
background-color: #03c8fc;
}
.ui-tooltip { /*Anime -> Index ... Bildvorschau Hintergrund*/
background-color: #03c8fc;
border: 1px solid #071453;
}

#ratingBox>div { /*Bewertungsfenster Rahmen*/
border: 2px solid #071453;
}
#ratingBox>div>header { /*Bewertungsfenster Header*/
background-color: #03c8fc;
}
.spoiler { /*Spoilerleiste Button*/
border: 1px solid #071453;
background: rgba(3, 200, 252, 0.5);
}
.spoiler:hover { /*Spoilerleiste ausgewählt*/
background-color: rgba(3, 200, 252, 0.5);

}
.silver { /*Profildaten "Informationen" (Rechts/Links 2te Box) Schriftfarbe von "Status, Rang, Keksdose"*/
color: #000000;
}
.grey { /*Profildaten Rang Schriftfarbe (Oben Links neben kleinen Profilbild*/
color: #000000;
}
.f10g { /*Profildaten "Übersicht" (Rechts/Links 4te Box) Schriftfarbe von "Lieblingsgenres"*/
font-size: 14px;
color: #000000;
}
article.comment>header time:before { /*Beiträge Linkzeichen zwischen Bild und Datum*/
color: #071453;
}
.responsive-table tbody th[scope="row"] { /*In Animeliste und Index "Titel" Hintergrund etc.*/
background-color: rgba(255, 255, 255, 0.75);
}
.responsive-table tbody td { /*In Animeliste und Index "Veröffentlichung - Punkte" Hintergrund etc.*/
border-bottom: 1px solid #071453;
background-color: rgba(255, 255, 255, 0.75);
}
.rtype2 { /*In Animeliste, Schriftfarbe von Animetiteln*/
color: #009bc1 !important;
}
div.quick { /*In Animeliste "+" Zeichen" für Bewertung Editieren*/
color: #03c8fc;
}
li.ftype1 { /*Favoriten Char. etc. Rahmen*/
outline: 0px solid #ffffff !important;
}
#ratings ul#rating-stats>li { /*Bewertungen 1-4 Balken Hintergrund*/
background: #ffffff;
border: 1px solid #000000;
}
#ratings ul#rating-stats>li.max { /*Bewertungen 5. Voller Balken Rahmen*/
border: 1px solid #000000;
}
#ratings ul#rating-stats>li>a>div { /*Bewertungen Vordergrundfarbe*/
background: #03c8fc;
}
#ratings ul#rating-stats>li #toStar { /*Sterne über Balken Bewertungen Rechts*/
color: #071453;
}
#ratings ul#rating-stats>li #fromStar { /*Sterne über Balken Bewertungen Links*/
color: #071453;
}
article.comment>footer>ul.crating { /*Kommentare Bewerten Symbole*/
color: #03c8fc;
}
.afake { /*Mehr bzw. zuklappen (Kommentare)*/
color: #03c8fc;
}


So das war's Tschüß!
Beitrag wurde zuletzt am 30.07.2016 19:38 geändert.
    • ×2
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: Vendel
Admin
#47
Nach Möglichkeit verwendet bitte keinen Code von anderen, der nicht auf Basis der Seitenlayout-Vorlage basiert. Ihr könnt dort direkt den Code von der Vorlage verwenden. Er ist ansonsten defintiv unvollständig und hat oft lauter Code mit drin der gar nicht reingehört, wie zum Beispiel:

border-bottom: 2px solid #071453;

da reicht ein

border-bottom-color: #071453;

Gerade für Leute die sich nicht mit CSS beschäftigen wollen, ist ein Farbcode zu ändern einfacher zu verstehen, als noch der Syntax mit Dingen die eh nicht geändert werden. ;)
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: martin m²#48
was ich so aktuell mal verbrochen habe an css-code murks
screenshot
Screenshot 1080p fullscreen firefox anisearch user css

code: CSS-FILE (leider nicht kommentiert)
CSS:

#content {
    background: rgba(255, 0, 0, 0);
}
#logo {
    background: url(https://puu.sh/qB2ia.png);
    background-position: center center;
}
#header::before {
    background: url(http://cdn.anisearch.de/images/member/upload/38/38366/images/NekoparaSteamheadercentered.jpg) center;
}
#header {
    border-bottom:  #e53838;
    background-color: #6F2727;
}
#searchbox {
    background-color: rgba(251, 8, 8, 0.5);;
    border-bottom:  #e53838;
}
#top {
    color: #FF0000;
    background: #00FFF9;
    background-image: url(https://puu.sh/qz2xj.png);
    background-attachment: fixed;
    background-position: center center;
    background-size: 1920 1080;
}
#mainnav {
    background-color: rgba(251, 8, 8, 0.5);
}
#start #details-subs {
    background-color: rgba(255, 0, 0, 0.77);
}
#start #details-subsB {
    background-color: #ff3f00;
}
#details-right > section > h2 {
    background-color: rgba(255, 0, 0, 0.67);
}
#footer {
    border-top-color: #FF0000;
    background: rgba(251, 8, 8, 0.5);
}
#mainnav .menu > li.active {
    background-color: #e53838;
}
.spoiler {
    background: #FF0000;
}
.spoiler:hover {
    background-image: none;
    background-color: #ff9595;
}
#details-outer #details-inner > section > h2 {
    background-color: RGBA(249, 143, 143, 0.63);
    border-top: #F35F5F;
}
.f12g {
    color: #DC143C;
}
.f14 {
    color: #DC143C;
}
.icheck-label {
    color: rgba(255, 0, 0, 0.65);
}
a {
    color: #e53838;
}
#mainnav .menu > li.hover {
    background-color: rgba(229, 56, 56, 0.65);
}
#mainnav .menu > li.hover .menuitem {
    background-color: rgba(229, 56, 56, 0.65);
}
#avatar.hover {
    background-color: rgba(229, 56, 56, 0.65);
    box-shadow: #e53838;
}
#avatar.hover .menuitem{
    background-color: rgba(229, 56, 56, 0.65);
    outline: #e53838;
}
#toTop {
    background-color: RGBA(255, 0, 0, 0.56);
    color: rgba(255, 255, 255, 0.74);
}
#toTopHover {
    background-color: #e53838;
}
#usercp.hover {
    background-color: rgba(229, 56, 56, 0.65);
    box-shadow: #e53838;
}
#usercp.hover .menuitem{
    background-color: rgba(229, 56, 56, 0.65);
    outline: #e53838;
}
#topnav > li:first-child > a {
    color: rgba(255, 255, 255, 0.49);
    background-color: rgba(229, 56, 56, 0.3);
}
#contests-msg {
    background-color: rgba(251, 8, 8, 0.5);
    border-bottom: 1px solid #e53838;
}
#avatar{
    background-color: rgba(255, 255, 255, 0);
}
.responsive-table thead th {
    background-color: rgba(255, 0, 0, 0.76);
    border: 1px solid #f00;
}
.sbuttonA, .sbuttonB {
    background-color: #F83F3F;
}
.icheckbox, .iradio {
    background: url(https://puu.sh/qCsJF.png) no-repeat;
}
.responsive-table tbody tr:nth-of-type(2n) {
    background-color: RGBA(236, 169, 169, 0.45);
}
.sbox1, .sbox2 {
    background-color: rgba(255, 255, 255, 0.33);
    border: #FF0202;
}
.sbox1 > h2, .sbox2 > h2 {
    color: #FFF;
    background-color: RGBA(255, 0, 0, 0.71);
}
.sbox2 {
    background-color: rgba(245, 236, 236, 0.6);
}
#details-right > section {
    background-color: rgba(207, 186, 186, 0.38);
    border:  #F00;
}
#details-outer #details-inner > section.accordion > h2::after {
    background-color: RGBA(255, 0, 0, 0.67);
}
#forumindex > li.readed {
    background-color: RGBA(252, 197, 197, 0.68) !important;
}
.forumC6 {
    background-color: RGBA(247, 29, 29, 0.51);
}
.forumC8 {
    background-color: RGBA(255, 0, 0, 0.56);
}
#forumindex > li:nth-child(2n+1) {
    background-color: RGBA(255, 215, 215, 0.89);
}
#forumindex > li {

    background-color: rgba(255, 0, 0, 0.07);
}
.forumC57 {
    background-color: RGBA(254, 198, 198, 0.7);
}
.forumC1 {
    background-color: RGBA(254, 198, 198, 0.7);
}
.forumC2 {
    background-color: RGBA(254, 198, 198, 0.7);
}
.forumC3 {
    background-color: RGBA(254, 198, 198, 0.7);
}
.forumC4 {
    background-color: RGBA(254, 198, 198, 0.7);
}
.forumC5 {
    background-color: RGBA(254, 198, 198, 0.7);
}
.forumC7 {
    background-color: RGBA(254, 198, 198, 0.7);
}
.forumC9 {
    background-color: RGBA(254, 198, 198, 0.7);
}
#forumCategories > li a.bold {
    background-color: rgba(255, 255, 255, 0.41);
}
#forumCategories > li a {
    background-color: RGBA(243, 213, 213, 0.56);
}
#notifications-overview > li.readed {
    background-color: rgba(245, 245, 245, 0.59);
}
#notifications-overview > li {
    background-color: RGBA(255, 255, 255, 0.45);
}

LG
Beitrag wurde zuletzt am 23.10.2016 21:23 geändert.
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: SkyFief
V.I.P.
#49
So habe mein Layout mal komplett überarbeitet. Das ganze basiert jetzt auf der Seitenlayout-Vorlage.

Anime
AuehpDA.jpg
Forum

Beitrag wurde zuletzt am 30.11.2016 15:02 geändert.
    • ×1
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0

Kommentare (2)

Zeige alle Kommentare
Avatar: クロキューThemenstarter#50
Viel ist bisher nix passiert, aber die Änderungen von aniSearch sind übernommen worden, was dann doch ein wenig anders aussieht. ^^
Neben der Übernahme der Änderungen (hoffe, hab nix übersehen), hab ich die Transformation der Sidebar geändert bzw. entfernt, jetzt sind die nicht mehr schief.
Die Box-Shadow-Effekte sind aber geblieben.
Eine andere, vielleicht auffällige Änderung ist, dass das Logo geändert wurde. Ansonsten ist bisher nix spannendes passiert, außer vielleicht kleine Fixe usw.

Falls jemand Interesse hat, der Code lässt sich hier finden: Github

Forum (nur Auflistung)

Manga-Liste

Profil
    • ×1
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: SkyFief
V.I.P.
#51
So, habe heute mal etwas rumgebastelt, ist bei weitem noch nicht fertig und überlege auch noch was ich davon übernehme. Hätte das Ganze auch lieber wieder als dunkles Layout, aber besser als bisher.

Beitrag wurde zuletzt am 16.03.2017 20:59 geändert.
    • ×1
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0

Kommentare (2)

Avatar: Ronsterwars
PR-Manager
#51.1
Gefällt mir sehr minimalistisch und einfach :)
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: SkyFief
V.I.P.
#52
So, hab mal etwas gebastelt und diesmal den Header umgestaltet. Dass man drei Navigationsleisten plus den Breadcrumb direkt untereinander hatte fand ich etwas überladen, deshalb nun diese Verschiebung. Das ganze verwendet CSS Grid, wird also nur von aktuellen Browser unterstützt. :/

https://i.imgur.com/2TcaoXK.jpg
https://i.imgur.com/kWmcKrj.jpg

    • ×0
    • ×4
    • ×0
    • ×0
    • ×0
    • ×0

Kommentare (5)

Zeige alle Kommentare
Avatar: SkyFief
V.I.P.
#53
~
aTNW4yE.jpg
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0

Kommentare (2)

Zeige alle Kommentare
Avatar: Ronsterwars
PR-Manager
#54
Nach langem hin und her und mehreren Ideen von SkyFief habe ich nun endlich eine Lösung für meine Bildanimation im Hintergrund mit der ich zufrieden bin :D
Eine Animation von Bildern nur mit CSS die nicht zu viel Performance benötigt ist dann doch nicht so einfach :D

Durch ändern der Bildlinks kann ich auch schnell und einfach die Bilder ändern.

Bilder










Um die Animation / transition zu sehen müsst ihr auf meine Profilseite gehen.
    • ×1
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: SkyFief
V.I.P.
#55
details-subsB rmk, es ist einfach schwierig so viele nav leisten unterzubringen^^
https://i.imgur.com/17eDEZy.jpg
17eDEZy.jpg
Beitrag wurde zuletzt am 25.03.2018 17:23 geändert.
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: クロキューThemenstarter#56
Habe mein Style jetzt auch wieder aktualisiert, da sich durch die Änderung einige Dinge geändert haben. Im Zuge dessen habe ich auch ein wenig Veränderung an Komponenten gemacht.

https://abload.de/img/commentsgmonw.png
https://abload.de/img/fmenun5obj.png
https://abload.de/img/navikwp71.png
https://abload.de/img/searchwzow1.png

Ansonsten hat sich zum letzten Mal nicht allzu viel geändert.

[CSS-Feature] Zeigt her eure Styles (Mein Beitrag)
    • ×2
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: SkyFief
V.I.P.
#58
Mockup

CSS
#mainnav {
background-color:#36332e80;
}
#mainmenu>li.hover .menuitem {
background-color:#36332e;
}
#mainmenu>li.active {
border-radius:0px;
}
#avatar.hover .menuitem,#mylists.hover .menuitem {
background-color:#36332e;
}
#footer {
background-color:#36332e;
color:lightgray;
}
#footer a {
color:lightgrey;
}
#breadcrumb li a {
color:grey;
background-color:#fff;
}
#breadcrumb li a::before {
border: 0 solid #fff;
border-left-color:transparent;
border-width: 13px 7px;
}
#breadcrumb li:nth-child(even) a {
background-color:#fff;
}
#breadcrumb li:nth-child(even) a:before {
border-color:#fff;
border-left-color:transparent
}
#breadcrumb li:nth-child(even) a:after {
border-left-color:#fff;
}
#breadcrumb li a:after {
border-left-color:#fff;
}
#start {
background-color:#36332e;
}
#start.start_details {
border-bottom:none;
}
#start h1 {
color:white;
}
#start span.subheader {
color:lightgrey;
}
#details-subs>li,#details-subsB>li {
background-color:#e56038;
border:1px solid #e56038;
margin-bottom:0px;
margin-right:1px;
border: none;
}
#details-subsB {
display: flex;
flex-wrap: wrap;
}
#details-subsB>li {
border-left:3px solid #e56038;
border-bottom: none;
background-color:#eaded0;
flex: 1 0 auto;
padding-bottom: 3px;
padding-top: 2px;
}
#details-subsB>li:hover>a,#details-subsB>li.active>a {
border-radius:0px;
background-color:#e56038;
}
#content-inner>section,#content-inner>header {
background-color: #e5603812;
border-left: 3px solid #36332e;
}
#content-inner>section>h2,#content-inner>header>h2 {
color:#444;
padding:2px 10px 6px 10px;
font-size:1em;
background-color:#eaded0;
border-top:none;
}
#content-sidebar {
background-color:transparent;
}
#content-sidebar>section {
margin:0px 5px 5px 0px;
border-radius:0px;
background-color: #dbcfbd;
}
#content-sidebar>section>h2 {
background-color:#36332e;
}
#page-action>li {
margin:0px 5px 5px 0;
height:28px;
background-color:#fff;
color:black;
}
#page-action>li:before {
top:5px;
}
#page-action>li:hover {
background-color:#fff;
}
.comment {
border: none;
margin-bottom: 5px;
border-left: 3px solid #36332e;
margin-left: 2px;
border-radius: 0;
}
#toTop {
background-color:#e56038;
}
#myname {
display: block;
}
@media screen and (max-width:800px) {
#infodetails,.sectiondetails,#details-subs {
display:flex;
flex-wrap:wrap
}
#infodetails > li,.sectiondetails > li,#details-subs > li {
min-width:107px;
flex:1 0 auto;
}
#details-subs > li {
margin-top: 1px;
}
}

https://i.imgur.com/6zZE0My.jpg
6zZE0My.jpg
    • ×1
    • ×1
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: SkyFief
V.I.P.
#59
Mal ein Update, dass Ganze ist nicht mehr ganz so aufwändig wie früher, um das Pflegen einfacher zu machen. Lediglich der Header ist anders aufgebaut, um das Suchen zu vereinfachen und ihn vor allem kleiner zu machen damit er nicht soviel von der Seitenhöhe einnimmt. Somit ist das Design in vielerlei Hinsicht ein Kompromiss und könnte sicherlich mehr Feinschliff vertragen.

https://i.imgur.com/AAG8XVw.png
xX2Bh5j.png
    • ×2
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0