Present your custom CSS

TaZDB-Helper

12. Dec 2016 – Thread Creator

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;}

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*/

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.
Name appears on hover.

Name disappears on hover.
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 */

One-line Information

#infoline {display: block;}
#infodetails {display: none;}

Remove row from rating

#ratingstats>tbody>tr:first-of-type { display:none }

Database input: smaller rows

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

Comments (1)

Display all comments

TaZDB-Helper

21. Dec 2016 – Thread Creator

@B95-AS Martin
Welche Vorlage?

Fürs Gesamtpaket:
https://www.anisearch.com/forum/thread/5138,wie-sehen-die-anime-seiten-bei-euch-aus/?p=324157#post324157
https://www.anisearch.com/forum/thread/6130,anisearch-startseite-wie-schaut-es-bei-euch-aus/?p=299013#post299013

martin m²

23. Dec 2016

@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

Comments (1)

martin m²

26. Dec 2016

achtung es könnte passieren dass bei meinen links am ende in der Adressleiste eine "(" steht, diese bitte löschen, denn dann wird die url geladen. Oder ihr markiert den text in den klammern und fügt diesen ein.

LG

- ×0
- ×0
- ×0
- ×0
- ×0
- ×0

SkyFiefVIP

24. Feb 2017

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.

SkyFiefVIP

27. Feb 2017

Post panel hover

ul.post-panel:hover > li {
   &.quote, &.add-comment, &.report, &.addemicon1, &.addemicon2, &.addemicon3, &.edit, &.delete, &.newreply {
        display: inline-block;
    }
    &.menu {
        display: none;
    }
}

TaZDB-Helper

11. Jun 2017 – Thread Creator

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.
Name appears on hover.

Name disappears on hover.
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;}

SkyFiefVIP

05. Jan 2018

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%;
                }
}

Present your custom CSS