Present your custom CSS

Here you can suggest alternative layouts or changes to visual elements.

Present your custom CSS

  •  
Avatar: TaZ
DB-Helper
Thread Creator#1

Spoiler Design

$spoiler: gray; /* Set color */

.spoiler:hover {background-color: transparent;}
.spoiler, .spoiler-visible {border: 1px solid $spoiler;}
.spoiler {background: transparent;}
.spoiler::before {color: $spoiler;}
.spoiler::after {display: none;} /* Remove "+" */

Remove Path (Anime, Manga, Movie, Seiyuu, Company)

#start > h1 { font-size: 0px;}
#htitle { font-size: 18px !important;}

xpdqky.jpgccbsny.jpg

Bigger Screenshots (will crop thumbnails to 16:9)

#details-outer #details-inner > section #screens > a {
min-width: 310px !important;
min-height: 174px !important;
}
#details-outer #details-inner > section #screens {
min-height: 180px !important;} /* For element containing screens*/

pzepku.jpgbbtrgq.jpg

Reverse Hover (Characters, Anime,...)

.gallery>li>a .title,
.covers>li>a .title {opacity: 0; transition: ease 3s all 350ms;}

.gallery>li>a:hover> .title,
.gallery>li>a:hover> .rank,
.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;} /* Removes genre from covers */

  • Name disappears on hover.
    onmoog.jpg
  • Name appears on hover.
    knffdl.jpg

  • onmoog.jpgName disappears on hover.
  • knffdl.jpg
    Name appears on hover and genre removed.

Rating Pop-up

$ratingPopUp: #a55941;
$ratingPopUpShadow: transparent;
$ratingPopUpStars: #a55941;

#ratingBox { max-width: 800px; margin-left: 500px;} /* Move PopUp to the right */
#ratingBox > div {
background-image: url("images/member/upload/1/1518/images/RatingPopUp.jpg");
background-size: cover; }
#ratingBox > div > header {
color: $ratingPopUp;
background-color: transparent;
text-shadow: 2px 0 0 $ratingPopUpShadow;}
#ratingBox > div > header > h2 + div {
color: $ratingPopUp;
text-shadow: 2px 0 0 $ratingPopUpShadow;}
#ratingBox > div #ratingSettings tr > td:first-child {
color: $ratingPopUp;
font-size: 1.0em;
text-shadow: 2px 0 0 $ratingPopUpShadow; }

#cstar-rating > div {color: $ratingPopUpStars; }
.ui-slider .ui-slider-handle {
background-color: $ratingPopUpStars;
border: 2px solid $ratingPopUpStars; }
.ui-slider {
border: 1px solid $ratingPopUpStars; }

.calendarA { display: none;} /* removes new calendar option */
jzqbhd.jpg

One-line Information

#infoline {display: block;}
#infodetails {display: none;}
wmpwge.jpg
fvdxfc.jpg

Remove row from rating


#ratingstats>tbody>tr:first-of-type { display:none }
cmvofd.jpgxerzca.jpg

Database input: smaller rows

.cloud { display: inline-block;
margin-left: 10px;
vertical-align: middle;} /* Puts categories on same line as name */

  • xyjiea.jpg
  • kbcezo.jpg
    • ×3
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0

Comments (1)

Display all comments
Avatar: martin m²#3
@TaZ die Style vorlagen von den anderen Designs (https://www.anisearch.de/colors) bei den weiteren designs.

Ich gebe mal meines als CSS-File frei (http://b95-ani.redirectme.net/aS/anisearch.css) da siehste mal wie durcheinander das ist ;)

Wenn du magst kannst du es ja mal testen.

Und mal Danke für die Links, werde mir mal alle beide ansehen.

LG
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0

Comments (1)

Display all comments
Avatar: SkyFief#4
Plus -> arrow, arrow only on hover on first level, #details-right width reduced to 250px

No text, bigger symbol, symbol in “Header” -> less space between header and content

Top “New Thread” removed -> no space

Profile infobar removed

Answer button only if open, comment and quote always shown

Info text removed, list
Post was last edited on 24.02.2017 14:33.
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: SkyFief#5
Post panel hover

ul.post-panel:hover > li {
    &.quote, &.add-comment, &.report, &.addemicon1, &.addemicon2, &.addemicon3, &.edit, &.delete, &.newreply {
        display: inline-block;
    }
    &.menu {
        display: none;
    }
}
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: TaZ
DB-Helper
Thread Creator#6
TaZ

Reverse Hover (Characters, Anime,...)

.gallery>li>a .title,
.covers>li>a .title {opacity: 0; transition: ease 3s all 350ms;}

.gallery>li>a:hover> .title,
.gallery>li>a:hover> .rank,
.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;} /* Removes genre from covers */

  • Name disappears on hover.
    onmoog.jpg
  • Name appears on hover.
    knffdl.jpg

  • onmoog.jpgName disappears on hover.
  • knffdl.jpg
    Name appears on hover and genre removed.
Doesn't work anymore, instead use:

/* Hover Cover Reversed -------------------------------------------*/
.covers>li>     .genre    {display: none;}
.covers>li                {background-color: rgb(255, 252, 221);}

.gallery> li > a >       .gradient,
.covers > li > a >       .gradient {opacity: 0; transition: ease 3s all 350ms;}
.gallery> li > a:hover > .gradient,
.covers > li > a:hover > .gradient {opacity: 1; transition: all 0ms ease 0s;}
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
Avatar: SkyFief#7
replace vanilla stars with font awesome icons
/***** STARS ******************************************************************/
.substar1, .substar2, .substar3, .substar4, .substar5, .substar6 {
                right: -22px;
                top: 4px;
                font-size: 12px;
}
.star0.hcenter {
                margin-top: -3px;
                padding-bottom: 7px;
}
 
.star0, .star1, .star2, .star3, .star4, .star5, .star6, .star7, .star8, .star9, .star10, .star1_1, .star2_1, .star3_1, .star4_1, .star5_1, .star6_1, .star7_1, .star8_1, .star9_1, .star10_1, .star1_2, .star2_2, .star3_2, .star4_2, .star5_2, .star6_2, .star7_2, .star8_2, .star9_2, .star10_2, .star1_3, .star2_3, .star3_3, .star4_3, .star5_3, .star6_3, .star7_3, .star8_3, .star9_3, .star10_3, .star1_4, .star2_4, .star3_4, .star4_4, .star5_4, .star6_4, .star7_4, .star8_4, .star9_4, .star10_4, .star1_5, .star2_5, .star3_5, .star4_5, .star5_5, .star6_5, .star7_5, .star8_5, .star9_5, .star10_5, .star1_6, .star2_6, .star3_6, .star4_6, .star5_6, .star6_6, .star7_6, .star8_6, .star9_6, .star10_6, .xstar1_1, .xstar2_1, .xstar3_1, .xstar4_1, .xstar5_1, .xstar6_1, .xstar7_1, .xstar8_1, .xstar9_1, .xstar10_1, .xstar1_2, .xstar2_2, .xstar3_2, .xstar4_2, .xstar5_2, .xstar6_2, .xstar7_2, .xstar8_2, .xstar9_2, .xstar10_2, .xstar1_3, .xstar2_3, .xstar3_3, .xstar4_3, .xstar5_3, .xstar6_3, .xstar7_3, .xstar8_3, .xstar9_3, .xstar10_3, .xstar1_4, .xstar2_4, .xstar3_4, .xstar4_4, .xstar5_4, .xstar6_4, .xstar7_4, .xstar8_4, .xstar9_4, .xstar10_4, .xstar1_5, .xstar2_5, .xstar3_5, .xstar4_5, .xstar5_5, .xstar6_5, .xstar7_5, .xstar8_5, .xstar9_5, .xstar10_5, .xstar1_6, .xstar2_6, .xstar3_6, .xstar4_6, .xstar5_6, .xstar6_6, .xstar7_6, .xstar8_6, .xstar9_6, .xstar10_6 {
                background: none;
                text-align: left;
                width: 105px;
                &:before {
                               font-family: FontAwesome;
                               font-size: 22px;
                               font-weight: bold;
                               color: #484742;
                               position: absolute;
                               overflow: hidden;
                }
}
.star0, .star1, .star2, .star3, .star4, .star5, .star6, .star7, .star8, .star9, .star10, .xstar1_1, .xstar2_1, .xstar3_1, .xstar4_1, .xstar5_1, .xstar6_1, .xstar7_1, .xstar8_1, .xstar9_1, .xstar10_1, .xstar1_2, .xstar2_2, .xstar3_2, .xstar4_2, .xstar5_2, .xstar6_2, .xstar7_2, .xstar8_2, .xstar9_2, .xstar10_2, .xstar1_3, .xstar2_3, .xstar3_3, .xstar4_3, .xstar5_3, .xstar6_3, .xstar7_3, .xstar8_3, .xstar9_3, .xstar10_3, .xstar1_4, .xstar2_4, .xstar3_4, .xstar4_4, .xstar5_4, .xstar6_4, .xstar7_4, .xstar8_4, .xstar9_4, .xstar10_4, .xstar1_5, .xstar2_5, .xstar3_5, .xstar4_5, .xstar5_5, .xstar6_5, .xstar7_5, .xstar8_5, .xstar9_5, .xstar10_5, .xstar1_6, .xstar2_6, .xstar3_6, .xstar4_6, .xstar5_6, .xstar6_6, .xstar7_6, .xstar8_6, .xstar9_6, .xstar10_6 {
                &:before {
                               content: "\f005\f005\f005\f005\f005";
                }
}
 
.star1_1, .star2_1, .star3_1, .star4_1, .star5_1, .star6_1, .star7_1, .star8_1, .star9_1, .star10_1, .star1_2, .star2_2, .star3_2, .star4_2, .star5_2, .star6_2, .star7_2, .star8_2, .star9_2, .star10_2, .star1_3, .star2_3, .star3_3, .star4_3, .star5_3, .star6_3, .star7_3, .star8_3, .star9_3, .star10_3, .star1_4, .star2_4, .star3_4, .star4_4, .star5_4, .star6_4, .star7_4, .star8_4, .star9_4, .star10_4, .star1_5, .star2_5, .star3_5, .star4_5, .star5_5, .star6_5, .star7_5, .star8_5, .star9_5, .star10_5, .star1_6, .star2_6, .star3_6, .star4_6, .star5_6, .star6_6, .star7_6, .star8_6, .star9_6, .star10_6 {
                &:before {
                               content: "\f006\f006\f006\f006\f006";
                }
}
.star0 {
                &:before {
                               color: #484742;
                }
}
.star1, .star2, .star3, .star4, .star5, .star6, .star7, .star8, .star9, .star10 {
                &:before {
                               color: #da522e;
                }
}
.star1_1, .star2_1, .star3_1, .star4_1, .star5_1, .star6_1, .star7_1, .star8_1, .star9_1, .star10_1 {
                &:before {
                               color: #32ADFF;
                }
}
.star1_2, .star2_2, .star3_2, .star4_2, .star5_2, .star6_2, .star7_2, .star8_2, .star9_2, .star10_2 {
                &:before {
                               color: #32ADFF;
                }
}
.star1_3, .star2_3, .star3_3, .star4_3, .star5_3, .star6_3, .star7_3, .star8_3, .star9_3, .star10_3 {
                &:before {
                               color: #756B00;
                }
}
.star1_4, .star2_4, .star3_4, .star4_4, .star5_4, .star6_4, .star7_4, .star8_4, .star9_4, .star10_4 {
                &:before {
                               color: #bd001c;
                }
}
.star1_5, .star2_5, .star3_5, .star4_5, .star5_5, .star6_5, .star7_5, .star8_5, .star9_5, .star10_5 {
                &:before {
                               color: #606060;
                }
}
.star1_6, .star2_6, .star3_6, .star4_6, .star5_6, .star6_6, .star7_6, .star8_6, .star9_6, .star10_6 {
                &:before {
                               color:#E0A8FF;
                }
}
.xstar1_1, .xstar2_1, .xstar3_1, .xstar4_1, .xstar5_1, .xstar6_1, .xstar7_1, .xstar8_1, .xstar9_1, .xstar10_1 {
                &:before {
                               color: #58771c;
                }
}
.xstar1_2, .xstar2_2, .xstar3_2, .xstar4_2, .xstar5_2, .xstar6_2, .xstar7_2, .xstar8_2, .xstar9_2, .xstar10_2 {
                &:before {
                               color: #434f8f;
                }
}
.xstar1_3, .xstar2_3, .xstar3_3, .xstar4_3, .xstar5_3, .xstar6_3, .xstar7_3, .xstar8_3, .xstar9_3, .xstar10_3 {
                &:before {
                               color: #b47540;
                }
}
.xstar1_4, .xstar2_4, .xstar3_4, .xstar4_4, .xstar5_4, .xstar6_4, .xstar7_4, .xstar8_4, .xstar9_4, .xstar10_4 {
                &:before {
                               color: #81231b;
                }
}
.xstar1_5, .xstar2_5, .xstar3_5, .xstar4_5, .xstar5_5, .xstar6_5, .xstar7_5, .xstar8_5, .xstar9_5, .xstar10_5 {
                &:before {
                               color: #8f8984;
                }
}
.xstar1_6, .xstar2_6, .xstar3_6, .xstar4_6, .xstar5_6, .xstar6_6, .xstar7_6, .xstar8_6, .xstar9_6, .xstar10_6 {
                &:before {
                               color:#844476;
                }
}
 
.star0 {
                &:before {
                               width: 100%;
                }
}
.star1, .star1_1, .star1_2, .star1_3, .star1_4, .star1_5, .star1_6, .xstar1_1, .xstar1_2, .xstar1_4, .xstar1_5, .xstar1_6 {
                &:before {
                               width: 10%;                       
                }
}
.star2, .star2_1, .star2_2, .star2_3, .star2_4, .star2_5, .star2_6, .xstar2_1, .xstar2_2, .xstar2_4, .xstar2_5, .xstar2_6 {
                &:before {
                               width: 20%;       
                }
}
.star3, .star3_1, .star3_2, .star3_3, .star3_4, .star3_5, .star3_6, .xstar3_1, .xstar3_2, .xstar3_4, .xstar3_5, .xstar3_6 {
                &:before {
                               width: 30%;                       
                }
}
.star4, .star4_1, .star4_2, .star4_3, .star4_4, .star4_5, .star4_6, .xstar4_1, .xstar4_2, .xstar4_4, .xstar4_5, .xstar4_6 {
                &:before {
                               width: 40%;                       
                }
}
.star5, .star5_1, .star5_2, .star5_3, .star5_4, .star5_5, .star5_6, .xstar5_1, .xstar5_2, .xstar5_4, .xstar5_5, .xstar5_6 {
                &:before {
                               width: 50%;                       
                }
}
.star6, .star6_1, .star6_2, .star6_3, .star6_4, .star6_5, .star6_6, .xstar6_1, .xstar6_2, .xstar6_4, .xstar6_5, .xstar6_6 {
                &:before {
                               width: 60%;                       
                }
}
.star7, .star7_1, .star7_2, .star7_3, .star7_4, .star7_5, .star7_6, .xstar7_1, .xstar7_2, .xstar7_4, .xstar7_5, .xstar7_6 {
                &:before {
                               width: 70%;                       
                }
}
.star8, .star8_1, .star8_2, .star8_3, .star8_4, .star8_5, .star8_6, .xstar8_1, .xstar8_2, .xstar8_4, .xstar8_5, .xstar8_6 {
                &:before {
                               width: 80%;                       
                }
}
.star9, .star9_1, .star9_2, .star9_3, .star9_4, .star9_5, .star9_6, .xstar9_1, .xstar9_2, .xstar9_4, .xstar9_5, .xstar9_6 {
                &:before {
                               width: 90%;       
                }
}
.star10, .star10_1, .star10_2, .star10_3, .star10_4, .star10_5, .star10_6, .xstar10_1, .xstar10_2, .xstar10_4, .xstar10_5, .xstar10_6 {
                &:before {
                               width: 100%;     
                }
}
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
    • ×0
  •