Bonsoir ! Pour commencer, permets-moi de te renvoyer vers certains articles de ce blog qui pourraient te guider dans la modification de ta barre de navigation :

1. http://portfolio.ek.la/barre-de-navigation-a5874897
2. http://portfolio.ek.la/fond-des-sous-menus-a17695675
3. http://portfolio.ek.la/fleches-barre-nav-a17695427

Une fois que tu auras fait le tour de ces articles, n'hésite pas à revenir poster un commentaire si tu souhaites faire une modification supplémentaire qui n'aurait pas été mentionnée dans les articles !

De ce que je vois, le seul code dont tu aurais besoin pour créer un menu ressemblant à celui de ton exemple serait celui qui permet d'afficher du texte par-dessus l'image à son survol. Le reste, c'est-à-dire l'image et les liens sous l'image, peut se faire très facilement dans un module simple dans ton menu via Apparence > Gérer les menus > Ajouter un module

Il se peut toutefois que tu ne souhaites pas que ce « module » fasse partie intégrante de ton menu, auquel cas il faut le faire de A à Z avec un petit peu de HTML et de CSS ! Ta question concerne-t-elle plutôt ce second cas ?

Bonsoir à tous, et mes excuses pour le retard !

@Asuuki : Le blog n'existe plus, ce qui ne m'étonne pas étant donné le temps qui s'est écoulé entre ta demande et aujourd'hui, vraiment désolée ;;

@Kilami- : Essaie donc d'ajouter le code suivant dans ton CSS :
.module_menu_contenu_block > form br { display: none }

@Intensity : Après un petit tour rapide sur ton blog, je présume que tu as pu trouver la réponse à ta question ! ^^

Si ta demande est toujours valable, peux-tu m'envoyer le lien du blog où tu souhaites faire cette action ?

@Hazuki : Bonjour ! Je te renvoie vers ce très bon tutoriel, attention, il faut que le javascript soit activé sur ton compte !

@asladjimi : Ajoute ceci dans ta feuille CSS :
.module_contenu { border-radius: 20px; }

20px est le degré d'arrondissement de tes angles, tu peux le changer à ta guise.

Il n'est malheureusement pas possible non plus de choisir de n'afficher que quelques éléments de la barre de menu.

Bonjour vincedu30,
À moins d'utiliser la version payante d'eklablog, il est impossible d'enlever complétement cette barre ! Vous pouvez cependant la rendre invisible et ne la laisser apparaître qu'au survol en ajoutant le code ci-dessous dans Apparence > Modifier le thème > Ajouter du CSS :

#menubar { opacity: 0; }
#menubar:hover { opacity: 1; }

Bonsoir Young Girl !
J'imagine que c'est de ce blog-là dont tu me parles ? À ce que je vois, il n'est pas centré et doit probablement être positionné en fonction du bord gauche de ta page. Si tel est le cas, alors il ne devrait pas y avoir de problème d'adaptation au niveau des écrans. Il te suffit de positionner ton menu par rapport au bord gauche du blog.

HTML :
<div id="menunav2"><img src="http://ekladata.com/21QNfq6SWTu5ywdLTG9VzXAG3yc@180x251.png" alt="" width="180" height="251" /><a href="/">Lien 1</a><a href="/">Lien 2</a><a href="/">Lien 3</a><a href="/">Lien 4</a><a href="/">Lien 5</a></div>

CSS :
#menunav2 {
    position: absolute;
    top: 0px; /*Distance entre le bord supérieur de la page et ton menu*/
    left: 0px; /*Distance entre le bord gauche de la page et ton menu*/
    width: 250px; /*Largeur de l'ensemble de ton menu*/
}
#menunav2 img {
    float: left;
    margin-right: 5px;
}
#menunav2 a {
    background-color: black; /*Couleur de fond des liens*/
    display: block;
    padding: 2px;
    margin-bottom: 3px;
}

Cela te convient-il ?

Bonjour Young Girl ! Je pense avoir compris ce que tu voulais. Alors, j'aurais besoin d'accéder à ton blog et également de l'image de ton petit onglet "Memories" en taille réelle, si tu n'y vois pas d'inconvénient !

@ Celebrendal : Si j'ai bien compris, tu souhaites faire ça sur tumblr ? Alors, le mieux serait de rajouter ceci juste après la balise </content> de ton thème, il s'agit du code utilisé sur ton blog d'exemple :

<img style="position: fixed; max-height: 100%; max-width: 500px; right:0px; bottom:0px; z-index: 9999;" src="urldetonimage.png">

500px à remplacer par la largeur de ton image. Ici, z-index indique la profondeur et donc plus le chiffre sera grand, plus l'image sera mis en avant (dans ce cas précis, elle va passer par dessus tous les éléments). Tu peux réduire cette valeur et même la rendre négative si tu souhaites faire passer ton image en dessous de tes billets !

@ Jö Kê : Je crois que tu as trouvé ta solution mais, dans tous les cas la meilleure façon de cacher un module, c'est de le mettre dans un menu que tu n'utilises pas et de donner une largeur de 0 à ce menu !

Effectivement, il y avait un conflit avec un autre code qui empêchait donc ton module de sortir du menu. C'est corrigé. Insères donc ce code-là dans ton CSS pour les visiteurs :

li#module_menu142560112 {
    left: 50%;
    margin-left: -100px; /*Valeur à modifier en fonction de l'emplacement que tu souhaites*/
    position: absolute;
    top: 0; /*Distance entre le haut de ton blog et le module*/
    width: 200px;
}

Ensuite, pour la barre de navigation, utilise ce code-là :

#menubar {
opacity: 0.7; /*Tu peux modifier cette valeur entre 0 et 1 à ta guise*/
transition : all 600ms ease;
-moz-transition : all 600ms ease;
-webkit-transition : all 600ms ease;
}

#menubar:hover {
opacity: 1;
}

C'est là où l'on insère les codes ; Apparence > Modifier le thème > Ajouter du CSS
Pour me donner l'accès à ton blog, il te suffit de te rendre dans Configuration > Permissions puis m'ajouter en tant qu'administrateur le temps que je consulte ta feuille et que j'y ajoute les codes demandés !

Je rencontre quelques problèmes pour ton module des derniers visiteurs, pourrais-je avoir accès à ta feuille CSS ?

Je ne vois malheureusement pas de photos ! ;;

Pourrais-tu me repréciser ce que tu souhaites exactement avec des images ?

Bonjour Arye !

Je te propose ceci pour le premier menu, à insérer dans ton CSS :

.tete {
    background-color: red; /*Fond du titre*/
    display: block;
    width: 200px; /*Largeur de ton menu*/
    height: 19px; /*Hauteur du menu à l'état normal*/
    overflow: hidden;
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
}

.tete p { margin: 4px; }
.tete:hover { height: 73px; /*Hauteur du menu au survol*/ }

.corps p {
    margin: 0 !important;
    padding: 2px;
    background-color: blue; /*Fond du contenu*/
}


En plus de ça, à mettre dans l'HTML de ton module :

<div class="tete">
<p>Navigation</p>
<div class="corps">
<p>Lien 1</p>
<p>Lien 2</p>
<p>Lien 3</p>
</div>
</div>

Au niveau du second blog, je ne vois pas vraiment de quelle lueur tu parles (car je n'en vois pas) mais d'après ce que tu me décris, j'en déduis que tu es à la recherche du code CSS suivant :

#menu a:hover { text-shadow: white 0.1em 0.1em 0.2em; }

Je m'excuse par avance si ce n'est pas ce que tu demandais ! ;;

@Naff : C'est tout bon !

@Crisis-Fansub : J'ai donc fini par trouver une alternative ! En espérant que cela te convienne, je te propose les codes suivants :

CSS :

#progress { margin: 0 auto; }
.graph {
                width: 200px;
                height: 20px;
                border: 1px solid #888;
                background: rgb(168,168,168);
                background: -moz-linear-gradient(top, rgba(168,168,168,1) 0%, rgba(204,204,204,1) 23%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(168,168,168,1)), color-stop(23%,rgba(204,204,204,1)));
                background: -webkit-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
                background: -o-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
                background: -ms-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8a8a8', endColorstr='#cccccc',GradientType=0 );
                background: linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
                position: relative;
            }
            #bar {
                height: 19px;
                background: rgb(150, 202, 45);
                background: -moz-linear-gradient(top, rgba(150, 202, 45, 1) 0%, rgba(100, 142, 16, 1) 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,197,120,1)), color-stop(100%,rgba(150, 202, 45, 1)));
                background: -webkit-linear-gradient(top, rgba(150, 202, 45, 1) 0%,rgba(100, 142, 16, 1) 100%);
                background: -o-linear-gradient(top, rgba(150, 202, 45, 1) 0%,rgba(100, 142, 16, 1) 100%);
                background: -ms-linear-gradient(top, rgba(150, 202, 45, 1) 0%,rgba(100, 142, 16, 1) 100%);
                background: linear-gradient(top, rgba(150, 202, 45, 1) 0%,rgba(100, 142, 16, 1) 100%);
                border-top: 1px solid #fceabb;
            }
            #bar p { position: absolute; text-align: center; width: 100%; margin: 0; line-height: 20px; }


HTML :

<div style="margin: 0 auto; margin-top: 5px; width: 191px;">
<div class="quotetitle"><input style="margin: 0; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = ''; this.value = 'Cacher'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Afficher'; }" src="http://ekladata.com/by-o3enh-WU3uD83a3Y2kk-Ovdo@191x114.png" type="image" value="Afficher" /></div>
<div class="quotecontent">
<div style="display: none;">
<p style="text-align: center;"><strong>Traduction</strong></p>
<div id="progress" class="graph">
<div id="bar" style="width: 98%;">
<p>98%</p>
</div>
</div>
<p style="text-align: center;"><strong>Timing</strong></p>
<div id="progress" class="graph">
<div id="bar" style="width: 75%;">
<p>75%</p>
</div>
</div>
<p style="text-align: center;"><strong>Edit</strong></p>
<div id="progress" class="graph">
<div id="bar" style="width: 65%;">
<p>65%</p>
</div>
</div>
<p style="text-align: center;"><strong>Qcheck</strong></p>
<div id="progress" class="graph">
<div id="bar" style="width: 0%;">
<p>0%</p>
</div>
</div>
<p style="text-align: center;"><strong>Encodage</strong></p>
<div id="progress" class="graph">
<div id="bar" style="width: 0%;">
<p>0%</p>
</div>
</div>
<p style="text-align: center;"><strong>Upload</strong></p>
<div id="progress" class="graph">
<div id="bar" style="width: 0%;">
<p>0%</p>
</div>
</div>
</div>
</div>
</div>

Alors, pour ta première question, colle ça dans le fenêtre d'édition HTML de ton module :
<p><a onclick="this.nextSibling.style.display=((this.nextSibling.style.display=='none')?'':'none');"><img src="urldetonimage.png" alt="" /></a><span style="display: none;"><br />Le contenu à afficher ici</span></p>

Et puis pour la barre de progression animée, je pense que cet article pourra grandement t'aider !

Alors en fait, moi je triche un peu (eh oui.). En principe, tu ne peux pas étirer le menu jusqu'en bas de ton blog. C'est en fait le fond de ma page (Apparence > Format du blog > Fond > Fond de la page) répété verticalement qui donne cette impression ! Je ne sais pas si tu as compris l'astuce ? Le fond en question est celui-ci.

Ouvre ton espace d'édition HTML et insères cela à la place de ton image :
<img style="float: left" src="urldetonimage.jpg">

Il y avait effectivement un souci avec le code, je n'ai pas pu déceler l'erreur et j'ai donc procédé autrement ; j'ai rajouté ton menu dans le module « ♥ Kuroe et Luna ♥ », on ne le voit pas, mais tu peux l'éditer si tu ouvres le menu et donc mettre des liens aux deux noms. J'ai positionné le menu en utilisant du CSS, tu verras donc que j'ai rajouté un code. En espérant que cela te convienne !

Le javascript est-il activé sur ton compte ? S'il ne l'est pas, alors il ne serait pas étonnant que ça ne fonctionne pas !

Salut Muramai ! Pour ta première question utilise ça :

.module_menu_type_lastvisitors img { display: block; margin-bottom: 5px; }

Quant à la deuxième, je ne l'ai pas comprise... ;;

Bonsoir Just Δngel ! C'est tout à fait possible, je te propose le code CSS ci-dessous :

.module_titre_contenu, .module_titre_contenu a {
text-shadow: 2px 0 .2px #FF0000, -2px 0 .2px #00F1F5;
color:#000;
}

Ayant eu quelques soucis de connexion tout à l'heure, j'ai eu du mal à placer directement le code sur ton blog. Je te propose donc de l'ajouter par toi-même dans l'espace HTML d'un module simple :

<div id="forIE">
<div id="extramenu">Kuroe<br />Luna</div>
</div>
<script type="text/javascript">// <![CDATA[
window.onload=function()   
    {   
     var MonDiv=document.createElement('DIV');  
     MonDiv.setAttribute('id', 'objet_copie');  
     if (Browser.name=='ie'){MonDiv.innerHTML=document.getElementById('forIE').innerHTML;}  
    else  
    {MonDiv.innerHTML=document.getElementById('extramenu').innerHTML;}  
     MonDiv.className = '';  
     MonDiv.style.position='relative';  
     MonDiv.style.right='100px';  
     MonDiv.style.top='50px';  
     var Myctn=document.getElementById("header");  
     var test=Myctn.getElementById("titre_header");  
     Myctn.insertBefore(MonDiv,test);  
     var noeud=document.getElementById('forIE');  
     noeud.parentNode.removeChild(noeud);  
    }
// ]]></script>

100px et 50px sont des valeurs à modifier, c'est ce qui te permettra de trouver la bonne position de ton menu !

Bonjour Naff !
L'emplacement indiqué sur ta capture me parait bien petit, quel genre de menu souhaites-tu mettre à cet endroit ? Un menu déroulant ? Aussi, pourrais-je accéder à ton blog ? De cette façon, il sera bien plus simple pour moi de visionner tout ça et d'accéder au code source de ton blog !

Quelque chose comme ça ?

HTML (à insérer dans l'espace HTML d'un module simple) :

<div id="side">&Eacute;crivez votre texte...</div>

CSS :

#side {
    background-color: black;
    position: absolute;
    left: -220px;
    width: 200px;
    padding: 10px;
    height: 300px;
    border-right: 10px solid;
    transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
}
#side:hover {
    left: 0;
} 

Sers-toi du code ci-dessous Wolfie !

#menubar {
     opacity: 0;
     transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
}

#menubar:hover { opacity: 1;  }

Bonjour Queen ! Ci-dessous les codes que tu demandes :

HTML :

<div id="image">
<div class="survol">&Eacute;crivez votre texte...</div>
<img src="http://static.tumblr.com/d96ad011c95be0a8ae38e0e3d1136b01/2icx37z/W6Lmvc1zk/tumblr_static_sdsdsd.png" alt="" /></div>

CSS :

.survol {
    background-color: #ffffff;
    height: 401px;
    opacity: 0;
    padding-top: 35px;
    position: absolute;
    text-align: center;
    width: 401px;
    transition: all 0.6s ease;
}

#image:hover .survol {
    height: 401px;
    opacity: 0.9;
    padding-top: 35px;
    width: 401px;
}

J'ai passé pas mal de temps à tenter de récupérer l'icone dans la barre d'outil en gardant sa fonction, j'ai donc fini par trouver un moyen de placer la même icone dans le header. Malheureusement, seule la fonction Ajouter aux favoris fonctionne, je ne suis pas assez calée en javascript pour pouvoir faire la fonction inverse soit Retirer des favoris. Malgré tout, je laisse le code, il pourrait peut-être en aider certains. C'est à insérer dans l'espace HTML d'un module simple :

<div id="forIE">
<div id="monobjet"><img onclick="changeimg(this);MenuBar.favoriteBlogClick('add');return false;" src="http://hors-sujet.lo.gs/images/menubar/icon_nofavorite.png" alt="" /></div>
</div>
<script type="text/javascript">// <![CDATA[
window.onload=function()  
    {  
     var MonDiv=document.createElement('DIV'); 
     MonDiv.setAttribute('id', 'objet_copie'); 
     if (Browser.name=='ie'){MonDiv.innerHTML=document.getElementById('forIE').innerHTML;} 
    else 
    {MonDiv.innerHTML=document.getElementById('monobjet').innerHTML;} 
     MonDiv.className = ''; 
     MonDiv.style.position='relative'; 
     MonDiv.style.left='100px'; 
     MonDiv.style.top='50px'; 
     var Myctn=document.getElementById("header"); 
     var test=Myctn.getElementById("titre_header"); 
     Myctn.insertBefore(MonDiv,test); 
     var noeud=document.getElementById('forIE'); 
     noeud.parentNode.removeChild(noeud); 
    }
// ]]></script>
<script type="text/javascript">// <![CDATA[
function changeimg(monimage) {
  monimage.src = (monimage.src=="http://hors-sujet.lo.gs/images/menubar/icon_nofavorite.png" ) ? "http://hors-sujet.lo.gs/images/menubar/icon_favorite.png" : "http://hors-sujet.lo.gs/images/menubar/icon_nofavorite.png";
}
// ]]></script>

100px c'est l'espace qui sépare l'icone du bord gauche du header, valeur modifiable.
50px c'est l'espace qui sépare l'icone du bord supérieur du header, valeur modifiable aussi.

Salut Seventeen ! Lorsque tu parles des favoris, tu parles du coeur ?

Bonjour Ayumi Chan ! Oui, avec un peu d'HTML et du CSS (la blogueuse en question semble s'y connaître en la matière), ce genre de présentation est faisable. Je ne vais pas te proposer le code utilisé par la blogueuse en question, puisqu'elle y a sûrement passé du temps et que cela ne se fait pas, mais un code similaire qui devrait faire l'affaire. Je t'envoie le tout par MP !

Ah, ça c'est étrange ! Pourrais-je avoir accès à ton blog pour regarder ça ?

@ Azuka : Ah, je vois ce que tu veux dire, je crois savoir où tu as vu ça. Mais il ne s'agit pas de la menubar, puisque l'on ne peut pas remplacer les éléments de la menubar par d'autres. Cette barre que tu as vue a été faite de A à Z, en fait, il ne s'agit pas de la barre d'Eklablog modifiée. Ce n'est peut-être pas exactement ce que tu souhaites faire, mais je peux te proposer ça, en espérant que cela t'aide :

CSS :

#barre {
    position: absolute;
    left: 50%;
    top: 110px; /*Remplacer la valeur par la hauteur de ton header*/
    width: 800px; /*Largeur de la barre*/
    margin-left: -400px; /*Moitié négative de la largeur de la barre*/
    background-color: #000000; /*Fond de la barre*/
}
.liens { font-family: Arial; font-size: 12px; }
.liens a {
    font-weight: bold;
    display: inline-block;
    padding: 6px;
    color: #f1abc9; /*Couleur du texte*/
}
.liens a:hover { color: #ffffff; /*Couleur du texte au survol*/ }

HTML (à insérer dans un module simple) :

<div id="barre">
<div class="liens">
<table>
<tbody>
<tr>
<td><a href="http://eklablog.com/"><img src="http://www.eklablog.com/images/menubar/logo.png" /></a></td>
<td><a href="http://">Lien 1</a></td>
<td><a href="http://">Lien 2</a></td>
<td><a href="http://">Lien 3</a></td>
<td><a href="http://">Lien 4</a></td>
</tr>
</tbody>
</table>
</div>
</div>

Tout ce qui est en rouge est à remplacer.

@ Pii_Lov3 : Le code qui suit, à insérer dans l'espace HTML d'un module simple, permet de faire ça. Par contre, il te faut le javascript activé sur ton compte pour le mettre en place (s'il n'est toujours pas activé sur le tien, une autre alternative serait qu'un utilisateur dont le javascript est activé sur son compte te le mette en place). En principe, il ne devrait pas y avoir de problème au niveau de la présentation du menu puisqu'elle va reprendre celle que tu as paramétrée dans l'interface Apparence !

<style type="text/css"><!--
#menu, #menu ul /* Liste */     
 
{       z-index:100;
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 160%; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}
 
#menu a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding : 0; /* aucune marge intérieure */    
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
}
 
#menu li /* Elements des listes */ {  float : left; }
 
#menu li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 139px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}
 
 
#menu li ul li /* Éléments de sous-listes */
{
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        margin-top: 0;
}
 
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li                
{
}
 
#menu li ul ul 
{
        margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 1px solid black ; /* Petite bordure à gauche pour ne pas coller ... */      
}
 
 
html>body #menu li ul ul                
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}
#menu li:hover ul ul, #menu li.sfhover ul ul 
/* Sous-sous-listes lorsque la souris passe sur un élément de liste */ 
{         left: -999em; 
}  
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  
 
{         left: auto; /* Repositionnement normal */ 
        min-height: 0; /* Corrige un bug sous IE */ }
--></style>
<p>/* Code HTML */</p>
<ul id="menux">
<li><a href="http://asiaddictfansub.eklablog.fr/news-sorties-c21134714">Accueil</a></li>
<li><a href="http://asiaddictfansub.eklablog.fr/menu-des-projets-c24815476">Projets</a>
<ul>
<li><a href="http://asiaddictfansub.eklablog.fr/en-cours-c25040398">En cours</a></li>
<li><a href="http://asiaddictfansub.eklablog.fr/finis-c25040082">Finis</a></li>
<li><a href="http://asiaddictfansub.eklablog.fr/futurs-c25040466">Futurs</a></li>
</ul>
</li>
<li><a href="http://asiaddictfansub.eklablog.fr/menu-des-musiques-c24644622">Musiques</a>
<ul>
<li><a href="http://asiaddictfansub.eklablog.fr/fiches-des-clips-c25103910">Clips</a></li>
<li><a href="http://asiaddictfansub.eklablog.fr/les-musiques-c25103982">OST</a></li>
</ul>
</li>
<li><a href="http://asiaddictfansub.eklablog.fr/on-a-besoin-de-vous-a92935895">Help us</a></li>
<li><a href="http://asiaddictfansub.eklablog.fr/vos-idees-c24815382">Id&eacute;es</a></li>
<li><a href="http://asiaddictfansub.eklablog.fr/notre-team-c24815356">&Agrave; propos</a></li>
</ul>
<p>/* Code Javascript */</p>
<script type="text/javascript">// <![CDATA[
window.onload=function() {
var MonDiv=document.createElement('DIV');
MonDiv.setAttribute('id', 'menu');
MonDiv.innerHTML=document.getElementById('menux').innerHTML;
MonDiv.style.position='relative';
var Myctn=document.getElementById("header");
var test=Myctn.getElementById("titre_header");
Myctn.insertBefore(MonDiv,test);
var noeud=document.getElementById('menux');
noeud.parentNode.removeChild(noeud);}
// ]]></script>

Aaah ! Mais le code que je t'ai donné n'est pas le bon alors, tu peux le supprimer ! C'est le menu du header dont tu me parles, pas la menubar donc. Il te suffit d'aller dans Apparence > Modifier le thème > En-tête > Menu puis cocher En ligne et cliquer sur Déplacer à la souris. Ça devrait être bon !

Couper la hauteur ? Je ne vois pas bien ce que tu veux dire par là ! Pour retirer la barre blanche, utilise ce code-là :

#top { display: none; }

Bonjour Azuka ! Je pense avoir compris, peut-être que c'est ce code-là que tu cherches :

#menubar {
    margin-top: 110px; /*Remplacer la valeur par la hauteur de ton header*/
    position: absolute;
}

@ Sasha27 : Alors, pour la couleur du pseudo dans la menubar, utilise ce code :
#menubarabsolute .menubar_section > a {
    color: #000000; /*Couleur du texte à remplacer*/
}

Et pour l'avatar, utilise celui-ci :
#menubarabsolute td#menubar_section_account img { border-radius: 50px; }

@ Pii_Lov3 : Tu n'arrives pas à aller à la ligne ? Je n'ai pas de problème pour revenir à la ligne de mon côté mais, si la touche Entrée ne fonctionne pas, essaie la combinaison Maj+Entrée, ça devrait régler le problème ! Ensuite, oui, tu peux bien évidemment régler l'espace entre les titres et les contenus, il te suffira d'agrandir les valeurs surlignées dans le code :

<table style="width: 811px; background-color: #000000; margin: auto;">
<tbody>
<tr>
<td>
<p style="width: 229; height: auto; padding: 5px; background-color: #ffffff; text-align: center; margin: 0px; letter-spacing: -0.5px; font-size: 16px;"><strong>nouveaut&eacute;s</strong></p>
<div style="height: 229px; width: auto; overflow: auto; padding-right: 4px; padding-left: 5px; text-align: left; background-color: #131111;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec lorem id eros adipiscing varius. Nam ut ultricies dui. Morbi dolor urna, elementum sed blandit et, aliquet eu metus. Etiam tincidunt sodales quam, vitae ullamcorper risus. Phasellus at pellentesque metus. Pellentesque nec metus consequat, tincidunt odio nec, faucibus augue. Nullam dignissim lacus dolor, et tempus felis tempor vitae. Mauris dictum nisi nec massa porttitor, vel auctor nisi lobortis. Ut a tortor id velit vehicula suscipit. Praesent blandit orci turpis, quis pharetra nunc porta eu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus fermentum suscipit quam id lacinia. Aliquam mattis elit nec mi molestie ultricies. Proin cursus luctus nunc sit amet ultrices.</p>
<p>Integer iaculis lorem et tristique fermentum. Phasellus vitae turpis orci. Aenean eget imperdiet sapien. Vivamus rutrum ultricies velit non semper. Morbi sem magna, lacinia at porttitor eu, consectetur ut libero. Aenean consectetur erat ligula. Maecenas sit amet odio dapibus, condimentum risus sit amet, vehicula orci.</p>
<p>Quisque accumsan ipsum rhoncus, tincidunt felis eu, varius enim. Fusce ac ligula rhoncus, consectetur quam sit amet, eleifend lacus. Vestibulum varius velit sed quam auctor, sed vestibulum lacus accumsan. Donec interdum arcu eu sem commodo, nec suscipit enim lacinia. Proin pharetra est et turpis porttitor, non molestie mi commodo. In adipiscing leo quis vestibulum malesuada. In volutpat purus metus, vel sodales elit mollis consequat. Etiam sagittis facilisis nisi eu convallis. Vestibulum ut dapibus nulla. Donec lacinia tempus ligula, ultrices fermentum ipsum pellentesque id. Pellentesque ultricies sem eu tortor mattis lobortis in nec ligula. Sed iaculis tellus sit amet eros aliquam, id dapibus turpis ultrices. Nullam quis risus at orci dapibus hendrerit. Suspendisse potenti. Suspendisse bibendum erat interdum ipsum venenatis aliquam.</p>
</div>
</td>
<td>
<p style="width: 470px; height: auto; padding: 5px; background-color: #ffffff; text-align: center; margin: 0; letter-spacing: -0.5px; font-size: 16px;"><strong>coup de c&oelig;ur</strong></p>
<p style="margin: 1px 0 0 0;"><iframe src="//www.youtube.com/embed/pls2oSGsxwY" frameborder="0" width="480" height="228" allowfullscreen="allowfullscreen"></iframe></p>
</td>
</tr>
</tbody>
</table>

Oh, et, tout le plaisir est pour moi !

Est-ce que cela te convient ? Le code est donc à coller dans l'espace HTML de ton article :

<table style="width: 811px; background-color: #000000; margin: auto;">
<tbody>
<tr>
<td>
<p style="width: 229; height: auto; padding: 5px; background-color: #ffffff; text-align: center; margin: 0; letter-spacing: -0.5px; font-size: 16px;"><strong>nouveaut&eacute;s</strong></p>
<div style="height: 229px; width: auto; overflow: auto; padding-right: 4px; padding-left: 5px; text-align: left; background-color: #131111;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec lorem id eros adipiscing varius. Nam ut ultricies dui. Morbi dolor urna, elementum sed blandit et, aliquet eu metus. Etiam tincidunt sodales quam, vitae ullamcorper risus. Phasellus at pellentesque metus. Pellentesque nec metus consequat, tincidunt odio nec, faucibus augue. Nullam dignissim lacus dolor, et tempus felis tempor vitae. Mauris dictum nisi nec massa porttitor, vel auctor nisi lobortis. Ut a tortor id velit vehicula suscipit. Praesent blandit orci turpis, quis pharetra nunc porta eu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus fermentum suscipit quam id lacinia. Aliquam mattis elit nec mi molestie ultricies. Proin cursus luctus nunc sit amet ultrices.</p>
<p>Integer iaculis lorem et tristique fermentum. Phasellus vitae turpis orci. Aenean eget imperdiet sapien. Vivamus rutrum ultricies velit non semper. Morbi sem magna, lacinia at porttitor eu, consectetur ut libero. Aenean consectetur erat ligula. Maecenas sit amet odio dapibus, condimentum risus sit amet, vehicula orci.</p>
<p>Quisque accumsan ipsum rhoncus, tincidunt felis eu, varius enim. Fusce ac ligula rhoncus, consectetur quam sit amet, eleifend lacus. Vestibulum varius velit sed quam auctor, sed vestibulum lacus accumsan. Donec interdum arcu eu sem commodo, nec suscipit enim lacinia. Proin pharetra est et turpis porttitor, non molestie mi commodo. In adipiscing leo quis vestibulum malesuada. In volutpat purus metus, vel sodales elit mollis consequat. Etiam sagittis facilisis nisi eu convallis. Vestibulum ut dapibus nulla. Donec lacinia tempus ligula, ultrices fermentum ipsum pellentesque id. Pellentesque ultricies sem eu tortor mattis lobortis in nec ligula. Sed iaculis tellus sit amet eros aliquam, id dapibus turpis ultrices. Nullam quis risus at orci dapibus hendrerit. Suspendisse potenti. Suspendisse bibendum erat interdum ipsum venenatis aliquam.</p>
</div>
</td>
<td>
<p style="width: 470px; height: auto; padding: 5px; background-color: #ffffff; text-align: center; margin: 0; letter-spacing: -0.5px; font-size: 16px;"><strong>coup de c&oelig;ur</strong></p>
<p style="margin: 1px 0 0 0;"><iframe src="//www.youtube.com/embed/pls2oSGsxwY" frameborder="0" width="480" height="228" allowfullscreen="allowfullscreen"></iframe></p>
</td>
</tr>
</tbody>
</table>
 

<table style="width: 500px;">
<tbody>
<tr>
<td>
<p style="width: 190px; height: auto; padding: 5px; background-color: #000000; text-align: center; margin: 0;">TITRE VIDEO</p>
<p style="margin: 1px 0 0 0;"><iframe src="http://www.youtube.com/embed/yJDc5vYw_UE" frameborder="0" width="200" height="95"></iframe></p>
</td>
<td>
<p style="width: 299px; height: auto; padding: 5px; background-color: #000000; text-align: center; margin: 0;">TITRE MAJ</p>
<div style="height: 96px; width: 300px; overflow: auto; padding-right: 4px; padding-left: 5px; text-align: left; background-color: #cccccc;">Itaque tum <strong>Scaevola</strong> cum in eam ipsam mentionem incidisset, exposuit nobis sermonem Laeli de amicitia habitum ab illo secum et cum altero genero, C. Fannio Marci filio, <em>paucis diebus post mortem Africani.</em>Eius disputationis sententias memoriae mandavi, quas hoc libro exposui arbitratu meo; quasi enim ipsos induxi loquentes, ne 'inquam' et 'inquit' saepius interponeretur, atque ut tamquam a praesentibus coram haberi sermo videretur.</div>
</td>
</tr>
</tbody>
</table>

width: 500px : largeur totale du cadre dans son ensemble
width: 190px : largeur de l'encadré titre de la vidéo
width="200" : largeur de la vidéo (doit être proportionnelle à la hauteur)
height="95" : hauteur de la vidéo (doit être proportionnelle à la largeur)
width: 299px : largeur de l'encadré titre des mises à jour
height: 96px : hauteur de l'encadré des mises à jour
width: 300px : largeur de l'encadré des mises à jour

J'espère que c'est compréhensible et que tu pourras t'en sortir en modifiant les valeurs à ta guise ! Cela dit, si ce n'est pas du tout ton truc de remplacer à droite à gauche, et si tu as un ordre d'idée de la taille que tu souhaites pour ton encadré (avec une photo représentative de préférence), je peux facilement modifier le code en connaissance de cause et te le renvoyer !

Ensuite, si j'ai bien compris, c'est le sélecteur qu'il te manque puisque tu sais déjà comment faire les transitions ? Le sélecteur à utiliser pour les images qui contiennent des liens est a img { } puis tu insères ton code pour les transitions entre les deux crochets !

Le code HTML est le suivant :

<table style="width: 500px;">
<tbody>
<tr>
<td>
<p style="width: 190px; height: auto; padding: 5px; background-color: #000000; text-align: center; margin: 0;">TITRE VIDEO</p>
<p style="margin: 1px 0 0 0;"><iframe src="http://www.youtube.com/embed/yJDc5vYw_UE" frameborder="0" width="200" height="95"></iframe></p>
</td>
<td>
<p style="width: 299px; height: auto; padding: 5px; background-color: #000000; text-align: center; margin: 0;">TITRE MAJ</p>
<div style="height: 96px; width: 300px; overflow: auto; padding-right: 4px; padding-left: 5px; text-align: left; background-color: #cccccc;">Itaque tum <strong>Scaevola</strong> cum in eam ipsam mentionem incidisset, exposuit nobis sermonem Laeli de amicitia habitum ab illo secum et cum altero genero, C. Fannio Marci filio, <em>paucis diebus post mortem Africani.</em>Eius disputationis sententias memoriae mandavi, quas hoc libro exposui arbitratu meo; quasi enim ipsos induxi loquentes, ne 'inquam' et 'inquit' saepius interponeretur, atque ut tamquam a praesentibus coram haberi sermo videretur.</div>
</td>
</tr>
</tbody>
</table>

En rouge, ce sont les textes que tu pourras modifier. Ensuite, background-color: #000000; c'est la couleur du fond des titres. Pour changer la couleur, tu remplaces #000000 par le code de la couleur qui te convient. Et puis <iframe src="http://www.youtube.com/embed/yJDc5vYw_UE" frameborder="0" width="200" height="95"></iframe> est à remplacer par le code d'intégration de la vidéo youtube que tu souhaites afficher. Attention, pense bien à remplacer width="200" height="95" dans le code que tu obtiendras, sinon la vidéo ne rentrera pas. Enfin, background-color: #cccccc; c'est la couleur du fond des mises à jour, celle qui apparaît gris sur l'exemple. Il te suffit de remplacer #cccccc pour changer la couleur !

Merci de tes compliments, ça me fait vraiment plaisir ! Pour la boîte, c'est quelque chose comme ça que tu souhaiterais ?

Tout va pour le mieux Pii_Lov3, merci ! J'espère que tu te portes bien également. Pour que tous les liens de ton blog fasse une transition au survol, il te faut rajouter ceci dans ton CSS :

a { transition: all 0.6s ease; -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; }

Le temps de transition 0.6s est une valeur que tu peux modifier à ta guise !

Par contre, je ne vois pas les cadres rose sur le menu de ton header. Peut-être que tu les as retirés entre temps ? Quoiqu'il en soit, tente le code suivant, il devrait fonctionner si jamais tu décides d'appliquer un fond rose au survol à nouveau !

#menu a { transition: all 0.6s ease; -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; }

C'est exactement mon souci. ;; Ah, c'est dommage. Je vais essayer d'aller chercher un petit peu, je finirai bien par trouver quelque chose. Je te tiens au courant !

EDIT : Je n'ai malheureusement pas trouvé de moyen d'appliquer la transition sur firefox. Le code suivant passe bel et bien du noir et blanc à la couleur au survol, mais de manière brutale sur firefox tandis que la transition se fait sur chrome. Je n'ai pas trouvé mieux je suis désolée. ;;

img {    
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
     filter: gray; /* IE6-9 */
     -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
     -webkit-backface-visibility: hidden; /* Fix for transition flickering */
     -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
     -ms-transition: all 0.5s ease-in-out;
     -o-transition: all 0.5s ease-in-out;
     transition: all 0.5s ease-in-out; }

img:hover {    
     filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
     -webkit-filter: grayscale(0%);
     -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
     -ms-transition: all 0.5s ease-in-out;
     -o-transition: all 0.5s ease-in-out;
     transition: all 0.5s ease-in-out; }

Ah, aurais-tu un lien ? Ça m’intéresse ! Le code de The Joker que je t'ai proposé juste avant ne fonctionne malheureusement pas sur firefox chez moi. ;; Fais-moi savoir s'il fonctionne de ton côté ! Cela vient peut-être de chez moi si c'est le cas !

Bonjour Whispers ! Un code a été fourni il y a quelques temps, le voici :

img {        
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filterid=\'grayscale\'><feColorMatrix  type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0  0 0.3333 0.3333 0.3333 0 0 0 0 0 1  0\'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(100%);
 transition: all 1s;  
    -moz-transition: all 1s;
    -o-transition: all 1s;  
    -webkit-transition: all 1s;
}    
img:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filterid=\'grayscale\'><feColorMatrix  type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1  0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
 transition: all 1s;  
    -moz-transition: all 1s;
    -o-transition: all 1s;  
    -webkit-transition: all 1s;
}

À remarquer qu'il ne fonctionne pas sur Firefox. Il est toutefois opérationnel avec Chrome ! Tu peux changer les 1s par le temps de transition qui te convient.

Aucun problème ! Le propriétaire du blog en question utilise en fait deux images différentes : une lorsque l'image n'est pas survolée, et une autre lorsque elle est survolée. Le code a utiliser est le suivant :

<img onmouseover="javascript:this.src='urldetonimage1.png';" onmouseout="javascript:this.src='urldetonimage2.png';" src="urldetonimage1.png" alt=""/>

Tu n'as plus qu'à remplacer urldetonimage1.png et urldetonimage2.png par les deux images que tu souhaites utiliser !

Remarque : le javascript doit être activé sur ton compte pour que le code fonctionne.

Bonjour Ayumi Chan ! Les codes suivants t'aideront probablement :

#body { border-top: 0; } /*Enlève le bord blanc*/
#menubar_info { display: none; } /*Enlève le "Aidez eklablog à se développer plus facilement !"*/
#menubar { opacity: 0; transition: all 1s ease; -moz-transition: all 1s ease; -webkit-transition: all 1s ease;} /*Menu barre*/
#menubar:hover { opacity: 1; transition: all 1s ease; -moz-transition: all 1s ease; -webkit-transition: all 1s ease; } /*Menu barre au survol*/

Pour plus de codes de personnalisation de la menu barre, je t'invite à consulter cet article du blog : http://portfolio.ek.la/barre-de-navigation-a5874897

Voici pour toi Pii_Lov3 ! J'ai uniquement modifié le CSS du .ma_boite, tu pourras donc le remplacer par ceci :

.ma_boite
{
width:200px;
height:18px;
margin: auto;
overflow:hidden;
transition: height 1s;
-moz-transition: height 1s;
-webkit-transition: height 1s;
-o-transition: height 1s; 
}

Ah, alors cela signifie probablement que le javascript n'est pas activé sur ton compte ! Tu dois donc envoyer un message à Stéphanie pour lui demander de l'activer !

Tout le plaisir est pour moi Pii_Lov3 !
À l'aide du tutoriel de Papasti que je remercie infiniment (http://le-blog-facile.ek.la/menu-horizontal-superieur-deroulant-methode-simplifiee-p348708), j'ai pu élaborer un menu plus ou moins ressemblant à celui de ton exemple !

Insère ce code dans l'espace HTML d'un module simple :
<style type="text/css"><!--
#menu, #menu ul /* Liste */      
 
{       z-index:100; 
        padding : 0; /* pas de marge intérieure */ 
        margin : 0; /* ni extérieure */ 
        list-style : none; /* on supprime le style par défaut de la liste */ 
        line-height : 21px; /* on définit une hauteur pour chaque élément */ 
        text-align : center; /* on centre le texte qui se trouve dans la liste */ 
} 
 
#menu /* Ensemble du menu */ 
{ 
        font-weight : bold; /* on met le texte en gras */ 
        font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */ 
        font-size : 12px; /* hauteur du texte : 12 pixels */ 
} 
 
#menu a /* Contenu des listes */ 
{ 
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */ 
        padding : 0; /* aucune marge intérieure */     
        color : black; /* couleur du texte */ 
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */ 
        width : 144px; /* largeur */ 
} 
 
#menu li /* Elements des listes */       
{  
        float : left;  
        border: 1px solid #ff91b5;
        /* pour IE qui ne reconnaît pas "transparent" */ 
        margin-right: 0.3em;
        transition: all 1s ease;
        -moz-transition: all 1s ease;
        -webkit-transition: all 1s ease;
} 

#menu li:hover {
        border: 1px solid #ff0000;
        background-color: #ff91b5;
        border-radius: 0 0 15px 15px;
        -moz-border-radius: 0 0 15px 15px;
        -webkit-border-radius: 0 0 15px 15px;
        transition: all 1s ease;
        -moz-transition: all 1s ease;
        -webkit-transition: all 1s ease; }
 
#menu li ul /* Sous-listes */ 
{  
        position: absolute; /* Position absolue */ 
        width: 144px; /* Largeur des sous-listes */ 
        left: -999em; /* Hop, on envoie loin du champ de vision */ 
} 
 
 
#menu li ul li /* Éléments de sous-listes */ 
{ 
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */ 
        margin-top: 3px;
} 
 
/* IE ne reconnaissant pas le sélecteur ">" */ 
html>body #menu li ul li                 
{ 
} 
 
#menu li ul ul  
{ 
        margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */  
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */ 
        border-left     : 1px solid black ; /* Petite bordure à gauche pour ne pas coller ... */       
} 
 
 
html>body #menu li ul ul                 
{ 
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */ 
} 
#menu li:hover ul ul, #menu li.sfhover ul ul  
/* Sous-sous-listes lorsque la souris passe sur un élément de liste */  
{         left: -999em;  
}   
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul   
 
{         left: auto; /* Repositionnement normal */  
        min-height: 0; /* Corrige un bug sous IE */ }
--></style>
<p>/* Code HTML */</p>
<ul id="menux">
<li><a href="urldulien1.ek.la">Lien 1</a></li>
<li><a href="urldulien2.ek.la">Lien 2</a>
<ul>
<li><a href="urldulien21.ek.la">Lien 2.1</a></li>
<li><a href="urldulien22.ek.la">Lien 2.2</a></li>
</ul>
</li>
<li><a href="urldulien5.ek.la">Lien 5</a>
<ul>
<li><a href="urldulien51.ek.la">Lien 5.1</a></li>
<li><a href="urldulien52.ek.la">Lien 5.2</a></li>
</ul>
</li>
<li><a href="urldulien6.ek.la">Lien 6</a>
<ul>
<li><a href="urldulien61.ek.la">Lien 6.1</a></li>
<li><a href="urldulien62.ek.la">Lien 6.2</a></li>
</ul>
</li>
<li><a href="urldulien7.ek.la">Lien 7</a>
<ul>
<li><a href="urldulien71.ek.la">Lien 7.1</a></li>
<li><a href="urldulien72.ek.la">Lien 7.2</a></li>
<li><a href="urldulien73.ek.la">Lien 7.3</a></li>
</ul>
</li>
</ul>
<p>/* Code Javascript */</p>
<script type="text/javascript">// <![CDATA[
window.onload=function() { 
var MonDiv=document.createElement('DIV');
MonDiv.setAttribute('id', 'menu');
MonDiv.innerHTML=document.getElementById('menux').innerHTML;
MonDiv.style.position='relative';
var Myctn=document.getElementById("header");
var test=Myctn.getElementById("titre_header");
Myctn.insertBefore(MonDiv,test);
var noeud=document.getElementById('menux');
noeud.parentNode.removeChild(noeud);}
// ]]></script>

Et le tour est joué !
Bien sûr, il te faudra remplacer les différents liens indiqués en rouge.

Comme on se retrouve ! Bonsoir Pii_Lov3 !
1. Alors, pour le petit encadré en en-tête, avec quelques connaissances en CSS et HTML, ce n'est pas très compliqué. Maintenant, expliquer quelles étapes suivre de A à Z serait assez long et fastidieux !

Au niveau du positionnement des images, ce n'est pas très compliqué avec la nouvelle interface d'édition d'Eklablog ! Il faut juste faire quelques tests avec l'alignement des images ! Si tu as quelques soucis et que tu souhaites faire quelque chose de bien précis n'hésite pas à demander !

Pour le titre et le contenu « dans un même bloc », je pense que c'est plutôt le jeu de couleurs choisit qui donne cette impression. Le fond du titre a tout simplement été rempli de la même couleur que celui du contenu ! Apparence > Modifier le thème > Contenu > Titre > Fond du bloc conteneur

2. Pour placer le menu en dessous du header, il suffit juste de le déplacer à partir de l'interface Apparence > Modifier le thème > En-tête > Menu > Déplacer à la souris

Pour les cadres qui apparaissent au survol du menu, il suffit d'aller dans Menu Survolé et de changer la couleur du Fond !

@Sugar♥ : Il y a bien un moyen de faire ce que tu demandes, mais c'est assez fastidieux (http://cyberzoide.developpez.com/html/map.php3) et il faut utiliser le langage HTML pour faire ceci. De plus, tu ne pourras pas intégrer ton header "normalement" !

Le Javascript, c'est juste un langage parmi tant d'autre ! On peut y avoir recours dans la programmation et le développement web. Certains codes permettent de faire des petits effets très sympathiques !

Bonjour Elda ! Pour insérer un lecteur SCM, ce n'est pas du CSS dont tu as besoin mais du Javascript. Si le Javascript n'est pas activé sur ton compte, il y a peu de chances que tu puisses voir ce lecteur. Normalement, une fois ton lecteur prêt, tu obtiens un code à insérer dans l'espace HTML d'un module simple. Mais, si le Javascript n'est pas activé sur ton compte, le lecteur ne pourra pas se mettre en place. Tu as donc deux solutions, soit envoyer un message à Stéphanie pour demander une activation du Javascript sur ton compte, soit demander à un bloggeur, ayant le Javascript activé sur son compte, de placer le code du lecteur sur ton blog !

Pas de soucis, je suis là pour répondre aux questions ! Alors, pour obtenir l'url d'une image, il te suffit de faire clique droit sur ton image > Copier l'adresse de l'image et hop ! Elle est dans ton presse-papier. Tu n'as plus qu'à la coller à l'emplacement prévu !

Bonjour Pii_Lov3 !
Alors en fait, le code HTML n'est vraiment pas compliqué, le voici :

<img onmouseover="javascript:this.src='urldetonimage1.png';" onmouseout="javascript:this.src='urldetonimage2.png';" src="urldetonimage1.png" alt=""/>

Il te suffit de remplacer urldetonimage1.png et urldetonimage2.png par les deux images que tu souhaites utiliser, et le tour est joué !

@Pii_Lov3 : En faisant une petite recherche sur google, je suis tombée sur cette page-là, c'est ce que tu cherches ?

@Muramai : C'est la première fois que je vois ça ! En fait, je me suis rendue compte que Papasti a récemment fait un tutoriel sur ça, je te renvoie chez lui ! De même pour l'espèce de slideshow à l'accueil de ton site d'exemple, Papasti a ce qu'il faut !

@Amichu : Les codes suivants sont à coller dans la feuille CSS de ton blog !

#menu1 {
    top: 0;
    bottom: 0;
    position: absolute;
}

ou

#menu2 {
    top: 0;
    bottom: 0;
    position: absolute;
}

En fonction de l'emplacement de ton menu (s'il se trouve à droite ou à gauche).

@Kisa♪ : C'est sûrement possible si tu as une idée précise, et avec un peu de bidouillage !

@Craspou.Chan : Tu peux créer ta playlist ici : http://scmplayer.net/ Une fois que tu auras terminé ton lecteur, un code te sera fourni, tu n'auras plus qu'à l'insérer dans l'espace HTML d'un des modules simples de ton blog ! Attention, le javascript doit être activé sur ton compte pour que le lecteur puisse apparaître.

Remplace
#titre a:hover {
 text-decoration: none;
}

par

#titre a:hover {
 color: #fff; /*Couleur de ton lien au survol*/
 text-decoration: none;
}

Mais je ne t'ai donné qu'un seul code. Je ne vois plus de quoi tu me parles ! :o

@Craspou.Chan : Je ne vois pas vraiment... Désolée. ;;

@GreddyMai : Alors, j'ai trouvé comment faire pour la partie articles avec scrollbar. Donc, tu pourras rajouter ceci dans le #content de ton CSS :
#content {
border: 1px solid #9C5339;
padding: 10px;
}

Par contre pour encadrer la totalité là, j'ai beau me creuser la tête, je ne vois pas de moyen de le faire en CSS. Alors, je vois deux solutions, soit tu sors ton header de son emplacement prévu en bidouillant (en mettant l'image de ton header dans un module simple et en l'encadrant d'un div que tu sortiras du module et que tu pourras placer comme tu le voudras, un peu comme ma chatbox, par exemple), et donc tu encadres ton contenu en laissant de l'espace vide pour placer ton header avec du CSS, soit tu créés un fond avec un cadre en guise de bordure !

Sinon, pour le header aléatoire ! J'ai peut-être quelque chose à proposer.
Tu crées un module simple, tu insères ceci dans le HTML en remplaçant ce qu'il y a à remplacer :
<div id="en-tete"><script>// <![CDATA[
function random_imglink(){
var myimages=new Array()
myimages[1]="urldetonimage1.png"
myimages[2]="urldetonimage2.png"

var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<img src="'+myimages[ry]+'" border=0>')
}
random_imglink()
// ]]></script></div>

Puis, dans le cas où tu souhaites centrer ton header pour tous les ordinateurs, dans ton CSS, tu insères :
#en-tete {
position: absolute;
height: 200px; /*Hauteur de ton header*/
width: 400px; /*Largeur de ton header*/
top: 0; /*Marge entre le bord supérieur de la page et ton header*/
left: 50%; /*Marge entre le bord gauche de la page et ton header*/
margin-left: -200px; /*Moitié de la largeur de ton header*/
}

@Mayumi, coucou. ;; Je viens de faire un petit tour des lieux ! J'ai testé de créer un nouvel article en y insérant une image importée de mon pc, ça a bien fonctionnée ! Pour la musique par contre, c'est vrai que je ne vois pas le lecteur s'afficher. Alors, là, je t'avoue que je ne vois vraiment pas d'où vient le problème. Il est peut-être passager ! Ça peut venir des serveurs d'ekla. Sinon, tu as une autre alternative, ce serait d'heberger tes images et musiques dans ta partie 'Gérer les fichiers', puis de les importer de là dans tes articles. C'est malheureusement tout ce que je peux te proposer, en espérant que ce problème ne perdure pas ! ;;

@Craspou.Chan : Colle ceci dans ton CSS :
#liste {
 width:150px; /*Largeur des cases*/
 height:16px; /*Hauteur des cases*/
 overflow:hidden;
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 transition: all 1s ease
 }
#liste:hover{
 height: 80px; /*16 x (nbre de sous-titres + 1)
 Ici, on a fait 16 x (4+1) = 80px*/
 }

#titre a {
 text-align: center;
 background-color: #333333; /*Fond des titres*/
 color: #F8F8F8; /*Couleur de police des titres*/
 width: 150px; /*Largeur des cases*/
 display: block;
 -webkit-transition: all 2s ease;
 -moz-transition: all 2s ease;
 -o-transition: all 2s ease
 }
#titre a:hover {
 text-decoration: none;
}

#sous-titre a{
 text-align: center;
 background-color: #333333; /*Fond des sous-titres*/
 color: #f8f8f8; /*Couleur de police des sous-titres*/
 -webkit-transition: all 0.8s ease;
 -moz-transition: all 0.8s ease;
 transition: all 0.8s ease;
 display:block;
 padding:3px;
 }
 #sous-titre a:hover{
 text-decoration: none;
 background-color: #f8f8f8; /*Fond des sous-titres survolés*/
 color: #333333; /*Couleur de police des sous-titres survolés*/
 }

Et ceci dans l'HTML de ton module (ou article) :
<div id="liste">
<div id="titre"><a>titre</a></div>
<div id="sous-titre"><a>sous-titre 1</a> <a>sous-titre 2</a> <a>sous-titre 3</a></div>
</div>

Je peux accéder à ton blog ? Pour les bords, je ne vois pas vraiment comment faire, le problème, c'est que tu souhaites encadré des éléments qui n'existent pas dans la configuration de base du blog (c'est-à-dire cette partie-là : http://ekladata.com/hors-sujet.lo.gs/perso/greedymai.png, je suppose que tu l'as remarqué !) et donc du coup je me demande si ce n'est pas possible en trifouillant un peu, mais il faudrait que je puisse accéder à ton blog pour voir le code source !

Et pour le header, ça me paraît un peu difficile à faire sur eklablog. Mais, je vais me renseigner, je te tiens au courant !

Hello Mayumi ! J'ai ce que tu cherches, voilà pour toi :
body { overflow-y: hidden; }

Ce petit code qui, en fait, 'cache' cette scrollbar sur l'axe vertical y (respectivement l'axe horizontal x), est à insérer dans ton CSS !

@GreedyMai, je crois avoir trouvé ce que tu cherches ! Par contre, après (je suppose que c'est ce que tu as prévu de faire), je vois qu'il va falloir que tu bidouilles encore un peu les paramètres de ton thème pour arriver au résultat que tu as schématisé. Si tu as besoin de quelque chose, n'hésite pas ! Voici pour le cadre :

#content {
overflow-y: scroll;
height: 465px; /*Hauteur du cadre*/
}

Insère ceci dans ton CSS :
.liste {
    padding-left: 2px;
    border-bottom: 1px solid #b1c4fc; /*Couleur du bord qui sépare chaque case*/
    letter-spacing: -0.5px;
    text-transform: lowercase;
    text-align: center;
    font-family: Georgia;
    font-size: 12px;
    background-color: #c2d0fb; /*Couleur du fond des cases*/}
.liste a { display: block; color: #507cfd; /*Couleur des liens*/}
.liste a:hover { text-decoration: none; color: orange; /*Couleur des liens au survol*/}
.liste:hover {
    background-color: transparent; /*Couleur du fond au survol*/}

Maintenant, crée un module simple puis clique sur . Ensuite, colle ceci :
<p style="text-align: center;"><span style="color: #99ccff;"><strong><em>animes &amp; manga</em></strong></span></p>
<div class="liste" style="margin-top: 4px;"><a href="/bleach-c17268128">Bleach</a></div>
<div class="liste"><a href="/blue-exorcist-c17268134">Blue Exorcist</a></div>
<div class="liste"><a href="/code-geass-c17272842">Code Geass</a></div>
<div class="liste"><a href="/durarara-c17272844">Durarara!!</a></div>
<div class="liste"><a href="/hunter-x-hunter-c17272880">Hunter X Hunter</a></div>
<div class="liste"><a href="/kaichou-wa-maid-sama-c17272846">Kaichou wa Maid-sama!</a></div>
<div class="liste"><a href="/kissxsis-c17272850">KissXSis</a></div>
<div class="liste"><a href="/kuroshitsuji-c17272854">Kuroshitsuji</a></div>
<div class="liste"><a href="/naruto-shippuden-c17272860">Naruto Shippuden</a></div>
<div class="liste"><a href="/noragami-c17272862">Noragami</a></div>
<div class="liste"><a href="http://iconmunity.lo.gs/one-piece-c17295920">One Piece</a></div>
<div class="liste"><a href="/panty-stocking-with-garterbelt-c17272864">Panty &amp; Stocking with Garterbelt</a></div>
<div class="liste"><a href="/toradora-c17272866">Toradora</a></div>
<div class="liste"><a href="/touhou-c17272870">Touhou</a></div>
<div class="liste"><a href="/uta-pri-c17272878">Uta&acirc;&tilde;&dagger;Pri</a></div>

Enregistre le tout, et normalement, ça devrait être bon !
J'ai rajouté des indications dans le CSS pour te permettre de personnaliser ton menu plus facilement. En espérant que cela fonctionne !

Bonjour, bonsoir GreedyMai ! Je vais m'y attarder de ce pas et voir si cela est faisable !

Insère ceci dans ton CSS :
.liste {
    padding-left: 2px;
    border-bottom: 1px solid #b1c4fc; /*Couleur du bord qui sépare chaque case*/
    letter-spacing: -0.5px;
    text-transform: lowercase;
    text-align: center;
    font-family: Georgia;
    font-size: 12px;
    background-color: #c2d0fb; /*Couleur du fond des cases*/}
.liste a { display: block; color: #507cfd; /*Couleur des liens*/}
.liste a:hover { text-decoration: none; color: orange; /*Couleur des liens au survol*/}
.liste:hover {
    background-color: transparent; /*Couleur du fond au survol*/}

Maintenant, crée un module simple puis clique sur . Ensuite, colle ceci :
<p style="text-align: center;"><span style="color: #99ccff;"><strong><em>animes &amp; manga</em></strong></span></p>
<div class="liste" style="margin-top: 4px;"><a href="/bleach-c17268128">Bleach</a></div>
<div class="liste"><a href="/blue-exorcist-c17268134">Blue Exorcist</a></div>
<div class="liste"><a href="/code-geass-c17272842">Code Geass</a></div>
<div class="liste"><a href="/durarara-c17272844">Durarara!!</a></div>
<div class="liste"><a href="/hunter-x-hunter-c17272880">Hunter X Hunter</a></div>
<div class="liste"><a href="/kaichou-wa-maid-sama-c17272846">Kaichou wa Maid-sama!</a></div>
<div class="liste"><a href="/kissxsis-c17272850">KissXSis</a></div>
<div class="liste"><a href="/kuroshitsuji-c17272854">Kuroshitsuji</a></div>
<div class="liste"><a href="/naruto-shippuden-c17272860">Naruto Shippuden</a></div>
<div class="liste"><a href="/noragami-c17272862">Noragami</a></div>
<div class="liste"><a href="http://iconmunity.lo.gs/one-piece-c17295920">One Piece</a></div>
<div class="liste"><a href="/panty-stocking-with-garterbelt-c17272864">Panty &amp; Stocking with Garterbelt</a></div>
<div class="liste"><a href="/toradora-c17272866">Toradora</a></div>
<div class="liste"><a href="/touhou-c17272870">Touhou</a></div>
<div class="liste"><a href="/uta-pri-c17272878">Uta&acirc;&tilde;&dagger;Pri</a></div>

Enregistre le tout, et normalement, ça devrait être bon !
J'ai rajouté des indications dans le CSS pour te permettre de personnaliser ton menu plus facilement. En espérant que cela fonctionne !

Bonjour ! Ci-dessous le CSS demandé :
#body { border-top: 0; } /*Retire la bordure blanche sous la barre*/
#menubar { opacity: 0; transition: all 0.6s ease; -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; }
#menubar:hover { opacity: 1; }

Je te conseillerai de faire un tour par ici http://scmplayer.net/
Lorsque tu auras obtenu un code d'intégration, il te suffira de l'insérer dans l'espace HTML d'un module simple. Attention, si le javascript n'est pas activé sur ton compte, cela ne fonctionnera pas.

Pour le menu, il est constitué de CSS et de HTML. Je te propose de te baser sur ces deux codes pour réaliser ce menu :

CSS à l'adresse suivante : http://ekladata.com/tOBr-qbgOjgxyx5oDeYgR12BaOg/css-customize.css
HTML à l'adresse suivante : http://ekladata.com/wG_M68Ee34cDkTKdJ_ue5pJDmEw/html-customize.txt

@MuseKim : Bonjour ! Je vous propose d'utiliser ceci :
.pagination select { display: none; }

@Rarity : Essaie donc ceci :
#background { box-shadow: 0 0 10px #000000; /*Couleur de la lueur modifiable*/ }

Bonsoir Lu Han !
Je te propose ça :

CSS
#navigation a {
    text-decoration: none;
    color: #000000; /*Couleur du texte*/
    text-transform: uppercase;
    font-size: 11px;
    font-family: Georgia;
    background-color: #ffffff; /*Couleur du fond*/
    padding: 2px;
    margin-bottom: 2px;
    width: 200px; /*Largeur du menu*/
    text-align: center;
    display: block;
    transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
}

#navigation a:hover {
    padding: 7px 2px;
}

HTML
<div id="navigation">
<a href="/">Lien 1</a>
<a href="/">Lien 2</a>
<a href="/">Lien 3</a>
<a href="/">Lien 3</a>
<a href="/">Lien 3</a>
</div>

C'est bon comme ça ? :o J'espère qu'il est bien placé !

Oui, d'accord :)

Est-ce que ce code-là pourrait t'aider ?
À insérer dans l'espace Code source d'un module :
<script>// <![CDATA[
TargetDate = "03/09/2014 5:00 AM";
BackColor = "transparent";
ForeColor = "white";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Jours, %%H%% Heures, %%M%% Minutes, %%S%% Secondes<br>avant le retour de OnceUponATime sur ABC";
FinishMessage = "C'est le jour-J !";
// ]]></script>
<script src="http://scripts.hashemian.com/js/countdown.js"></script>

Ensuite pour l'image, j'ai cru comprendre qu'il s'agissait de la bannière, donc il te faudra le placer toi-même, puisque je n'ai pas le moyen de le faire sur ton blog. Les parties en rouge sont modifiables :)

@ JiJi_ : Avec ce bout de code, tout à l'air de fonctionner. Donc le problème ne vient pas là, mais comme je n'ai pas ta feuille entière je ne peux pas le déceler. Si tu crains vraiment que l'on te pique les codes de ta feuille, va dans Contenu > Gérer les fichiers > Nouveau fichier, renomme le fichier comme tu veux mais sous la forme nomdetonfichier.css et colle tes codes là-dedans. Puis quand ce sera bon envoie-moi le lien du fichier par MP s'il-te-plait, que je puisse voir ça !

@ Mini guigui : Je vais me pencher sur ça, merci !
Edit : Ah, mais oui, du coup, non, on ne peut pas changer le fond puisqu'il est déjà déterminé. Si l'on met un fond derrière, cela n'enlèvera pas ce design "post-it". :/

Modifier la couleur du pseudo :
Sans survol
#menubar_section_account a { color: #FFFFFF; }

Au survol
#menubar_section_account a:hover { color: #FFFFFF; }

Tu aurais le code de ton compte à rebours ? Je veux bien essayer de faire quelque chose dans cette idée-là, si ça peut fonctionner !

Oui c'est possible, c'est le principe du cadre de l'encadré mises à jour sur la page d'accueil. Après, tout est relatif. Tu voudrais mettre ton compte à rebours généré sur un fond ?

@ Mini guigui : J'y penserai, merci ! Un compte à rebours ? Le CSS et le HTML ne suffiront jamais à concevoir un compte à rebours, je pense qu'il faut absolument passer par du Javascript. Je ne sais vraiment pas comment cela se fait, alors je ne vais pas te dire de bêtise, mais je pense qu'en cherchant sur internet tu trouveras facilement un générateur de compte à rebours. Il y en aura probablement qui te permettront de le personnaliser !

@ JiJi_ : Puis-je jeter un coup d'oeil à ta feuille CSS ?

Tu as retiré le code précédent avant d'ajouter celui que je t'ai donné ?

@ Naff : Excuse moi de la réponse tardive, j'attendais de recevoir de nouvelles notifications afin de voir comment modifier ça ! En fait, j'ai trouvé quelque chose de beaucoup plus simple. L'image de fond utilisée pour les notifications (nouvelles ou non) est la même, tu peux la trouver ici : http://portfolio.ek.la/images/menubar/notifs_item.png

Je te conseillerai donc de simplement modifier cette image, à savoir que le bloc blanc correspond aux notifications lues, le bloc bleu ciel aux nouvelles notifications, et le bloc bleu aux notifications survolées !

Lorsque tu auras personnalisé ton image, il te suffira de l'héberger et de coller ceci dans ta feuille de style CSS :
#notifications_panel li { background: url('urldetonimageperso.png') no-repeat scroll 0 0 rgba(0, 0, 0, 0); }

Tu pourras donc retirer les codes précédents qui attribuent un fond noir à tes notifications pour préférer celui-ci !

Pour ta deuxième demande, utilise ceci :
.menubar_section:hover { color: red; }
.menubar_section li:hover { color: red; }

red à remplacer par le code couleur de ton choix.

Quant au logo, voilà, voilà :
#menubar_logo { margin-top: 5px; position: absolute; right: 0; }

Pour l'icône des favoris, essaie donc cela :
#menubar_favorites_btn,
#menubar_nofavorites_btn:hover {
background: url('urldetonicone.png') no-repeat 50% 50%; }

@JiJi_ : Alors, voici, voilà :
.article_text a {   
    transition: all 1s ease;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
}

.article_text a:hover {
    transition: all 1s ease;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    background-color: #ce3069; /*Remplace par le code de la couleur de ton choix*/
}