[CSS-Feature] Zeigt her eure Styles

Lass den Künstler in Dir frei!

[CSS-Feature] Zeigt her eure Styles

- 1
- 2
- 3
- 4
Seite 2 von 4

aniSearchler

13. Jan 2016

So mich etwas dunkler eingerichtet und verfeinert, ging recht fix.
Anime/User-Menü

Pfeil nach oben: toll was man damit anstellen kann

Frage: Kann man via CCS-Code auch einstellen, dass die Elemente (gelber Rahmen)links sich eben nicht der Seitengröße anpassen, sondern nur eine feste Breite von z.B 750px behält? Diese Seitenanpassung stört mich, was im alten Design besser war. Die Boxen rechts rutschen mit und gibt mehr Hintergrund, aber Größe bleibt.
Ka-chan is happy...Mein Fehler..immer was vergessen.

Beitrag wurde zuletzt am 13.01.2016 16:37 geändert.

Kommentare (1)

Zeige alle Kommentare

AsakiV.I.P.

15. Jan 2016

So, ich hab nun doch ein anderes Layout gemacht, an dem Rot hab ich mich schon satt gesehen, deswegen bin ich jetzt mal an ein dunkelblaues Design ran und das gefällt mir doch schon recht gut, sodass ich das jetzt erstmal eine Weile belasse.

Insgesamt gefällts mir ganz gut und es ist dann jetzt auch komplett fertig, zumindest was die Befehle im Profil angeht, an die außerhalb des Profils bin ich noch nicht ran gegangen, da ich derzeit das Design für "alle Seiten anweden" auch deaktiviert habe.

[...]

conalyModerator

15. Jan 2016

Hi,
so, bin nun endlich auch fertig. Ich habs simpel blau gestaltet. Selbst für einen eigenen Header war ich zu faul, hab diesen nur an 2560px breite angepasst

Index:

Forenübersicht

Forenposts

Anime

Eine Kleinigkeit seh ich noch grad... Der Button zum hochscrollen is noch nich gefärbt. Wird auch gleich gefixt^^

Beitrag wurde zuletzt am 16.01.2016 14:08 geändert.

クロキューV.I.P.

17. Jan 2016 – Themenstarter

Kleines Update. Ich zeige mal nur die Hauptseite, letztlich blieb der Rest ähnlich und was auf der Hauptseite anders zu sehen ist, findet sich auf den anderen Seiten auch wieder. ^^
Ist alles aber noch 'ne "Testphase". Muss alles noch 'n ticken stimmiger gemacht werden.

Durch die hinzugefügten Box-shadow-Geschichten, konnte das Hauptmenü (Animes, Mangas etc. pp.) auch angepasst werden und ist nicht mehr orange.

Das blaue Teil, dass 'n wenig schiefhängt, wird durch ein Hover ausgeführt, also wenn man mit der Maus drüberfährt. Bin da aber auf der Suche nach vielleicht was lustigerem. ^^

xShadowLightV.I.P.

17. Jan 2016

Bei mir gabs auch noch ein paar kleine Änderungen. Neben den Sachen, die neu dazu gekommen sind, wie box-shadow und nth-child, habe ich auch mal ein Hintergrundbild, sowie meinen alten Footer hinzugefügt. Hier mal meien Startseite (oben, mittig und unten).

Kommentare (1)

Zeige alle Kommentare

NatsukiMiwaV.I.P.

19. Jan 2016

würde gerne mein layout wieder so haben wie vorher, nur krieg ich es mit den css nicht so recht gebacken :/ header kommt das bild, aber beim grossen hintergrund hab ich so meine probs ~~" da seh ich dann nur die farbe anstatt das bild...bin net so gut in css, war ich nie xD" kann mir jmd dabei bitte behilflich sein? ^^""

Kommentare (2)

Zeige alle Kommentare

Mahou ShounenFreischalter

19. Jan 2016

Ich hatte mein Design vor ein paar Tagen noch einmal ein bisschen verbessert.

Code courtesy of xShadowLight & klose91:

#topnav>li:first-child>a { /*Username Hintergrund*/
background-color: rgba(113,189,161, 0.39);
}
#header:before{ /*Header*/
background-image: url("http://i.imgur.com/7Zwd2En.jpg");
opacity: 1;
}
#header{ /*Abschlusstrich des Headers*/
border-bottom: 2px solid #000000;
}
#content { /*Seitenhintergrund*/
background-image: url("http://i.imgur.com/VYHYm3n.jpg");
}
a { /*Globale Linkfarbe*/
color: rgb(000, 000, 000);
}
#avatar .menuitem { /*Avatar Hoverfenster*/
background-color: rgb(95, 165, 140)!important;
outline: 1px solid rgb(000, 000, 000)!important;
}
#avatar .menuitem>li:hover { /*Avatar Hoverfenster Menüpunkte Hover*/
background-color: rgb(113, 189, 161)
}
#avatar .logout { /*Logout*/
background-color: rgb(95, 165, 140)
}
#usercp.hover { /*UserCP Hover*/
background-color: rgb(95, 165, 140)
outline: 1px solid #000000;
}
#usercp.hover .menuitem { /*UserCP Hoverfenster*/
background-color: rgb(95, 165, 140)
outline: 1px solid #000000;
}
#usercp .menuitem>li:hover { /*UserCP Hoverfenster Menüpunkte Hover*/
background-color: rgb(113, 189, 161)
}
.menuitem>li span { /*Menüpunkte Schrift*/
color: #000000
}
#mainnav{ /*Navigationsleiste*/
background-color: rgba(113, 189, 161, 0.5);
}
#mainnav .menu>li.active { /*Navigationsleiste aktiv*/
background-color: rgba(95, 165, 140, 0.75);
}
#mainnav .menu>li.hover .menuitem { /*Navigationsleiste Hover*/
background-color: rgba(113, 189, 161, 0.99);
outline: 1px solid #000000;
}
#mainnav .menu>li .menuitem>li:hover { /*Navigationsleiste Hoverfenster Menüpunkte Hover*/
background-color: rgba(95, 165, 140, 0.99);
}
#mainnav .menu>li .menuitem>li:hover span { /*Navigationsleiste Hoverfenster Menüpunkte Hover Textfarbe*/
color: #FFF;
}
#searchbox { /*Suchleiste*/
background-color: rgba(113, 189, 161, 0.99);
border-bottom: 2px solid #000000;
}
#searchbox #searchbar { /*Suchfeld*/
border: 2px solid #000000;
}
#searchbox #searchbar>li:last-child:before { /*Die Pfeile da*/
color: #000000;
}
#start { /*Rand*/
border: 1px solid #000000;
}
#start #details-subs, #start #details-subsB { /*Tabs*/
background-color: rgb(95, 165, 140)
}
#start #details-subs>li>a, #start #details-subsB>li>a { /*Tabs Rand*/
border: none
}
#details-outer #details-inner>section>h2 { /*Überschriftenleiste*/
background-color: rgb(95, 165, 140)
border-top: 3px solid rgb(95, 165, 140)
color: #FFFFFF;
}
#details-outer #details-inner>section>h2>a { /*Überschriftenleiste Links*/
color: #FFF;
}
#details-outer #details-inner>section.accordion>h2:after {
background-color: rgb(95, 165, 140)
}
#details-right>section>h2{ /*Boxen rechts Überschrift*/
background-color: rgb(95, 165, 140)
}
#details-right>section { /*Boxen rechts*/
background-color: none
border: 1px solid #000000;
}
article.comment>h2:first-of-type { /*PN Überschrift*/
background-color: rgb(95, 165, 140)
}
#footer { /*Footer Rand*/
border-top: 2px solid #000000;
background-color: rgba(113, 189, 161, 0.99);
}
#footer h4 { /*Footer Überschrift*/
border-bottom: 1px solid #000000;
color: #000000;
}
#footer a { /*Footer Links*/
color: #000000;
}
.responsive-table thead th { /*Warteliste Überschrift*/
background-color: rgb(95, 165, 140)
border: 1px solid #000000;
}
#page-action>li { /*Profilbuttons*/
border: 1px solid #000000;
color: #000000;
}
#page-action>li:hover { /*Profilbuttons Hover*/
background-color: rgb(000, 000, 000)
}
#page-action>li:before { /*Profilbuttons Symbole*/
background-color: rgb(000, 000, 000)
}
.sbuttonA, .sbuttonB { /*Buttons*/
background-color: rgb(95, 165, 140)
}
.sbuttonA:hover, .sbuttonB:hover { /*Buttons Hover*/
background-color: rgb(113, 189, 161)
}
#logo {
background-image: url('http://i.imgur.com/skDtMiS.png') !important;
width: 200px !important;
}
#mainnav .menu>li.hover {
background-color: rgb(95, 165, 140);
}

VendelAdmin

19. Jan 2016

Bezüglich Screenshots machen. Verwendet dafür doch ggf. Ein Chrome Addon wie "Full Page Screen Capture" oder FireFox Addon wie "Fireshot".

BeleggrodionFreischalter

19. Jan 2016

So ich dachte ich Poste auch mal mein persönliches Design. Fertig bin ich noch lange ned fertig mit anpassen meines Layouts aber man kann ja mal seinen aktuellen Status posten ^^

Startseite

Forum

Anime

Spoiler

Und wer sich für den aktuellen CSS-Code interessiert, der findet das gewurstel (Ist ned aufgeräumt) hier:

/********************************************************************************
 * (c) 2016 Beleggrodion
 *
 * Tipps:
 * - Coloring: http://www.hexcolortool.com/
 *******************************************************************************/



#content {
 background: #f9f4ea url("images/member/upload/0/447/images/anisearch-bg.jpg") top left scroll fixed !important;
}

#header::before {
 background: #00a5cb url("images/member/upload/0/447/images/header.png") no-repeat scroll 50% 0 / cover ;
}

a#logo {
 background: rgba(0, 0, 0, 0) url("images/member/upload/0/447/images/anisearch.png") no-repeat scroll 0 0 / cover !important;
}

/* Farbe #1 */
#top {
 background-color: #02558e !important;
}

/* Farbe #2 */
#sidenav-main, #mainnav .menu>li.hover, #mainnav .menu>li.hover,
.menuitem, #mainnav .menu>li.active, #mainnav .menu>li .menuitem, 
#avatar>span, #avatar .menuitem, #avatar.hover, #usercp .menuitem, 
#usercp.hover, #sidenav-main,.sbuttonA:hover,.sbuttonB:hover, 
#ratingBox>div #ratingSettings tr>td #eplus:hover, 
#ratingBox>div #ratingSettings tr>td #maxEpisodes:hover, 
.pagenav>a:hover, .pagenav>.pagenav-current, #indexABC>li.active,
#indexABC>li:hover, .ui-slider .ui-slider-handle,
.ui-datepicker .ui-datepicker-header, #mainnav .menu > li.active
{
 background-color: #00a5cb !important;
}

/* Farbe #3 */
#mainnav .menu>li .menuitem>li:hover,
#sidenav-main > .menu > li .menuitem > li:hover,
#usercp .menuitem>li:hover,
#avatar .menuitem>li:hover
{
 background-color: #8cd3ea !important;
}

/* Rahmen bei Menü */
#mainnav .menu>li.hover, #mainnav .menu>li.hover .menuitem, 
#avatar.hover, #usercp.hover, #mainnav .menu > li.hover,
{
 box-shadow: -1px -1px 0px 0px #00a5cb,1px -1px 0px 0px #00a5cb,1px 1px 0px 0px #00a5cb,-1px 1px 0px 0px #00a5cb;
 moz-box-shadow: -1px -1px 0px 0px #00a5cb,1px -1px 0px 0px #00a5cb,1px 1px 0px 0px #00a5cb,-1px 1px 0px 0px #00a5cb;
 o-box-shadow: -1px -1px 0px 0px #00a5cb,1px -1px 0px 0px #00a5cb,1px 1px 0px 0px #00a5cb,-1px 1px 0px 0px #00a5cb;
 webkit-box-shadow: -1px -1px 0px 0px #00a5cb,1px -1px 0px 0px #00a5cb,1px 1px 0px 0px #00a5cb,-1px 1px 0px 0px #00a5cb;
}

#avatar.hover .menuitem, #usercp.hover .menuitem {
 outline: 1px solid #00a5cb !important;
}

#footer {
 border-top: 2px solid #00a5cb !important;
}

a, .afake, .selectbox>li>a.active,.gallery>li>a .title>div, 
.covers>li>a .title>div, #ratingBox>div>header #ratingQuestion:hover, 
#ratingBox>div>footer #ratingMode, #ratingBox>div #ratingSettings tr>td:last-child>.setDateToday, 
#cstar-rating>div, .cstar-reset, #flowchart g.node .label, 

{
 color: #00a5cb !important; 
}

/* Text Farbe #1 */
.responsive-table thead th > a,
#start #details-subs > li > a.active, #start #details-subsB > li > a.active,
#start #details-subs > li > a, #start #details-subsB > li > a,
.menuitem > li a, #topnav > li:first-child > a,
.pagenav > a, .pbutton, .tabs, ul.cloud > li > a,
div.mtA a#newthread, .ui-datepicker-header a
{
 color: #fff !important;
}

.urgent-msg, #contests-msg {
 border-bottom: 1px solid #00a5cb !important; 
}

#header {
 border-bottom: 2px solid #00a5cb !important; 
}

.sbuttonA:hover,.sbuttonB:hover, #ratingBox>div #ratingSettings tr>td #eplus:hover,
#ratingBox>div #ratingSettings tr>td #maxEpisodes:hover, .pagenav>a:hover, 
.pagenav>.pagenav-current, 
{
 border-color: #00a5cb !important;
}

.ui-slider, .ui-datepicker a.ui-state-active, {
 border: 1px solid #00a5cb !important;
}

.ui-slider .ui-slider-handle {
 border: 2px solid #00a5cb !important;
}

.ui-datepicker {
 border: 1px solid #00a5cb !important;
}

@media (min-width: 900px)
{
 .responsive-table tbody th[scope="row"]>a
 {
 color: #00a5cb !important;
 }
}

/* color 2 */
#start, #start #details-subs>li>a,#start #details-subsB>li>a, 
#details-right>section, 
{
 border: 1px solid #6dcae3 !important;
}

#start #details-subs,#start #details-subsB, #details-outer #details-inner>section.accordion>h2:after,
#details-right>section>h2, article.comment>div.comments[data-popup="true"]>h2:after, 
#searchbox {
 background-color: #6dcae3 !important;
}

/* color 3 */
#start #details-subs > li > a.active, #start #details-subsB > li > a.active {
 border: 1px solid #fff !important;
}

#start #details-subs > li > a:hover, #start #details-subsB > li > a:hover {
 border: 1px solid #fff !important;
 color: #000 !important;
}


#start #details-subsB {
 background-color: #007fa2 !important;
}

#start #details-subsB > li > a {
 border: 1px solid #007fa2 !important; 
}

.menuitem > li span {
 color: #bee7f4 !important; 
}

.menuitem > li:hover span { color: #000 !important; }

#mainnav .menu > li.active {
 background-color: #00a5cb !important;
}

.responsive-table thead th,
{
 background-color: #0ab4d5 !important;
}
.responsive-table thead th,

{
 border: 1px solid #0ab4d5 !important;
}

.responsive-table tbody tr
{
 border: 1px solid #0ab4d5 !important;
}

@media (min-width: 900px)
{
 .responsive-table tbody td
 {
 border-bottom: 1px solid #0ab4d5 !important;
 }
}

.pagenav > a {
 background-color: #7dcde7 !important;
 border: 1px solid #7dcde7 !important;
}

.pbutton, .tabs, #tabs-content-filters {
 background-color: #7aa4d6 !important; 
}

.tabs > li, 
.pbutton-container{
 border: 1px solid #7aa4d6 !important;
}

.tabs > li.hover {
 border: 1px solid #fff !important;
}

#tabs-content-filters {
 background-color: #7aa4d6 !important;
}

#footer a {
 color: #ababab !important;
}

#details-outer #details-inner > section > h2 {
 background-color: #bee7f4;
 border-top: 3px solid #6dcae3 !important;
 color: #444;
}

.sbuttonA, .sbuttonB {
 background-color: #7aa4d6 !important;
 color: white !important;
}


#searchbox #searchbar {
 background-color: #f6f6f6 !important;
 border: 2px solid #007fa2 !important;
}


#searchbox #searchbar > li:last-child::before {
 color: #007fa2 !important;
}

article.comment > header > div.cpanel > span::before, 
article.comment > header > div.cpanel > ul {
 background-color: #7aa4d6 !important;
}

article.comment > header > div.cpanel > ul li:hover {
 background-color: #7dcde7 !important;
}

#mainnav {
 background-color: rgba(122 , 164, 214, 0.5) !important;
}

#topnav > li:first-child > a {
 background-color: rgba(122 , 164, 214, 0.3) !important;
}


article.comment:nth-child(odd) {
 background-color: rgba(245, 243, 236, 0.8); !important;
 border: 1px solid #6dcae3 !important;
}

article.comment:nth-child(even) {
 background-color: rgba(235, 245, 238, 0.8); !important;
 border: 1px solid #8cd3ea !important;
}

article.comment .comments {
 background-color: rgba(190, 231, 244, 0.8); !important; 
}

article.comment > div.comments > h3 {
 background-color: #6dcae3; !important; 
}
article.comment > div.comments {
 border: none; 
}


.inputBox-Header {
 background: #cfdfef none repeat scroll 0 0 !important;
 border: 1px solid #ffc696 !important;
}

.inputBox-Header > .inputBox-List {
 background: #9fe5df none repeat scroll 0 0;
}

#footer h4 {
 border-bottom: 1px solid #007fa2 !important;
}

.forumC0 {
 background-color: #7aa4d6 !important;
}

div.mtA a#newthread:hover {
 background-color: #00a5cb !important;
}

section.accordion {
 border: 1px solid #6dcae3 !important;
 background-color: rgba(255, 255, 255, 0.9);
 border-radius: 4px;
}

#forumindex > li: {
 background-color: rgba(245, 243, 236, 0.9);
}

/*
div#details-inner section {
 border: 1px solid #6dcae3 !important;
 background-color: rgba(255, 255, 255, 0.9);
 border-radius: 4px;
}
*/

a.ui-state-hover {
 color: #000 !important;
}

Beitrag wurde zuletzt am 19.01.2016 19:28 geändert.

aniSearchler

29. Jan 2016

Vorläufig bleibt das erst mal so...

Startseite

Forenübersicht

Forenpost

Anime

Yukki

29. Jan 2016

Hier mal mein Design, was seit gestern fertig ist

Startseite

Profil

Anime

Forum

クロキューV.I.P.

30. Jan 2016 – Themenstarter

'n kleines Update mit ein wenig mehr Farbe. ^^
Die neue, blaue Farbe wird vermutlich noch etwas mehr an anderen Stellen eingearbeitet, sie soll das dunkle so ein wenig mehr ergänzen. ^^

Animeseite

Bewertungsseite

Animeliste

Style des CSS-Editors

Favoriten-Seite

Startseite

Profilseite

Bewertungspopup

Spam-chan als Beispiel für einen Thread

Anime-Toplist

@Screenshots:
Vielleicht auch naisu zu wissen. Firefox kann so was auch von Haus aus, da braucht es keine Addons für.
Man kann dann entscheiden, ob man nur den sichtbaren Teil, oder der ganzen Seite haben will.
Das geht bei Firefox dann so:
"Umschalt+F2" drücken, dann kommt unten eine Leiste, und da kann man dann bspw. eingeben:
screenshot meinBild.png => Nur sichtbarer Teil
screenshot meinBild.png --fullpage => wie fullpage schon sagt, die ganze Seite

TaZDB-Helfer

01. Feb 2016

Sneak peek (still alpha version).

TaZDB-Helfer

03. Feb 2016

Sneak peek (beta)

Mich hatte bei den Covern und Charakteren gestört, dass die Bilder vom Schriftzug verdeckt werden, darum habe ich das umgekehrt. Nun wird der Name/Titel nur angezeigt, wenn die Maus drüber zeigt und blendet sich nach 3s dann wieder aus.

/* Hover Cover Reversed -------------------------------------------*/

.covers>li>a .title {opacity: 0; transition: ease 3s all 350ms;}
.covers>li>a:hover> .title,
.covers>li>a:hover> .rank {opacity: 1; transition: all 0ms ease 0s;}
.covers>li {background-color: rgb(255, 252, 221);}
.covers>li> .genre {display: none;}

Auch fand ich die Thumbs bei den Screenshots zu klein, also hab ich die etwas vergrößert.

/* Bigger Screenshots */

#details-outer #details-inner > section #screens > a {
min-height: 151px !important;
min-width: 270px;}
#details-outer #details-inner > section #screens {
height: 160px;}

Mit dem Cover auf der linken Seite bin ich noch nicht ganz zufrieden, aber funktioniert erstmal.

/* ---------- Cover to the left ---------------------------------- */
#start ul.cloud {}
#start > div h3 {display: none;}

#start .textblock,
#start .missing {display: none;}
#details-outer #details-inner > section #cover{
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
border-bottom-width: 0;
margin: -125px 0 -190px -270px; /* move cover to the left */
padding-right: 0;
width: 220px; /*slightly bigger cover */
box-shadow: 0 0 0 0 rgba(51, 51, 51, 0);}

/* Sidebar down for Cover */
#content .sidebarLeft > #details-right { margin-top: 350px; }

Der Footer ist noch in Arbeit.

Beitrag wurde zuletzt am 03.02.2016 11:57 geändert.