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 ^^
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;
}
Comentarios (1)
Man kann die mittlere Breite fix setzen (width: 750px), dann müsstest du aber jegliche dynamischen Elemente überarbeiten, wenn das überhaupt möglich ist (und auch die maximale Breite ändern). Wenn es dir nur um große Auflösungen geht müsstest du Fragen ob man das Minimum für die maximale Breite weiter runter stellt, dann wird ja auch der mittlere Teil kleiner.