[Thème Liste Animes & Mangas] Pure Dark & Red Style (Responsive)

Inaho

Fondateur

Messages :

756

J'aime reçu :

76

Inscrit le :

5 févr. 2016

#1 il y a 2 ans, édité il y a 2 ans

Salut les gens, j'ai fait un thème responsive pour votre liste d'animes et de mangas que j'ai nommé Pure Dark & Red Style, comme vous l'aurez probablement deviné par le nom, celui-ci est noir et rouge, mais pour ceux n'aimant pas le rouge vous pouvez changer la couleur facilement et rapidement.

PURE DARK & RED STYLE

Aperçu général du thème

Effet au survol, selon les différentes classifications : En cours, Terminé, A voir, En pause, Abandonné

Installation du thème :

Aller dans les paramètres du compte
Aller dans CSS dans ma liste d'animes ou CSS dans ma liste de mangas
Copier/Coller le CSS disponible ci-dessous
Optionnel : Possibilité de changer les couleurs en modifiant la valeur hexadécimale (Exemple changer #eb3333 de --couleur-principale par #3fa9f5 pour changer la couleur principale)
Voici un site pour obtenir l'hexadécimale de la couleur désirée : https://htmlcolorcodes.com/fr/
Optionnel : Supprimez la longue ligne indiquée au début si vous voulez avoir le logo de base en orange au lieu du rouge.

Profitez du thème.
Envoyez-moi un message sur Anime-Gate ou sur Discord si vous remarquez un bug.

CSS Pure Dark & Red Style :

:root {
--couleur-principale: #eb3333;
--couleur-principale-hover: #b31919;
--couleur-en-cours: #3285bf;
--couleur-termine: #33bf32;
--couleur-a-voir: #e9ebed;
--couleur-en-pause: #d8b934;
--couleur-abandon: #c52929;
--red-animegate-logo: url("https://www.anime-gate.net/images/anime-manga-download-animegate-logo-white.svg");
/* Supprimez cette longue ligne si vous préférez le logo de base (utile si vous changez de couleur principale par exemple) */--red-animegate-logo: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3C!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Calque_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 338 59.1' style='enable-background:new 0 0 338 59.1;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0{fill:%23EB3333;} .st1{fill:%23FFFFFF;} %3C/style%3E%3Cpath class='st0' d='M33.7,11.8H22.8l-10.2,47h8.8l2.1-11l0,0H30l-0.9-7h-4.7l0,0l0,0l1.7-9.5c0.5-2.7,1.2-8.5,1.7-10.5H28 c0.4,2,1,7.6,1.5,10.5l1.4,9.2l1.1,8.6l1.8,9.8h8.8L33.7,11.8z'/%3E%3Cpath class='st1' d='M27.6,0.4C12.4,0.4,0,12.8,0,28.2c0,8.2,3.5,15.6,9.2,20.7l1.7-7.2c-3-3.7-4.7-8.4-4.7-13.5 c0-11.9,9.6-21.6,21.5-21.6s21.5,9.7,21.5,21.6c0,5-1.7,9.6-4.6,13.3l1.8,7.2c5.5-5.1,8.9-12.4,8.9-20.5 C55.3,12.8,42.9,0.4,27.6,0.4z'/%3E%3Cg transform='translate(0, 6) scale(1.1, 1.1)'%3E%3Cpath class='st0' d='M72.3,31.2l-1.8,9h-7.4l8.6-39.5h9.2l7.7,39.5h-7.4l-1.7-9H72.3z M78.7,25.2l-1.3-8.3c-0.4-2.4-0.9-6.3-1.3-9 h-0.2c-0.4,2.6-1,6.7-1.4,9L73,25.1L78.7,25.2L78.7,25.2z'/%3E%3Cpath class='st0' d='M92.9,40.2V0.7h7l6.1,15.5c1.2,3,3.1,8.1,4.2,11.6h0.1c-0.2-4.2-0.8-11-0.8-18.3V0.7h6.7v39.5h-7l-6-15 c-1.3-3.3-3.1-8.3-4-11.9h-0.1c0.2,4,0.5,10.1,0.5,18v8.9H92.9L92.9,40.2z'/%3E%3Cpath class='st0' d='M130.8,0.7v39.5h-7.7V0.7H130.8z'/%3E%3Cpath class='st0' d='M161.8,26.3c-0.2-3.8-0.5-8.9-0.4-13.1h-0.2c-0.7,4.2-1.8,9.1-2.5,12.1l-3.4,14.1h-5.5l-3.3-13.9 c-0.8-3.2-1.8-8.1-2.4-12.4h-0.2c-0.1,4.3-0.4,9.3-0.6,13.2L142.7,40h-6.6L139,0.5h8.1l3.2,14.3c1.1,5,2.1,9.4,2.8,13.8h0.1 c0.6-4.4,1.5-8.9,2.5-13.8l3.1-14.3h8.1l2.4,39.5h-6.9L161.8,26.3z'/%3E%3Cpath class='st0' d='M191.7,22.8h-9v10.7h10.2v6.7H175V0.7h17.2v6.7h-9.5v9.1h9V22.8L191.7,22.8z'/%3E%3Cpath class='st1' d='M208.1,21.2v5.5h-11.7v-5.5H208.1z'/%3E%3Cpath class='st1' d='M236.2,39.1c-1.7,0.7-5.3,1.4-8.2,1.4c-4.5,0-7.9-1.3-10.6-3.9c-3.4-3.3-5.2-9.1-5.1-15.9 c0.2-14.4,8.4-20.3,16.8-20.3c3,0,5.2,0.6,6.5,1.2l-1.4,6.6c-1.1-0.6-2.6-0.9-4.5-0.9c-5.2,0-9.4,3.6-9.4,13.9 c0,9.5,3.7,12.9,7.3,12.9c0.7,0,1.2-0.1,1.5-0.2v-9.6h-3.5V18h10.6L236.2,39.1L236.2,39.1z'/%3E%3Cpath class='st1' d='M248.2,31.2l-1.8,9H239l8.6-39.5h9.2l7.7,39.5H257l-1.7-9H248.2z M254.6,25.2l-1.3-8.3c-0.4-2.4-0.9-6.3-1.3-9 h-0.2c-0.4,2.6-1,6.7-1.4,9l-1.5,8.2C248.9,25.2,254.6,25.2,254.6,25.2z'/%3E%3Cpath class='st1' d='M270.1,7.8h-7V0.7h21.7v7.1h-7v32.4h-7.7V7.8L270.1,7.8z'/%3E%3Cpath class='st1' d='M305.6,22.8h-9v10.7h10.2v6.7h-17.9V0.7H306v6.7h-9.5v9.1h9L305.6,22.8L305.6,22.8z'/%3E%3C/g%3E%3C/svg%3E");
}
@\import "https://fonts.googleapis.com/css?family=Sarabun:400,700";
body {
font-family: "Sarabun", "Segoe UI", "Arial", "FontAwesome", sans-serif;
overflow-x: hidden;
}
body header div div.clearfix:nth-child(1) {
background: #232325;
box-shadow: 0 1.68px 3.36px hsla(0, 0%, 0%, 50%);
height: 42px;
}
body header div.container {
padding: 0;
}
a.back-to-profil,
a.back-to-profil:hover {
background: none;
}
header {
width: 100%;
max-width: initial;
height: 420px;
object-fit: cover;
}
.user-info {
top: 55%;
}
.menu,
.menu li.active,
.menu li:focus,
.menu li:hover {
background: none;
}
body {
background: #161618;
}
.menu li.first,
.menu li {
border: 0;
}
.menu .fa {
display: none;
}
.visible-lg-inline {
display: none!important;
}
.menu-text {
font-size: 18px;
text-shadow: -0.6px 0.84px 1.68px #000;
color: #7e7e7e;
}
.text-primary {
color: var(--couleur-principale);
}
.menu-text:hover {
color: #a7a7a7;
}
.active .menu-text {
color: white;
}
.menu li {
width: inherit;
float: none;
padding: 0 12px;
}
.menu {
text-align: center;
padding-top: 8px;
border-top: 3px solid var(--couleur-principale);
background: #161618;
}
body div.container.clearfix div.col-lg-3.col-md-4.col-sm-5.nopadding.hidden-xs {
display: inline-block;
width: unset;
margin-right: 10px;
z-index: 100;
}
body div.container.clearfix div.col-lg-6.col-md-6.col-sm-4.col-xs-12.nopadding {
float: right;
width: calc(169px + 0.07 * (100vw - 980px));
z-index: 14;
}
body div.container.clearfix div.col-lg-6.col-md-6.col-sm-4.col-xs-12.nopadding .input-group {
float: right;
}
body div.container.clearfix div.col-lg-3.col-md-2.col-sm-3.nopadding.hidden-xs.text-right {
float: left;
display: inline-block;
text-align: initial;
width: auto;
z-index: 100;
}
body div.container.clearfix div.col-lg-6.col-md-6.col-sm-4.col-xs-12.nopadding .btn.btn-info {
width: 30px;
z-index: 30;
left:10000px;
}
body div.container.clearfix div.col-lg-6.col-md-6.col-sm-4.col-xs-12.nopadding .btn.btn-info:after {
visibility: visible;
font-family: font-awesome-light-v5!important;
content: "\F002";
position: absolute;
top: 6px;
left: 8px;
left: -9992px;
}
body div.container.clearfix div.col-lg-6.col-md-6.col-sm-4.col-xs-12.nopadding div input::-webkit-input-placeholder {
/* WebKit browsers */
color: transparent;
}
body div.container.clearfix div.col-lg-6.col-md-6.col-sm-4.col-xs-12.nopadding div input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: transparent;
}
body div.container.clearfix div.col-lg-6.col-md-6.col-sm-4.col-xs-12.nopadding div input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: transparent;
}
body div.container.clearfix div.col-lg-6.col-md-6.col-sm-4.col-xs-12.nopadding div input:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: transparent;
}
body div.container.clearfix div.col-lg-6.col-md-6.col-sm-4.col-xs-12.nopadding div span {
position: absolute;
left: 0;
}
body div.container.clearfix div.col-lg-6.col-md-6.col-sm-4.col-xs-12.nopadding div .form-control {
background: #28282a;
border: 0;
border-radius: 3px;
box-shadow: -0.5px 0.7px 2.1px hsla(0, 0%, 0%, 50%);
padding-left: 30px;
color: white;
}
body div.container.clearfix {
position: relative;
top: -64px;
margin-bottom: -64px;
display: table;
padding: 0 30px;
}
.container {
width: 100%;
text-align: center;
}
.media-grid-6 .anime-cover {
position: relative;
z-index: 1;
display: block;
width: 210px;
height: 300px;
margin: calc((300px * -0.025) + 12px) calc((210px * -0.025) + 12px);
flex: 0 0 auto;
transform: scale(0.95);
display: inline-block;
box-shadow: -1.2px 1.68px 3.36px hsla(0, 0%, 0%, 50%);
}
.back-to-profil {
float: left;
}
.anime-cover .anime-image {
border-radius: 6px;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: black;
}
.media-grid-6 .anime-cover:hover {
transform: scale(1);
text-align: center;
}
.medialist-status-title {
display: none;
}
.anime-data.text-center {
text-align: left;
padding-bottom: 2px;
}
.anime-cover .anime-cover-progress,
.anime-cover .anime-cover-progress.done,
.anime-cover .anime-cover-progress.planned,
.anime-cover .anime-data {
background: none;
}
.anime-cover-progress {
text-align: right;
}
.anime-cover-progress.current.text-center span:nth-child(2) {
float: right;
}
.anime-cover-progress span.fa {
float: left;
}
.anime-cover {
padding: 0;
}
.anime-cover:hover:after {
content: "";
bottom: -4px;
width: 100%;
height: 30px;
left: 0;
top: inherit;
z-index: -16;
border-radius: 6px;
display: inline-block;
position: absolute;
}
[data-target-status*="CURRENT"] .anime-cover:hover:after {
background: var(--couleur-en-cours);
}
[data-target-status*="COMPLETED"] .anime-cover:hover:after {
background: var(--couleur-termine);
}
[data-target-status*="PLANNING"] .anime-cover:hover:after {
background: var(--couleur-a-voir);
}
[data-target-status*="PAUSED"] .anime-cover:hover:after {
background: var(--couleur-en-pause);
}
[data-target-status*="DROPPED"] .anime-cover:hover:after {
background: var(--couleur-abandon);
}
[data-target-status*="CURRENT"] .anime-cover-progress .fa:after {
content: " En cours";
}
[data-target-status*="COMPLETED"] .anime-cover-progress .fa:after {
content: " Terminé";
}
[data-target-status*="PLANNING"] .anime-cover-progress .fa:after {
content: " A voir";
}
[data-target-status*="PAUSED"] .anime-cover-progress .fa:after {
content: " En pause";
}
[data-target-status*="DROPPED"] .anime-cover-progress .fa:after {
content: " Abandonné";
}
[data-target-status*="CURRENT"] .anime-cover-progress .fa:after,
[data-target-status*="COMPLETED"] .anime-cover-progress .fa:after,
[data-target-status*="PLANNING"] .anime-cover-progress .fa:after,
[data-target-status*="PAUSED"] .anime-cover-progress .fa:after,
[data-target-status*="DROPPED"] .anime-cover-progress .fa:after {
font-family: "Sarabun", "Segoe UI", "Arial", "FontAwesome", sans-serif;
margin-left: 3px;
font-size: 13px;
}
.anime-image {
filter: brightness(50%) opacity(100%);
}
.anime-cover .anime-cover-progress,
.anime-cover .anime-more-data {
bottom: 2px;
left: 15px;
right: 15px;
}
.increment-progress {
display: none;
}
.btn-primary {
background-color: var(--couleur-principale);
border-color: var(--couleur-principale);
}
.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open>.btn-primary.dropdown-toggle.focus,
.open>.btn-primary.dropdown-toggle:focus,
.open>.btn-primary.dropdown-toggle:hover {
background-color: var(--couleur-principale-hover);
border-color: var(--couleur-principale-hover);
}
.btn-primary.active,
.btn-primary:active,
.btn-primary:hover,
.open>.btn-primary.dropdown-toggle,
.btn-primary.focus,
.btn-primary:focus {
background-color: var(--couleur-principale-hover);
border-color: var(--couleur-principale-hover);
}
.dropdown-menu>li>a.dropdown-selected {
background-color: var(--couleur-principale);
}
.animegate-logo img {
visibility: hidden;
}
a.animegate-logo {
width: 149px;
padding: 7px 0px;
background: none;
margin-right: 30px;
background-repeat: no-repeat;
background-position: center center;
background-color: transparent;
background-image: var(--red-animegate-logo);
}
.container.media-grid-6 {
position: relative;
top: -16px;
}
#medialist-options-menu {
top: inherit;
bottom: 0;
z-index: 1000;
}
#medialist-options-menu .menu-text {
font-size: 14px;
color: white;
}
nav.mobile-menu li a .menu-text {
color: white;
}
.mobile-menu-more-row.active,
.mobile-menu-more-row.dropdown-selected,
.mobile-menu-more-row.selected,
.mobile-menu-more-row.active .mobile-menu-more-row-icon,
.mobile-menu-more-row.dropdown-selected .mobile-menu-more-row-icon,
.mobile-menu-more-row.selected .mobile-menu-more-row-icon {
background: var(--couleur-principale);
}
.btn-group>.btn:last-child:not(:first-child),
.btn-group>.dropdown-toggle:not(:first-child),
.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
display: none;
}
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
@media screen and (max-width: 1340px) {
body div.container.clearfix {
top: -15px;
}
body div.container.clearfix div.col-lg-6.col-md-6.col-sm-4.col-xs-12.nopadding,
body div.container.clearfix div.col-lg-3.col-md-4.col-sm-5.nopadding.hidden-xs {
float: none;
display: inline-block;
vertical-align: top;
}
body div.container.clearfix div.col-lg-3.col-md-2.col-sm-3.nopadding.hidden-xs.text-right {
margin-left: 10px;
float: none;
}
.container.media-grid-6 {
top: 43px;
}
}
@media (max-width: 767px) {
body div.container.clearfix div.col-lg-6.col-md-6.col-sm-4.col-xs-12.nopadding {
width: 100%;
margin: 15px 0;
}
body div.container.clearfix div.col-lg-6.col-md-6.col-sm-4.col-xs-12.nopadding .input-group {
width: 100%;
}
body>header>div>div:nth-child(1)>div.hidden-xs.col-sm-6.nopadding.text-right {
display: inline-block!important;
}
}

Ma liste d'animes

Norichii

Membre

Messages :

631

J'aime reçu :

15

Inscrit le :

10 août 2017

#2 il y a 2 ans

C'est cool, merci ! Ma liste est déjà personnalisée mais il y a certaines choses que je vais piquer dans ton code (´・ω・`)

#NoriQuotes

Inaho

Fondateur

Messages :

756

J'aime reçu :

76

Inscrit le :

5 févr. 2016

#3 il y a 2 ans

En réponse à Norichii :

C'est cool, merci ! Ma liste est déjà personnalisée mais il y a certaines choses que je vais piquer dans ton code (´・ω・`)

De rien, j'espère que ça va t'aider à bien personnaliser ta liste (´・ω・)っ由

Ma liste d'animes

Olho

Membre

Messages :

474

J'aime reçu :

41

Inscrit le :

10 juin 2017

#4 il y a 2 ans, édité il y a 2 ans

Merci beaucoup pour ton partage ! J'ai pu commencer à personnaliser ma liste, c'est intéressant tout ça ( ͡° ͜ʖ ͡°)

Même si j'arrive pas encore à trouver comment changer la couleur des titres d'animes, les notes et les étoiles... m'enfin, j'y arriverai bien un jour !!

Inaho

Fondateur

Messages :

756

J'aime reçu :

76

Inscrit le :

5 févr. 2016

#5 il y a 2 ans

En réponse à Olho :

Merci beaucoup pour ton partage ! J'ai pu commencer à personnaliser ma liste, c'est intéressant tout ça ( ͡° ͜ʖ ͡°)

Même si j'arrive pas encore à trouver comment changer la couleur des titres d'animes, les notes et les étoiles... m'enfin, j'y arriverai bien un jour !!

Nice !

Pour la couleur des étoiles :

.anime-cover .anime-cover-score .fa {
color: #xxxxxx;
}

Pour la couleur des scores :

.anime-cover .anime-cover-comment, .anime-cover .anime-cover-score {
color: #xxxxxx;
}

Pour la couleur des titres :

span.anime-data.text-center {
color: #xxxxxx;
}

Ma liste d'animes

Olho

Membre

Messages :

474

J'aime reçu :

41

Inscrit le :

10 juin 2017

#6 il y a 2 ans, édité il y a 2 ans

En réponse à Inaho :

Nice !

Pour la couleur des étoiles :
.anime-cover .anime-cover-score .fa {
color: #xxxxxx;
}

Pour la couleur des scores :
.anime-cover .anime-cover-comment, .anime-cover .anime-cover-score {
color: #xxxxxx;
}

Pour la couleur des titres :
span.anime-data.text-center {
color: #xxxxxx;
}

Ohhhh gros merci !

Edit ; saurais-tu par hasard quel serait le ''code'' pour changer la couleur pour le ''En cours''/''Terminé''/''Abandonné''/... et le nombre d'épisodes sur la fiche ?! :o (juste en dessous des titres)

J'ai finalement trouvé comment faire ! :3

Inaho

Fondateur

Messages :

756

J'aime reçu :

76

Inscrit le :

5 févr. 2016

#7 il y a 2 ans

En réponse à Olho :

Ohhhh gros merci !

Edit ; saurais-tu par hasard quel serait le ''code'' pour changer la couleur pour le ''En cours''/''Terminé''/''Abandonné''/... et le nombre d'épisodes sur la fiche ?! :o (juste en dessous des titres)
J'ai finalement trouvé comment faire ! :3

Tout est dans le post justement ;)

Ma liste d'animes

Djeruman

Membre

Messages :

85

J'aime reçu :

2

Inscrit le :

21 févr. 2018

#8 il y a 2 ans

Pour avoir de nouveau les chiffres a coter des catégorie , On dois retirer quoi ?

Kurosagi

Modérateur

Messages :

1461

J'aime reçu :

127

Inscrit le :

24 avr. 2016

#9 il y a 2 ans

Tu dois retirer ça :

.visible-lg-inline {
display: none!important;
}

Je recherche de l'argent, si vous en avez, n'hésitez pas à en faire dons, ayez un peu de bons sens et aider les pauvres, s'il vous plait.

Collection de Figurine

Liste de jeu [incomplète]

Mr_Karneval

Membre

Messages :

15

J'aime reçu :

0

Inscrit le :

5 avr. 2018

#10 il y a 11 mois

Salut, je n'ai jamais fait de css et j'aimerais à partir du Thème Dark and Red zoomer un peu les animes sur la liste pour qu'ils soient plus gros, qu'est-ce que je dois changer ?

Kurosagi

Modérateur

Messages :

1461

J'aime reçu :

127

Inscrit le :

24 avr. 2016

#11 il y a 11 mois, édité il y a 11 mois

Dans les options CSS tu peux ajouter ça :

.media-grid-6 .anime-cover {

width: 205px;

height: 310px;

}

En modifiant les chiffres à ta convenance évidemment (c'est la taille des cases sur ma liste)

Je recherche de l'argent, si vous en avez, n'hésitez pas à en faire dons, ayez un peu de bons sens et aider les pauvres, s'il vous plait.

Collection de Figurine

Liste de jeu [incomplète]

Mr_Karneval

Membre

Messages :

15

J'aime reçu :

0

Inscrit le :

5 avr. 2018

#12 il y a 11 mois

En réponse à Kurosagi :

Dans les options CSS tu peux ajouter ça :

.media-grid-6 .anime-cover {
width: 205px;
height: 310px;
}
En modifiant les chiffres à ta convenance évidemment (c'est la taille des cases sur ma liste)

Merci beaucoup ! :D