-
The Labyrinth of Magic [Magi]
#email-verification-warning {height: 0px;
padding: 0px;
margin: 0px;
font-size: 0px;
opacity: 0;
}
#help_bubble{ background: rgb(240,240,240);
border: none;
border-radius: 2px;
border-top: rgb(250,250,250);
box-shadow: 0 0 1px rgba(0,0,0,0.4);
}
#help_bubble img{ max-width: 300px;
max-height: 150px;
}
* {line-height: 20px;
font-family: helvetica;
font-size:12.5px;
}
* a { color: rgb(100,46,56);
text-decoration: none;
border-bottom: 1px solid rgba(100,46,56,0);
opacity: 1;
-webkit-transition: 500ms;
-moz-transition: 500ms;
-o-transition: 500ms;
transition: 500ms; }
* a:hover { opacity: 0.9;
border-bottom: 1px solid rgba(100,46,56,0.7);
}
* img {max-width: 98%;
margin: 5;
}
input[type=text]{ border: none;
background: rgba(255,255,255,0.7);
border-radius: 3px;
height: 23px;
margin: 5px;
}
input[type=submit]{
border: none;
border-radius: 3px;
height: 25px;
background: rgba(226,193,126,0.6);
margin: 5px;
}
html,
body {height: 100%;
min-height:100%;
}
#body { min-height:100%;
top: 0px;
border-top: none;
background: url(http://img15.hostingpics.net/pics/384797back2.png) repeat-x 0px 350px,
url(http://img15.hostingpics.net/pics/441303head.png) no-repeat 90% 0px,
url(http://img15.hostingpics.net/pics/694357back.png) no-repeat fixed 0px 0px / cover;
}
#background {min-height:100%;
margin-top: -25px;
width: 100%;
}
#header{
height: 0px;
width: 100%;
}
#titre_header a { display: block;
position: absolute;
top: 367px;
left: 650px;
height: 50px;
width: 500px;
font-variant: small-caps;
font-size: 42px;
color: rgba(255,255,255,0.6);
text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
border:none;
}
#footer,
#footer a{ height:20px;
position: absolute;
right: 10%;
padding:none;
top:3px;
right: 5px;
color:rgba(100,46,56,0);
opacity:0.7;
}
#footer::after{ content: "Design by Nagalia";
color:rgba(100,46,56,0.5);
}
#menu { background: rgb(59,57,55);
height:321px;
position: absolute;
top: 0px;
right:0px;
padding-top:30px;
border-left: 1px solid rgba(0,0,0,0.3);
}
#menu a{
float: left;
height: 20px;
padding: 5px;
font-variant: small-caps;
font-size: 15px;
font-weight:bold;
color: rgba(255,255,255,0.6);
text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
margin:7px;
margin-right:0px;
margin-left:0px;
padding-left:7px;
padding-right:7px;
border:none
}
#menu a:hover{ background: rgba(255,255,255,0.1);
}
/********MENU*******/
#menu1_float {
top: 0px;
min-height:100%;
}
#menu1 { background: rgb(59,57,55);
padding-left: 15px;
width:220px;
padding-right: 20px;
border-right : 1px solid rgba(0,0,0,0.25);
box-shadow: 5px 0px 10px rgba(0,0,0,0.5);
position: fixed;
top: -20px;
overflow:auto;
height:100%;
padding-bottom: 30px;
z-index:1;
color: grey;
text-shadow: -1px 1px 0px rgba(0,0,0,0.5);
}
.module_menu_contenu_block{padding-bottom:5px;
}
.module_menu_titre { display: inline-block;
background : rgb(224,168,62);
float: left;
height: 20px !important;
padding: 5px;
font-variant: small-caps;
font-size: 15px;
font-weight:bold;
color: rgba(0,0,0,0.7);
text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
border-radius: 0 4px 4px 0;
margin:7px;
margin-left:-15px;
}
.module_menu_titre::after{ content:"";
display: block;
float: right;
margin-top:-5px;
margin-left:8px;
margin-right: -5px;
/* taille */
height:0;width:0;
/* les bordures */
border-left:16px solid rgb(224,168,62);
border-bottom:15px solid rgb(59,57,55);
border-top:15px solid rgb(59,57,55)
}
#menu1 a{ color: rgba(224,168,62,0.5);
border-bottom: 1px solid rgba(224,168,62,0);
margin-bottom:3px;
display: inline-block;
}
#menu1 a:hover{
border-bottom: 1px solid rgba(224,168,62,0.4);
}
#menu1 .module_menu_type_lastvisitors { text-align:center;
margin-left: -30px;
margin-right: -20px;
margin-bottom: 10px;
border: none;
}
#menu1 .module_menu_type_lastvisitors .module_menu_titre{ visibility:hidden;
}
#menu1 .module_menu_type_lastvisitors img {margin: 0px;
width: 50px;
border: none;
filter: sepia(1);
-webkit-filter: sepia(1);
-moz-filter: sepia(1);
-o-filter: sepia(1);
-ms-filter: sepia(1);
border-radius:50%;
box-shadow: 1px 1px 1px black, inset 0 0 6px rgba(0,0,0,1);
}
#menu1 .module_menu_type_lastvisitors a{ border: none;}
#menu2{ width: 0px;
background: none;
border: none;
top: 0px;
right:0px;
}
#menu2 .module_menu_type_lastvisitors{ position: absolute;
width: 90px;
right: -25px;
top: 0px;
}
#menu2 .module_menu_type_lastvisitors img{ margin: 7px;
filter: sepia(1);
-webkit-filter: sepia(1);
-moz-filter: sepia(1);
-o-filter: sepia(1);
-ms-filter: sepia(1);
border-radius:50%;
box-shadow: 1px 1px 1px black, inset 0 0 6px rgba(0,0,0,1);
transition: 300ms;
}
#menu2 .module_menu_type_lastvisitors img:hover{ box-shadow: 0 0 2px black;
}
#menu2 .module_menu_type_search { position: absolute;
width: 350px;
left: 300px;
top: 353px;
}
#menu2 .module_menu_type_search .module_menu_titre {height: 0px;
padding: none;
margin: none;
display: none;
}
#menu2 .module_menu_type_search input[type=text]{ border: none;
background: rgba(255,255,255,0.7);
border-radius: 3px;
float: left;
height: 23px;
margin-top:0px;
}
#menu2 .module_menu_type_search input[type=submit]{
margin-top: -20px;
border: none;
border-radius: 3px;
height: 25px;
background: rgba(226,193,126,0.6);
}
#content {min-height: 60%;
position: absolute;
color: rgba(0,0,0,0.7);
width: 100%;
text-align: justify;
margin: 0;
margin-top: 420px;
background: rgb(124,108,88) url(http://img15.hostingpics.net/pics/538911judaldroit.png) no-repeat 101.5% 100%;
}
.ulmodules { width: 68%;
margin-left:26%;
}
.module_titre {height:50px}
.module_titre_contenu
{ display: block;
background : rgb(59,57,55);
float: right;
height: 20px;
padding: 15px;
font-variant: small-caps;
font-size: 32px;
color: rgba(255,255,255,0.6);
text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
border-radius: 4px 0px 0px 4px;
margin-right:-9%;}
.module_titre_contenu a{font-variant: small-caps;
font-size: 32px;
color: rgba(255,255,255,0.6);
text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
}
.module_titre_contenu::before{ content:"";
position:absolute;
margin-left:-50px;
top:1px;
/* taille */
height:0;width:0;
/* les bordures */
border-right:36px solid rgb(59,57,55);
border-bottom:24px solid transparent;
border-top:24px solid transparent;
}
.article_info{position:absolute;
right:30px;
font-size:10px;
opacity: 0.7;
}
.article_info a{ font-size:10px;
}
/*MENUBAR*/
.menubar_button
.menubar_section:hover,
.menubar_section,
.menubar_separation,
.menubar_button,
#menubar_logo,
#menubar_favorites { background: none;}
#menubar_section_content,
#menubar_section_appearance,
#menubar_section_interactions,
#menubar_section_manage,
#menubar_section_account,
#menubar_section_help,
#menubar_notifications,
#menubar_signin { background: none;
transition: 400ms;
-webkit-transition: 400ms;
-moz-transition: 400ms;
-o-transition: 400ms;
}
#menubar_section_content:hover,
#menubar_section_appearance:hover,
#menubar_section_interactions:hover,
#menubar_section_manage:hover,
#menubar_section_account:hover,
#menubar_section_help:hover,
#menubar_notifications:hover{
background : rgb(224,168,62);
}
#menubar_favorites_btn,
#menubar_nofavorites_btn:hover {
background: url("/images/menubar/icon_nofavorite.png")no-repeat 50% 50%;
}
#menubar_favorites_btn:hover,
#menubar_nofavorites_btn {
background: url("/images/menubar/icon_favorite.png")no-repeat 50% 50%;
}
#menubar_hide,
#menubar_show{display:none;
}
#menubar{ background: rgb(85,82,79);
border-bottom: 1px solid rgba(0,0,0,0.3);
box-shadow: 0 0 3px rgba(0,0,0,0.8);
font-variant: small-caps;
font-size: 15px;
font-weight:bold;
color: rgba(255,255,255,0.6);
text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
opacity:0;
transition: 800ms;
-webkit-transition: 800ms;
-moz-transition: 800ms;
-o-transition: 800ms;
}
#menubar a,
#menubar a:hover{ font-variant: small-caps;
font-size: 15px;
color: rgba(255,255,255,0.6);
text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
text-decoration: none;
}
#menubar:hover{ opacity: 1; }
.menubar_section ul { background-color: rgb(85,82,79);
border-radius: 0 0 5px 5px;
}
.menubar_section li { background-image:none;
color: silver;
font-variant: normal;
}
.menubar_section li:hover { background: rgba(255,255,255,0.5); }
.menubar_section li:last-child {background-image:none;}
.menubar_section li:last-child:hover {border-radius: 0 0 5px 5px; }
#notifications_panel { background-color: rgb(85,82,79);
border-radius: 0 0 20px 20px;
}
#notifications_panel .notif_msg {line-height: 5px;
height: 39px;
display: block;
}
#notifications_panel a{
font-variant: normal;
}
#notifications_panel li {
background: none;
}
#notifications_panel li a:hover {
background: rgba(255,255,255,0.5);
color: rgba(0,0,0,0.7);
text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
font-variant: normal;
}
#notifications_panel li:last-child a:hover{
border-radius: 0 0 20px 20px;
background: rgba(255,255,255,0.5);
font-variant: normal;
}
#notifications_panel .new_notification {
background : rgb(224,168,62);
color: rgba(0,0,0,0.7);
text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
}
-
Commentaires
Oui :)
Au préalable, je conseille de mettre tous les paramètres de personnalisation de ton blog à 0 (surtout les marges et les styles de texte)
Ca te prend combien de temps pour faire un thème comme ça ? (avec ton le codage CSS et HTML sans compter le temps qu'il te faut pour faire le header )
@Sasha : Ça commence à /*MENUBAR*/ jusqu'à la fin du code
@Elinae : Pour celui-ci le header ne m'a pris que 15 min et je n'ai aucun autre élément graphique XD Le codage m'a pris un petit moment... Entre 6h et 8h je pense.
C'était le 6-8h qui m'intéressait x) ... Ouais c'est long donc e_e faut avoir la patience o: !
Du coup les flèches c'est du codage ? Ou c'est une image ? o: (pour les titres des modules, des articles...etc)
JY CRRRROIIS PAAAAAAAAAAASSSSSSSSSSSSS NNNAGGGAAAALLIIIA TU LIS DANS MES PENSEEEEES !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! LOL ! Tu va me sauver COMBIEN DE FOIS LA VIE?!
Eli, ça à l'air d'être du code, je vois pas de lien d'image en pointe ^^
Génial Nag' ! Je te le prend et je change l'header en laissant le credit evidement ^^
Tu peux juste me passer la teille de l'header du coup s'il te plait ? :3 *grande flemme de décortiquer le code*
Novalia : j'ai dis lien ? Mince, je parlais des titres des modules et des articles ("une petite présentation" "sondage"...etc), le fond c'est une flèche quoi x)
@Aladin : De rien :)
@Novalia : Le "header" se trouve dans #body
background: url(http://img15.hostingpics.net/pics/384797back2.png) repeat-x 0px 350px,
url(http://img15.hostingpics.net/pics/441303head.png) no-repeat 90% 0px,
url(http://img15.hostingpics.net/pics/694357back.png) no-repeat fixed 0px 0px / cover;La première image c'est l'espèce de barre grisé ou est affiché le titre du blog
La deuxième, c'est ce qu'on peu appeler le header. Tu peux regarder dans les ressources pour avoir l'image (elle est masquée aux 3/4)
La dernière, c'est le fond. Si tu ne veux pas t'embêter, tu peux changer simplement le fond (qui sera redimensionné aux dimensions de l'écran) et supprimer la deuxième image
@Elinae : Yep, c'est du code. Avec les pseudo-classe ::before et ::after, un content vide et des grosses bordures, ont arrive à bidouiller des triangles :3
Il est sublime, les couleurs sont simple et épurée, l'header est magnifique et les codages rien à dire!
Il est superbe !
Mais j'ai beau chercher, je ne comprend pas quel code tu as utilisé pour que la page prenne toute la fenêtre...
Je suis trop forte 8'D ! *sors loin* (d'ailleurs j'avais un soucis avec un code, je sais pas si tu as eu l'occasion de lire mon mp : si non, prends ton temps, j'ai essayé de préciser mon problème quand tu m'as dis que tu voyais pas ce que c'était, j'ai fait un screen pour que ça soit un peu plus clair : du coup j'espère que quand tu liras tu arriveras à comprendre mon problème x3 .. : et oui c'est un gros hs XD).
Heeyy, encore un thème magnifique, mon coup de coeur, je me suis penchée sur celui-là du coup.
Sauf que j'ai un petit souci, quand je mets le code, il manque, la partie où il y'a le nombre de vue, celle des rubriques, statistiques... pourtant j'ai pris le code entier ?
Désolée du dérangement en tout cas, et merci d'avance pour ton aide :)
Je pense que pour le coup tu dois juste ajouter les modules qui correspondent à tout ça non ? o: (sauf si c'est déjà fait?)
Bonsoir, merci pour ton aide ^^ du coup j'ai changes des choses dans 'modifier le thème" par rapport à la disposition de la page etc ^^
Mais le titre est encore invisible :/
Le titre de quoi ? Des modules ? Ou des articles ? Pour les modules, des fois par défaut il n'y a pas de titre et c'est à nous de l'ajouter, mais après peut être que la police est juste de la même couleur que le fond ? (si tu as un peu modifier le thème c'est peut être pour ça que les titres se voient plus ?)
Le titre de mon blog, il est invisible, je sais pas si c'est normal ou pas car normalement il devrait se trouver en haut ?
Mmh, là pour le coup je sais pas, peut être que le code a été modifié et du coup le titre a été modifié ou alors, ton blog n'a pas de titre ? Enfin je veux dire quand tu fais " configuration > configuration général > titre du blog : " il y a bien le titre écrit ? Si non, c'est peut être pour ça qu'il ne s'affiche pas ? Après j'en ai pas la moindre idée si le problème vient pas de là XD
x) merci quand même de ton aide :p
Le titre y est ^^ je pense que ça doit être par rapport à la taille ou un truc du genre :p
merci à toi :D
Bonjour ou bonsoir Nagalia
Je voudrais changer l'image du petite homme que si trouve au bas du contenue! Mais je trouve pas le code! :/ Merci de m'aidé! ^^
Enlève sa :
#content {min-height: 60%;
position: absolute;
color: rgba(0,0,0,0.7);
width: 100%;
text-align: justify;
margin: 0;
margin-top: 420px;
background: rgb(124,108,88) url(http://img15.hostingpics.net/pics/538911judaldroit.png) no-repeat 101.5% 100%;
}
Et tu l'auras plus ;)
Salut, c'est encore moi !
Cette fois je cherche le code pour le module de recherche, j'aimerais pouvoir faire la même chose en mettant le champ de texte et le bouton côte à côte :3
Salut, si je me trompe pas c'est cette partie du code
#menu2 .module_menu_type_search { position: absolute;
width: 350px;
left: 300px;
top: 353px;
}
#menu2 .module_menu_type_search .module_menu_titre {height: 0px;
padding: none;
margin: none;
display: none;
}
#menu2 .module_menu_type_search input[type=text]{ border: none;
background: rgba(255,255,255,0.7);
border-radius: 3px;
float: left;
height: 23px;
margin-top:0px;
}
#menu2 .module_menu_type_search input[type=submit]{
margin-top: -20px;
border: none;
border-radius: 3px;
height: 25px;
background: rgba(226,193,126,0.6);
}
Coucou Nagalia ! Ca va ?
Je voulais te demander... quel est le code qui permet de faire disparaître la menus-barre sans qu'il n'y ai de "trou de couleur", que le header soit directement relié au haut de la page sans la menus-barre et qu'au survol de l'espace menus-barre elle réapparaisse ? Car je veux juste la cacher, non l'enlever.
Merci en tout cas, je te demande car j'ai remarqué cela sur ton thème et ça m'a intrigué.
Bonne soirée.
Sasha27
=>http://fanstasy-graph.eklablog.net/barre-d-outil-eklablog-a108104996#codePratique
La petite explication est juste avant le 3eme code ;)
Oh ! Merci beaucoup beaucoup c'est exactement ça ! :3
D'ailleurs, en re-traîtant le code de la menubare de ce thème, j'ai abouti à pas mal de chose très jolies ! Bravo, et merci beaucoup ! :3
J'ai un problème, ça me donne ça sur le menu, j'ai essayé de changer plein de trucs mais ça ne change rien ><
Tu pourrais m'aider s'il te plait? ;w;
C'est superbement magnifique, mais il y a un petit bémol :/ En effet, mon titre ne veut pas apparaître sur le blog ! Je ne sais pas si c'est à cause de la couleur ou encore si c'est la taille, mais comme je ne m'y connais pas tellement en codage, je n'arrive pas à en trouver la source ! Si quelqu'un pouvait m'aider... :/ Voici ce que ça me donne lorsque j'entre le code
LittleEcrivaine, ça me fait la même chose aussi :/ Pour le menu comme je l'ai dit précédemment et pour le titre aussi...
Pour regler il me semble qu'il faudra modifier les codes (je suis pas sur) mais :
.Il faut que Nagalia soit d'accord on sait jamais au cas ou sa la dérangerait...
.Si on a l'accord et bah j'essayerai de me débrouiller en codage :) ! (Petit bonjour a l'elfe noire en passant;))
J'ai eu le même problème aujourd'hui après 30 minutes à jouer avec le css, je me suis rendu compte qu'il suffit de changer les margin top-letf-right et ensuite de choisir la couleur désiré (:
Merci nagalia pour le thème, il rend super bien :)
Bonjour ! Je voulais savoir comment l'on faisait pour que l'on voit la barre de menu en haut, car moi cela fait un trou blanc et se n'est pas forcément jolie, merci de votre réponse !
Je vais prendre quelques codes de ce thème pour Ace Attorney Soluces :) je viens de tester le thème et effectivement y a quelques soucis au niveau des marges, etc... mais c'est un très beau thème quand même !
@Haya-chan- : regarde là http://fanstasy-graph.eklablog.net/barre-d-outil-eklablog-a108104996#codePratique
ai'je le droit de changer un peu le thème(avec ta permission bien sur)et si tu dis oui je te promets que je continuerais a dire que c'est bien toi qui l'a fait *vu que c'est la vérité^^*
Je prends ce thème pour un blog de rpg fait avec une amie !
Merci énormément pour ces magnifiques thèmes que tu fais ! ♥
bonswaar! :0
J'aimerais changer les couleurs du thème , (aux couleurs plutôt bleu, rose pâle etc.)
Mais je ne sais pas comment changer les couleurs... :/ pouvez-vous m'expliquer s'il vous plaît ?-
Mercredi 14 Décembre 2016 à 19:49
1 - Beaucoup de motivation pour décortiquer mon code XD
2 - Les couleurs sont définis par les propriétés
background
pour les couleur de fond
color
et les couleurs de texte
Il faut remplacer leur valeur par celle de ta couleur (en rgba comme moi, ou en hexa)
-
J'ai réussi a changer les couleurs ! Sauf celui du contenu ... :|
Quel code as-tu mis pour la couleur du contenue s'il te plait ? comme sa je le retrouverai plus vite !
Je t'emprunte le thème (Bon après c'est sur mon blog perso ou je stock des choses juste pour que ce soit jolie xD)
bonjour ! je me permets d'emprunter quelques codes, merci pour le travail que tu fais ! évidemment, je vais te créditer. c:
Suivre le flux RSS des commentaires
Ajouter un commentaire
-
Graphisme
Codage
Communauté
Libre Service
Aide
-
Créer mon blog
On copie/colle le code et on le mets dans le CSS (pour savoir :3)