enlever Barre séparation colonnes thème Modularity lite et fond

  • Avatar de Inconnu
    sebo75 · Membre ·

    Bonjour,

    je suis en train d’essayer de changer un peu l’apparence de mon blog (http://sebocarton.wordpress.com) et notamment de changer la largeur des colonnes. J’y suis arrivé mais il me reste une barre noir et fine vers le milieu que je n’arrive pas à enlever. J’ai trouvé son code grâce à inspect element de google chrome mais je n’ai pas trouvé l’endroit ou l’insérer dans le css.

    border-right: 1px solid black; à changer en 0px
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: black;

    Vous pouvez m’aider ?

    body {
    color:#eee;
    background:#111 url(‘images/bg.jpg’) no-repeat center fixed;
    }

    .container-inner {
    width:950px;
    margin:0 auto;
    padding:1.75em 0 1em;
    }

    .container {
    background:url(‘images/repeater.png’) repeat;
    }

    .lteIE6 .container {
    background:#1a1a1a;
    }

    h1,h2,h3,h4,h5,h6 {
    color:#eee;
    }

    h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {
    color:#eee;
    }

    h3.sub,h2.sub {
    font-size:1.1em;
    font-weight:bold;
    line-height:1em;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#515151;
    border-bottom:1px solid #000;
    margin:0 0 10px;
    padding:0 0 5px;
    }

    a {
    color:#428ce7;
    text-decoration:none;
    }

    a:hover,a:focus {
    color:#fff;
    }

    p {
    color:#eee;
    }

    h6.top {
    color:#ccc;
    }

    #top {
    width:950px;
    color:#666;
    margin:0 auto 1em;
    padding:0 0 .5em;
    }

    #top a {
    color:#666;
    }

    .login {
    float:left;
    }

    #masthead {
    float:left;
    height:36px;
    }

    #masthead h4,#masthead span {
    line-height:2em;
    margin:0;
    padding:10px 0 0;
    }

    #masthead h4 {
    font-weight:bold;
    text-transform:uppercase;
    float:left;
    }

    #masthead h4 a {
    color:#fff;
    text-decoration:none;
    }

    #masthead span.description {
    color:#ccc;
    text-transform:none;
    font-size:.7em;
    padding:.35em 3em;
    }

    .double-border {
    background:url(‘images/double-border.png’) repeat-x bottom;
    height:8px;
    width:100%;
    clear:both;
    float:none;
    border:none;
    margin:1em 0;
    }

    #header-image {
    margin-bottom:20px;
    }

    #top div.main-nav {
    background:#000;
    display:block;
    float:right;
    font-size:10px;
    font-weight:bold;
    text-align:left;
    margin:18px 0 0;
    padding:4px 0;
    }

    #top div.main-nav ul {
    list-style:none;
    padding-left:0;
    margin:0;
    }

    #top div.main-nav li {
    float:left;
    position:relative;
    min-width:50px;
    }

    #top div.main-nav a {
    border-right:1px dotted #666;
    color:#eee;
    display:block;
    line-height:15px;
    text-decoration:none;
    padding:0 1em;
    }

    #top div.main-nav li:last-child a {
    border:none;
    }

    #top div.main-nav ul ul {
    display:none;
    position:absolute;
    top:15px;
    left:0;
    float:left;
    z-index:99999;
    padding:4px 0;
    }

    #top div.main-nav ul ul ul {
    left:100%;
    top:0;
    }

    #top div.main-nav ul ul a {
    background:#000;
    border:none;
    color:#999;
    height:auto;
    line-height:2em;
    width:10em;
    padding:.5em .5em .5em 1em;
    }

    #top div.main-nav ul ul a:hover {
    color:#eee;
    text-decoration:underline;
    }

    #top div.main-nav ul li:hover > ul {
    display:block;
    }

    #welcome-content {
    font-size:2em;
    margin-bottom:.75em;
    }

    .content {
    overflow:hidden;
    width:690px;
    }

    .content h2 {
    font-family:Georgia, serif;
    }

    .post,.page {
    display:block;
    clear:both;
    }

    .post h4,.post h6 {
    font-family:Georgia, serif;
    }

    .content ul {
    list-style-type:disc;
    }

    .postmetadata {
    background:#000;
    color:#999;
    font-size:10px;
    -moz-border-radius:5px;
    -khtml-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    padding:1em;
    }

    .postmetadata a:hover {
    color:#fff;
    }

    .underlined {
    border-bottom:1px solid #eee;
    }

    h6.underlined {
    margin:0 0 1em;
    }

    .welcomebox {
    margin-bottom:1.5em;
    color:#eee;
    text-shadow:1px 1px 1px #000;
    padding:1.5em;
    }

    .page a.post-edit-link {
    display:block;
    clear:both;
    }

    .nav-image-left,.nav-image-up,.nav-image-right {
    text-align:center;
    float:left;
    width:25px;
    margin:0 10px 0 2px;
    }

    .nav-image-left a,.nav-image-up a,.nav-image-right a {
    background:#eee;
    text-decoration:none;
    color:#000;
    padding:2px 48%;
    }

    .nav-image-left a:hover,.nav-image-up a:hover,.nav-image-right a:hover {
    background:#000;
    color:#fff;
    }

    .nav {
    background:#eee;
    -moz-border-radius:5px;
    -khtml-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    margin:0 0 1em;
    }

    .nav:hover {
    background:#ccc;
    }

    .prev a,.next a {
    color:#222;
    text-decoration:none;
    padding:.2em 1em;
    }

    .nav-interior {
    clear:both;
    display:inline;
    margin:0;
    padding:0;
    }

    .nav-interior .next {
    color:#000;
    text-decoration:none;
    float:right;
    }

    .nav-interior .prev {
    color:#000;
    text-decoration:none;
    float:left;
    }

    .comments-nav .next a {
    color:#428CE7;
    }

    .comments-nav .prev a {
    color:#428CE7;
    }

    #sidebar {
    float:right;
    width:225px;
    text-align:center;
    font-size:1.2em;
    margin:20px 0 20px 25px;
    }

    #sidebar h3 {
    margin:0;
    padding:0 0 .6em;
    }

    #sidebar .item {
    margin:0 0 4em;
    }

    #sidebar ul {
    list-style:none;
    font-size:1em;
    margin:0 0 1.6em;
    }

    #sidebar ul li a,ul.txt li {
    color:#eee;
    height:1%;
    line-height:1.2em;
    border-bottom:1px solid #000;
    display:block;
    padding:6px 0 6px 8px;
    }

    #sidebar ul li a:hover,ul.txt li:hover {
    color:#fff;
    background-position:1px .8em;
    background:#000;
    }

    #sidebar ul li a span,ul.txt li,h4 a span {
    color:#696455;
    }

    #sidebar ul li.active a {
    cursor:default;
    color:white;
    }

    #sidebar ul ul {
    list-style:none;
    margin:0;
    }

    #sidebar .widget_categories ul li a,#footer .widget_categories ul li a,#sidebar .widget_twitter ul li a,#footer .widget_twitter ul li a {
    border:none;
    background:transparent;
    color:#428CE7;
    display:inline;
    line-height:inherit;
    padding:0;
    }

    #sidebar .widget_categories ul li,#footer .widget_categories ul li,#sidebar .widget_twitter ul li,#footer .widget_twitter ul li {
    padding-left:8px;
    }

    #sidebar .widget_twitter ul li {
    margin-bottom:1.5em;
    }

    #flickr_badge_wrapper {
    background:transparent!important;
    border:none!important;
    }

    .widget_flickr th,.widget_flickr td {
    margin:0;
    padding:0;
    }

    .widget_flickr img {
    max-width:230px;
    }

    .widget_rss_links p img {
    vertical-align:middle;
    margin:0 4px 0 0;
    }

    #footer-wrap {
    background:#000;
    }

    #footer {
    width:950px;
    color:#999;
    text-align:left;
    margin:0 auto;
    padding:1.5em 0;
    }

    #footer p {
    color:#999;
    }

    #footer h3 {
    border-bottom:none;
    color:#999;
    margin:0;
    padding:0 0 .6em;
    }

    #footer .item {
    margin:0 0 4em;
    }

    #footer ul {
    list-style:none;
    font-size:1em;
    margin:0 0 1.6em;
    }

    #footer ul li a,ul.txt li {
    height:1%;
    line-height:1.2em;
    display:block;
    padding:6px 0 6px 8px;
    }

    #footer ul li a:hover,ul.txt li:hover {
    color:#fff;
    background-position:1px .8em;
    background:#111;
    }

    #footer ul li a span,ul.txt li,h4 a span {
    color:#696455;
    }

    #footer ul li.active a {
    cursor:default;
    color:white;
    }

    #footer ul ul {
    list-style:none;
    margin:0;
    }

    #footer ul#recentcomments {
    list-style:none;
    font-size:1em;
    margin:0 0 1.6em;
    }

    #footer ul#recentcomments li.recentcomments {
    display:block;
    padding:4px 0 4px 8px;
    }

    #footer ul#recentcomments li.recentcomments a {
    border:0;
    background-image:none;
    }

    #footer ul#recentcomments li.recentcomments a:hover {
    color:#fff;
    background-position:1px .8em;
    background:#111;
    }

    #footer ul#recentcomments li.recentcomments a span {
    color:#696455;
    }

    .right {
    float:right;
    }

    .left {
    float:left;
    }

    .middle {
    float:left;
    margin:0 auto;
    }

    .clear {
    clear:both;
    }

    img.centered {
    display:block;
    margin-left:auto;
    margin-right:auto;
    max-width:950px;
    }

    img.alignright {
    display:inline;
    max-width:950px;
    margin:3px 0 2px 10px;
    padding:4px 0 4px 4px;
    }

    img.alignleft,img.attachment-post-thumbnail {
    display:inline;
    max-width:950px;
    margin:3px 10px 2px 0;
    padding:4px 4px 4px 0;
    }

    img.alignnone {
    display:block;
    max-width:950px;
    margin:3px 10px 2px 0;
    padding:4px 4px 4px 0;
    }

    .alignleft,.attachment-post-thumbnail {
    float:left;
    }

    .alignright {
    float:right;
    }

    .aligncenter,div.aligncenter {
    display:block;
    margin-left:auto!important;
    margin-right:auto!important;
    }

    .thumbnail,.attachment-thumbnail,#featured-section .timthumbnail,.archive .timthumbnail,.search .timthumbnail,#category-stack .timthumbnail {
    float:left;
    margin:0 1.5em 1.5em 0;
    }

    .alignright .attachment-thumbnail {
    margin-right:0;
    }

    .attachment-medium {
    max-width:950px;
    overflow:hidden;
    display:inline;
    }

    .attachment-large {
    max-width:950px;
    overflow:hidden;
    display:inline;
    }

    .content .size-medium,.content .size-large {
    margin:0 1.5em 1.5em 0;
    }

    .home .size-medium,.home .size-large {
    max-width:590px;
    height:auto;
    overflow:hidden;
    margin:0 .5em .5em 0;
    }

    .gallery {
    width:101%;
    }

    .gallery img {
    border:none!important;
    float:none;
    }

    .content img.size-auto,.content img.size-full,.content img.size-large,.content img.size-medium,.wp-caption {
    max-width:100%;
    height:auto;
    width:auto;
    }

    img.wp-smiley {
    margin:0;
    }

    .col-0 {
    width:100%;
    }

    .col-1 {
    width:100%;
    }

    .col-2 {
    width:50%;
    }

    .col-3 {
    width:33%;
    }

    .col-4 {
    width:25%;
    }

    .col-5 {
    width:20%;
    }

    .col-6 {
    width:16.5%;
    }

    .col-7 {
    width:14%;
    }

    .col-8 {
    width:12.4%;
    }

    .col-9 {
    width:11%;
    }

    .col-10 {
    width:10%;
    }

    .col-11 {
    width:9%;
    }

    .col-12 {
    width:8.33%;
    }

    .col-13 {
    width:7.6%;
    }

    .col-14 {
    width:7.1%;
    }

    .col-15 {
    width:6.66%;
    }

    .col-16 {
    width:6.25%;
    }

    .col-17 {
    width:5.83%;
    }

    .col-18 {
    width:5.55%;
    }

    .col-19 {
    width:5.25%;
    }

    .col-20 {
    width:4.95%;
    }

    #filters {
    clear:both;
    height:2em;
    margin-bottom:1em;
    }

    #filters li {
    float:left;
    margin-right:2em;
    }

    :focus {
    outline:0;
    }

    .advertisement .box {
    background:#e5ecf9;
    }

    #search {
    margin:0;
    padding:0;
    }

    #search #s {
    background:#ddd url(‘images/search.png’) 0 center no-repeat;
    color:#222;
    font-size:1em;
    width:150px;
    border:1px solid #333;
    margin:0;
    padding:4px 0 4px 17px;
    }

    #search input {
    border:0;
    }

    #search #s:hover {
    color:#0066cc;
    background:#fff url(‘images/search_blue.png’) 0 center no-repeat;
    }

    .search-excerpt {
    margin:0;
    }

    #comments,#respond {
    clear:both;
    }

    h3#comments {
    background:#000;
    margin:10px 0 0;
    padding:20px 10px;
    }

    h3#comments span.comments-subscribe {
    float:right;
    font-size:.7em;
    margin-left:3px;
    background:url(‘images/rss.png’) no-repeat 0 50%;
    color:#cccccc;
    padding:0 0 0 19px;
    }

    h3#respond {
    background:#000;
    margin:10px 0 0;
    padding:20px 10px;
    }

    ol.commentlist {
    list-style-type:none;
    border-bottom:5px solid #eee;
    overflow:hidden;
    margin:0 0 15px;
    padding:0;
    }

    ol.commentlist li .comment-wrapper {
    border-top:5px solid #eee;
    overflow:hidden;
    width:100%;
    }

    ol.commentlist li.pingback {
    border-top:5px solid #eee;
    margin-top:-5px;
    padding:1em 0;
    }

    ol.commentlist li.pingback p {
    margin:0;
    }

    ol.commentlist li strong.fn {
    padding-left:1em;
    }

    ol.commentlist li .comment-meta {
    width:150px;
    float:left;
    padding:15px 0;
    }

    ol.commentlist li .comment-entry {
    line-height:2em;
    min-height:160px;
    margin:0 0 0 150px;
    padding:20px 0 0;
    }

    ol.commentlist li .avatar {
    border:1px solid #000;
    margin:0 0 1em;
    padding:1em;
    }

    #commentform {
    border-top:10px solid #333;
    background:#000;
    margin:0 0 7px;
    padding:30px 150px 6px;
    }

    #commentform input[type=text] {
    float:left;
    margin-right:5px;
    }

    #commentform .comment-form-comment label,#commentform .form-allowed-tags {
    display:none;
    }

    #slideshow {
    list-style:none;
    overflow:hidden;
    min-height:425px;
    margin:0 0 3em;
    padding:0;
    }

    #slideshow .slide {
    width:950px;
    text-align:center;
    min-height:425px;
    background:none;
    padding:0;
    }

    #slideshow .slide h4 {
    text-transform:uppercase;
    margin:0 0 .5em;
    padding:0 16px;
    }

    #slideshow .slide img {
    display:block;
    max-width:950px;
    text-align:center;
    margin:0 auto;
    }

    .navigation {
    clear:both;
    overflow:hidden;
    width:100%;
    margin:1em 0;
    }

    A savoir que je suis en mode blog et que j’ai accès au CSS personnalisé.

    Autre chose : le fond du blog n’est pas celui qui doit correspondre avec le thème modularity lite, comment faire pour le remettre ??

    merci d’avance pour vos conseils, à savoir que je suis un beau novice dans les règles :°)

    Seb

    L’adresse du blog concerné est (visible uniquement pour les utilisateurs connectés).

  • Avatar de Inconnu
    airodyssey · Modérateur ·

    Bonjour. D’abord, assurez-vous que, dans Apparence > Custom Design > CSS, vous sélectionnez non pas l’option pour remplacer la feuille au complet, mais bien pour ajouter du code à la feuille existante. Dites-moi si cela règle le problème en partie, et ensuite on passera aux éléments suivants.

  • Avatar de Inconnu
    sebo75 · Membre ·

    Bonjour et merci, l’option n’était pas coché et elle l’est maintenant, malheureuseùment ça n’a résolu aucun probleme.

    Pour ce qui est du fond, je le vois se charger au début, mais il est remplacé par un fond noir

    Merci

  • Avatar de Inconnu
    airodyssey · Modérateur ·

    J’oubliais de préciser (mais je pensais que ça allait de soi) : vous sélectionnez d’ajouter du code à la feuille existante et vous ne copiez-coller que ce que vous voulez changer, pas la feuille au complet.

  • Avatar de Inconnu
    sebo75 · Membre ·

    c’est ce que je pense avoir fait

  • Avatar de Inconnu
    airodyssey · Modérateur ·

    Je vois le même code … 

    body {
color:#eee;
background:#111 [...]

    …qui se répète deux fois : une dans la feuille de style qui vient avec le thème (style.css), et l’autre dans la feuille personnalisée (custom.css).

    À mon avis, vous avez copié-collé toute la feuille au lieu de ne retenir que les éléments que vous voulez modifier.

  • Avatar de Inconnu
    sebo75 · Membre ·

    ok! quelle est donc la marche à suivre ? est-ce que j’enlève tout et je remets seulement les éléments que je veux modifier?

  • Avatar de Inconnu
    airodyssey · Modérateur ·

    Oui.

  • Avatar de Inconnu
    emmaltepe · Membre ·

    Bonsoir,

    D’après Firebug, la fameuse barre noire se trouve dans une partie de la CSS intitulée div.colborder, en « cascade » de body.
    J’en déduis que probablement pour changer l’affichage de votre blog vous avez utilisé un tableau, en affectant à chaque colonne une certaine largeur (d’où tous les « .col {} » de la CSS que vous nous communiquez.

    Je ne suis pas une pro de la CSS et je sais que la CSS du thème qui s’affiche est la CSS de base, tout n’y figure pas.
    Mais peut-être…. (à essayer, c’est-à-dire ajouter à la CSS sans valider, juste prévisualiser ; et sans garantie de résultat) : ajouter la partie incriminée avec quelques modifications pour supprimer ce trait noir…

    La partie incriminée :

    div.colborder {
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: #000000;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: solid;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 1px;
    margin-right: 24px;
    padding-right: 24px;
    }

    Remplacer « #000000 » (noir) par « none » ou remplacer  » border-right-width-value: 1px; » par « border-right-width-value: 0px; »
    En « direct », la bande noire disparaît. Reste à voir si c’est suffisant….

    Un conseil : quand vous touchez à la CSS, restez très prudent, sauvegardez quelque part la version modifiée qui vous convient, histoire de pouvoir y revenir après des essais non concluants.
    Quand on prend le temps de constituer un filet de sécurité qui évite les cheveux blancs prématurés, c’est un vrai plaisir d’essayer et de bidouiller.

    Belle soirée,

    maltepe

  • Avatar de Inconnu
    airodyssey · Modérateur ·

    @emmaltepe : Merci de votre présence, manifestement vous vous y connaissez mieux en CSS que moi :-)

  • Avatar de Inconnu
    sebo75 · Membre ·

    Merci pour ces conseils, mais ça ne change rien malheureusement !

    Bonne soirée

  • Avatar de Inconnu
    airodyssey · Modérateur ·

    @sebo75 : Comprenez que nous sommes des utilisateurs comme vous et que nous n’avons pas accès à votre tableau de bord pour vérifier que vous suivez bien nos directives. Que contient votre boîte de texte dans votre tableau de bord, sous la rubrique du Custom Design/CSS? Toute la feuille au grand complet (comme dans votre réponse 1) ou seulement les éléments à changer?

  • Avatar de Inconnu
    emmaltepe · Membre ·

    @sebo75 :
    Ah flûte (mais prévisible malheureusement) ! Je regarderai de plus près ce qui coince à partir de la CSS de votre thème (demain plutôt). Juste : vous avez utilisé une image pour le fond, non ?

    @airodyssey
    Merci, vous allez encore devoir assumer la tendance écarlate que choisissent mes joues à votre lecture… :-)
    Pour finalement une impression fausse…. :-S

    Je vais essayer de rattraper les choses :-D

    maltepe

  • Avatar de Inconnu
    sebo75 · Membre ·

    C’est tout bon, j’ai viré la feuille de style en double et je n’ai laissé que les modifs. Pour la barre voici le code total :

    #sidebar {
    float:right;
    width:225px;
    text-align:center;
    font-size:1.2em;
    margin:20px 0 20px 25px;
    }

    .content {
    overflow:hidden;
    width:690px;
    }

    div.colborder {
    padding-right:24px;
    margin-right:24px;
    border-right:0 solid black;
    border-right-width:0;
    border-right-style:solid;
    border-right-color:black;
    }

    encore merci

  • Avatar de Inconnu
    emmaltepe · Membre ·

    @sebo75,

    Cool ! :-)
    Outre le problème des feuilles de style en double qui interféraient, d’après ce que vous nous transmettez de la CSS, c’était bien ce fameux « div.colborder » qui était en cause et que vous avez muselé avec un 0 de largeur. (Ouf, je n’étais pas complètement à côté de la plaque !)

    Belle continuation…. :-)

    maltepe

  • Le sujet ‘enlever Barre séparation colonnes thème Modularity lite et fond’ est fermé aux nouvelles réponses.