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 ?
  • Merci. Grace à votre sujet, j'ai enfin pu ajouter des catégories. J'ai tout de même mi un certain temps car je n'y connais pas grand chose dans le codage, mais avec un peu de logique et en boudillant, on finit par arriver à ce que l'on souhaite. 

  • Pour ajouter un fond derrière votre menu horizontal :

    Ajouter : background : "le code de votre couleur" à cet endroit dans le code html

     /* Sub-Nav */
                .sub-nav {clear: both; text-transform : capitalize; }
                .sub-nav .wrap {border-bottom: 1px solid #353638; height: 38px; margin-bottom: 20px ;background : #424242}
  • Bonjour Greedy,

    Je passe par ici également pour te demander conseil. J,ai également posté un commentaire sur discussion que tu as répondu le 25 avril dernier et que je trouvais intéressante et que j'ai suivi pour être capable de retrouver le bouton "retour à l'accueil" à la fin de nos articles. Tout fonctionne mais là je me retrouve avec une page blanche à la page d'accueil. Comment pourrais-je changer le code HTML que tu suggérais pour que je puisse renvoyer la page d'accueil à un autre article qui remplit le rôle de page d'accueil?

    Ce serait tellement le fun que tu puisses m'aider à ce niveau.

    En te remerciant à l'avance,
    Robert Harmegnies
  • Bonjour Robert Harmegnies
    Merci de compléter ton profil forum avec l'adresse de ton blog comme demandé dans ce fil : http://fr.forum.over-blog-kiwi.com/discussion/105/-important-lire-avant-de-poster-un-message-lien-blog-avatar-pseudo-forum#Item_1
  • Bonjour à tous,
    Je suis nouveau sur le forum et je suis totalement novice en codage.
    Je cherche à remplacer le titre et l'avatar de mon blog par une image (mon logo d'entreprise). Je souhaiterais que mon logo se répète sur toutes les pages et qu'il renvoie vers l'accueil. Est-ce possible et ce sans influencer mon référencement sur les moteurs de recherche?
    Mon blog : www.etiennebois.fr
    Je vous remercie par avance pour votre aide.

  • N'ayant reçu aucune réponse, j'ai essayé de bidouiller quelque chose moi même. Il n'y a que comme ça qu'on apprend vraiment. Ce n'est pas vraiment fait selon les règles de l'art et ça m'a pris plusieurs jours de tatonnement mais l'essentiel n'est-il pas que le résultat soit là? Je vais donc expliquer comment j'ai procédé, au cas où ça intéresserait quelqu'un, ne sait-on jamais.

    N'y connaissant rien au langage HTML je me suis dit qu'il valait peut être mieux s'inspirer de ce qui avait déjà été fait ailleurs. C'est donc ce que j'ai fait. J'ai copié puis collé des morceaux de code d'autres "thèmes" d'OB pour les intégrer au mien. Puis j'ai un peu modifié la syntaxe pour la rendre similaire à celle de l'HTML de mon "thème" en déduisant les similitudes.

    Pour mon image  en en-tête de blog, j'ai donc remplaçé les lignes CSS (visiblement mise en forme des éléments) et HTML (inscription des éléments eux même sur la page) de l'avatar et du titre du blog.

    ce qui donne donc pour le CSS,

    Dans la partie /*HEADER*/ vers la ligne 160 (ça change quand on rajoute des éléments bien sûr) entre "AVATAR" et "LOGO" :
                .blog-cover {
                    height: 288px;
                    margin: 0 auto;
                    width: 100%;
                }
                    .blog-cover img {
                        height: 100%;
                        width: 100%;
                    }
    (ici j'ai laissé le CSS avatar et logo ne sachant pas si ça risquait de modifier autre chose, l'avatar et le titre étant suprimés plus loin dans le HTML je me suis dit que ça ne gènerait pas).

    Pour la partie HTML,

    vers la ligne 710, juste avant : <p>{{ Blog.Description }}</p>
    (je voulais que l'image soit avant la description du blog)
    J'ai inséré les lignes suivante:
                       
                    {% if Custom('blog_cover') is not empty or Custom('blog_cover') != '' %}
                        <div id="blog-cover">
                            <a href="{{ Blog.Url }}"><img src="{{ Custom('blog_cover')|resize(1000,288)|crop }}" alt="" logo de Etienne bois="{{ Blog.Description }}" width="950" height="288" /></a>
                        </div>
                    {% endif %}


    Juste après :
        <body>
            <div id="fb-root"></div>
            <div class="header">
                <div class="wrap">

    J'ai aussi rajouté la balise META :
            <meta name="image:blog_cover:label.headerImage" default="http://assets.over-blog-kiwi.com/themes/41/img/pine-cone.jpg" group="graphical" />

    Qui vient aussi du thème "twenty eleven" me permettant de charger ma photo (voire de la changer plus tard) facilement depuis l'onglet configuration de mon thème modifié sans avoir à passer par l'HTML.
    Il faut la mettre avec les autres balises meta au début du code (c'est facile elle se ressemble toutes, elles commencent par <meta). Je l'ai mise avec les autres balises du groupe "graphical" (mentionné en fin de balise).


  • Bon du coup ça a mis un peu le désordre dans ma page. J'ai donc aussi
    changé la barre de menu sous la description du blog. Dans ce cas là j'ai
    pris celle du thème "time line" qui me plaisait bien.

    CSS : juste avant /* sub-nav */

    /*----- NAV DATE -----*/
                .menu {height: 41px; line-height: 38px;}
                .menu a {display: block; font-weight: bold;}
                .menu ul {margin: 0 auto; width: 940px; text-align: center;}
                .menu li {color: #969696; display: inline-block; margin: 0 13px;}
                .menu li.last {margin-right: 0;}
                .menu .active a {border-bottom: 2px solid #4b9fd3;}
                .menu li a:hover{border-bottom: 2px solid #e2eaef;}

                .menu li{display: inline-block; position: relative;}

                .menu .children{
                    background: {% if Custom('theme_style') == 'Dark'|default('Dark') %}#121212{% else %}#f9fbf8{% endif %};

                    {% if Custom('theme_style') == 'Dark'|default('Dark') %}
                        border-bottom: 1px solid #2d2d2d;
                    {% else %}
                        border: 1px solid #e2e9ef;
                    {% endif %};

                    border-radius: 8px;
                    left: 50%;
                    margin-left: -75px;
                    opacity: 0;
                    padding: 0 10px;
                    position: absolute;
                    text-align: center;
                    -webkit-transition: all 0.3s ease 0s;
                            transition: all 0.3s ease 0s;
                    top: 42px;
                    visibility: hidden;
                    width: 130px;
                    z-index: 1000;
                }
                .menu .children li{
                    border-bottom: 1px solid {% if Custom('theme_style') == 'Dark'|default('Dark') %}#222{% else %}#BBB{% endif %};
                    display: block;
                    line-height: 1.5em;
                    margin: 2px 0;
                    padding: 10px 0;
                }
                .menu .active .children a,
                .menu .children li a:hover{
                    border: none;
                }
                .menu .children li:last-child {
                    border: none;
                }
                .menu .children li a {
                    color: {% if Custom('theme_style') == 'Dark'|default('Dark') %}#888{% else %}#555{% endif %};
                    display: block;
                    -webkit-hyphens: auto;
                    -moz-hyphens: auto;
                    -ms-hyphens: auto;
                    -o-hyphens: auto;
                    hyphens: auto;
                    word-wrap: break-word;
                }
                .menu .children li a:hover{
                    color: {% if Custom('theme_style') == 'Dark'|default('Dark') %}#FFF{% else %}#000{% endif %};
                }
                .menu li:hover .children{
                    opacity: 1;
                    visibility: visible;
                }
  • Dans HTML : juste après <p>{{ Blog.Description }}</p>
                    </div>

                            <nav class="menu">
                <div class="wrap">
                    <ul>
                        <li class="{% if isIndex %} active{% endif %}">
                            <a href="{{ Blog.Url }}">{{ Lang.Get('Home') }}</a>
                        </li>
                        {% if Custom('menu_link_label1') is not empty and Custom('menu_link_url1') is not empty %}
                            <li
                                {% if Tag.Url == Custom('menu_link_url1') %}
                                    class="active"
                                {% endif %}
                                >
                                <a href="{{ Custom('menu_link_url1') }}">{{ Custom('menu_link_label1') }}</a>
                            </li>
                        {% endif %}
                        {% if Custom('menu_link_label2') is not empty and Custom('menu_link_url2') is not empty %}
                            <li
                                {% if Tag.Url == Custom('menu_link_url2') %}
                                    class="active"
                                {% endif %}
                                >
                                <a href="{{ Custom('menu_link_url2') }}">{{ Custom('menu_link_label2') }}</a>
                            </li>
                        {% endif %}
                        {% if Custom('menu_link_label3') is not empty and Custom('menu_link_url3') is not empty %}
                            <li
                                {% if Tag.Url == Custom('menu_link_url3') %}
                                    class="active"
                                {% endif %}
                                >
                                <a href="{{ Custom('menu_link_url3') }}">{{ Custom('menu_link_label3') }}</a>
                            </li>
                        {% endif %}
                        {% if Custom('menu_link_label4') is not empty and Custom('menu_link_url4') is not empty %}
                            <li
                                {% if Tag.Url == Custom('menu_link_url4') %}
                                    class="active"
                                {% endif %}
                                >
                                <a href="{{ Custom('menu_link_url4') }}">{{ Custom('menu_link_label4') }}</a>
                            </li>
                        {% endif %}
                        {% if Custom('menu_link_label5') is not empty and Custom('menu_link_url5') is not empty %}
                            <li
                                {% if Tag.Url == Custom('menu_link_url5') %}
                                    class="active"
                                {% endif %}
                                >
                                <a href="{{ Custom('menu_link_url5') }}">{{ Custom('menu_link_label5') }}</a>
                            </li>
                        {% endif %}
                        {% if Custom('display_widget_pages') %}
                            {% list Blog.Pages %}
                                {% if loop.first %}
                                    <li>
                                        <a href="#">{{ Lang.Get('Présentation') }}</a>
                                        <ul class="children">
                                {% endif %}
                                            <li>
                                                <a href="{{Page.Url}}">{{ Page.Title }}</a>
                                            </li>
                                {% if loop.last %}
                                        </ul>
                                    </li>
                                {% endif %}
                            {% endlist %}
                        {% endif %}
                        {% if Custom('display_widget_tags') %}
                            {% list Blog.PostsTags(10) %}
                                {% if loop.first is not empty %}
                                    <li {% if isTag %} class="active"{% endif %}>
                                        <a href="#">{{ Lang.Get('Tags') }}</a>
                                        <ul class="children">
                                {% endif %}
                                            <li>
                                                <a href="{{ PostsTag.Url }}">{{ PostsTag.Title }}</a>
                                            </li>
                                {% if loop.last is not empty %}
                                        </ul>
                                    </li>
                                {% endif %}
                            {% endlist %}
                        {% endif %}
  • puis:


                        <!-- Archives -->
                        {% if Custom('display_widget_archives') and Blog.Archives is not empty %}
                            <li>
                                <a {% if isArchive %}class="active"{% endif %} href="#">{{ Lang.Get('Archives') }}</a>
                                <ul class="children">
                                    {% list Blog.Archives %}
                                        {% list Archive.Months %}
                                            {% if Month.PostCount > 0 %}
                                                <li>
                                                    <a href="{{ Month.Url }}">{{ Month.Name }} {{ Archive.Year }}</a>
                                                </li>
                                            {% endif %}
                                        {% endlist %}
                                    {% endlist %}
                                </ul>
                            </li>
                        {% endif %}

                        {% if Custom('display_widget_subscribe') %}
                        <li>
                            <a href="{{ Blog.Url }}/mail/form">{{ Lang.Get('Subscribe') }}</a>
                        </li>
                        {% endif %}
                        <li class="last">
                            <a href="{{ Blog.Url }}/contact">{{ Lang.Get('Contact me') }}</a>
                        </li>
                    </ul>
                </div>
            </nav>

    Et au final, le résultat est super vous pouvez aller voir : www.etiennebois.fr

    J'espère
    que ça pourra aider. Je n'ai pas l'impression que ce thème soit très
    utilisé, pourtant il est très original et rend vraiment bien.
  • Merci Etienne :)
    En effet, le résultat est vraiment super. Ton blog rend hyper bien.
Cette discussion a été fermée.
Toutes les discussions