Bienvenue sur le forum d'entraide d'OverBlog.
Nous vous conseillons de chercher une réponse sur notre base de connaissances avant de poster une demande sur le forum.
[RÉSOLU] Thème PHOTOGRAPHY - Comment le modifier ?
  • ça ne fonctionne pas.

    J'ai codé de cette manière (sur blog test, bien sûr)

    <div class="categories">
                       
               
                            <ul>
                            <li {% if isIndex %}class="active"{% endif %}>
                   <a href="{{ Blog.Url }}">{{ Lang.Get('Accueil') }}</a>
                            </li>
                           
                            <li>Recherche par commune
                            <ul class="children">
                            <li><a href="/tag/rochefort" Title="Rochefort">Rochefort</a></li>
                            <li><a href="/tag/Port des Barques" Title="Port des Barques">Port des Barques</a></li>
                            <li><a href="/tag/fouras" title="Fouras">Fouras</a></li>
                           
                            </ul></li>
                            <li><a href="/tag/shopping" title="Shopping">Shopping</a></li>
                            <li><a herf="/tag/musee" title="Musee">Mus&eacute;es</a></li>
                            <li><a href="http://les.balades.rochefortaises.overblog.com/sites-amis" Title="Sites Amis">Sites Amis</a>
                            </li>
                        </ul>
                    </div>

    Et voilà ce que ça m'affiche
  • Il était tôt ce matin ...
    Avec la partie CSS, ça marche mieux ...
    La voilà :

    .categories .children{  padding: 0 ;position: absolute;                text-align: left;top: 35px; visibility: hidden;z-index: 1000;   margin-left:0px  }
    .categories  .children li{              border-bottom: 0px solid #222;              display: block;                float: none;                margin: 2px 0;                padding: 2px 0;background:#4E4A41;width: 200px!important;font-size:14px!important     ; border-radius:10px   }
    .categories  .children a:hover{background:#F9F5E7!important;color:#4E4A41!important;}
    .categories  .children li:last-child {                border: none;            }
    .categories  .children li a {                color:#fff;                display: block;font-size:16px!important;               font-family:Arial;width:180px!important;  text-align:left  ;border-radius:10px ;margin-left:5px       }
    .categories  .children li a:hover {color:pink;padding:5px!important;font-size:16px!important;          }
    .categories  li:hover .children{visibility: visible;}

    Evidemment, tu peux retravailler les couleurs, background ... pour que le design corresponde mieux au tien, mais c'est déjà pas mal, en simulation.
  • J'ai donc mis ça :

    <div class="categories">
                        <style type="text/css">
                        .categories .children{  padding: 0 ;position: absolute;                text-align: left;top: 35px; visibility: hidden;z-index: 1000;   margin-left:0px  }
    .categories  .children li{              border-bottom: 0px solid #222;              display: block;                float: none;                margin: 2px 0;                padding: 2px 0;background:#4E4A41;width: 200px!important;font-size:14px!important     ; border-radius:10px   }
    .categories  .children a:hover{background:#F9F5E7!important;color:#4E4A41!important;}
    .categories  .children li:last-child {                border: none;            }
    .categories  .children li a {                color:#fff;                display: block;font-size:16px!important;               font-family:Arial;width:180px!important;  text-align:left  ;border-radius:10px ;margin-left:5px       }
    .categories  .children li a:hover {color:pink;padding:5px!important;font-size:16px!important;          }
    .categories  li:hover .children{visibility: visible;}
                        </style>
               
                            <ul>
                            <li {% if isIndex %}class="active"{% endif %}>
                   <a href="{{ Blog.Url }}">{{ Lang.Get('Accueil') }}</a>
                            </li>
                            <li>Commune
                            <ul class="children">
                            <li><a href="/tag/rochefort" Title="Rochefort">Rochefort</a></li>
                            <li><a href="/tag/Port des Barques" Title="Port des Barques">Port des Barques</a></li>
                            <li><a href="/tag/fouras" title="Fouras">Fouras</a></li>
                            </ul></li>
                            <li>Activit&eacute;
                            <ul class="children">
                            <li><a href="/tag/shopping" title="Shopping">Shopping</a></li>
                            <li><a herf="/tag/musee" title="Musee">Mus&eacute;es</a></li>
                            </ul></li>
                            <li><a href="http://les.balades.rochefortaises.overblog.com/sites-amis" Title="Sites Amis">Sites Amis</a>
                            </li>
                        </ul>
                    </div>

    C'est déjà un peu mieux, simplement, je n'arrive pas "écarter" les menus, ce qui n'est pas très joli...

    Un aperçu : en passant au dessus des menus déroulants, on voit apparaitre les sous menus, par contre la présentation est à revoir... Mais je pense que ça vient plutôt de la feuille de style... Ne reste plus qu'à trouver ce que je dois changer ou ajouter, étant donné que les sous menus n'étaient pas prévus dans le thème d'origine
  • En rajoutant
    .sub-nav  li  {color:white;width:150px;text-align:center}
    ils s'espacent, sont tous blancs et centrés. Plus jolis.

    oui pour le design des sous-menus, c'est dans les lignes css contenant "children".
  • C'est parfait, merci beaucoup, greedy ! Fiou, j'ai mis un moment à tous régler, mais on est fier quand on a réussi :)
  • Bon allez, je reviens à la charge... Je vais retenter d'insérer ma like box, quelqu'un pourrait m'aider pour trouver comment la mettre correctement ? Pour rappel, j'aimerais qu'elle n'apparaisse que sur les articles et pages (pas sur les index), en dessous de la zone "Archives".
  • Bonne nouvelle, j'ai réussi à intégrer ma likebox !
  • Bonjour, je voudrais pouvoir modifier la taille de l'aperçu de mes images et les centrer dans leur box, sur la page d'accueil. Savez vous comment faire? Sinon j'ai des animations flash, savez vous comme je peux faire pour qu'elle s'affichent sur la page d'accueil aussi?
  • KO35 > Je pense que c'est dans les lignes :
    ul.thumbs a {height:XXpx; width :XXpx}
    ul.thumbs img {height:XXpx; width :XXpx}
  • Pour modifier le nombre de vignettes par ligne en accueil et en tags, c'est dans la partie
    <ul id="thumbs" class="thumbs">
    il faut modifier
     {% if loop.index % 4 == 0 %}
    le 4 est le nombre de vignettes par ligne

    Ensuite bien sûr il faut modfier le CSS
    pour le cadre
    ul.thumbs a {height:XXpx; width :XXpx}
    pour l'image
    ul.thumbs img {height:XXpx; width :XXpx}
Cette discussion a été fermée.
Toutes les discussions