Present your custom CSS

TaZAssistante DB

12. déc. 2016 – Lanceur du sujet

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

Commentaires (1)

Afficher tous les commentaires

TaZAssistante DB

21. déc. 2016 – Lanceur du sujet

@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. déc. 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

Commentaires (1)

martin m²

26. déc. 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. févr. 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

La dernière édition du sujet a eu lieu le 24.02.2017 21:33.

SkyFiefVIP

27. févr. 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;
    }
}

TaZAssistante DB

11. juin 2017 – Lanceur du sujet

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. janv. 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