editar estilo de comentarios

Inicio Foros WordPress Themes y Diseño editar estilo de comentarios

Este debate contiene 10 respuestas, tiene 3 mensajes y lo actualizó  Dana hace 9 años, 11 meses.

  • Autor
    Publicaciones
  • #11762

    Dana
    Participante

    <p>bueno actualmente y aunq me gusta mi theme ,en el asunto de los comentaris es muy cutre,me gustaria algo asi..<br />
    352_14_01_2009_10_06.png<br />
    q archivo y linia e de editar para ponerlo asi?
    </p>

  • #25044

    Dana
    Participante

    mirando he encontrado esto en mi css, no se si es esto lo q hay q editar..

    [code]/* =====Comments and comment form===== */
    h2.comments {
    background:url(../images/comments-divider.gif) no-repeat center 9px;
    clear:both;
    font-size: 2em; /* 24 */
    line-height: .75;
    margin: 0 0 .375em 0;
    padding-top:71px;
    }
    ol.comments-list,
    ol.pings-list {
    clear:both;
    list-style:none;
    margin:0;
    }
    ol.comments-list li {
    border-top:1px dotted #cecfd1;
    }
    .comment {
    overflow:hidden;
    padding:10px; /* 2 units + 4px for gravatar */
    position:relative;
    }
    .comment .info {
    display:block;
    float:left;
    padding: 2px 0 0 46px;
    width:180px;
    }
    .comment .info .comment-author {
    font-size: 1.16666667em; /* 14 */
    font-weight:bold;
    line-height: 1.28571429;
    }
    .comment .comment-author .photo img{
    position:absolute;
    left: 10px;
    top: 10px;
    }
    .comment .info .said,
    .comment .info .on {
    display:none;
    }
    .comment .comment-date {
    clear:both;
    }
    .comment .comment-date a,
    .comment .comment-date a:visited {
    color:#999;
    }
    .comment .comment-content {
    float: left;
    width: 300px;
    }

    /* author comments */
    .bypostauthor,
    .post-author {
    background:#51555c url(../images/author-comment.jpg) no-repeat left top;
    color:#fff;
    }
    .bypostauthor a,
    .bypostauthor a:visited,
    .post-author a,
    .post-author a:visited {
    color:#8593ae;[/code]
    /////////////////////////////////////////////////////////////

    [code]form#comment-form {
    background:#efeff1 url(../images/watermark-light.gif) repeat-x left top;
    border:1px solid #e9eaea;
    clear:both;
    color:#999;
    margin-top:1.5em;
    padding:10px 9px;
    }
    #comment-form .section {
    clear:both;
    padding-left:154px;
    }
    #comment-form p.section {
    margin-bottom:10px;
    margin-top:10px;
    }
    #comment-form .section label {
    color:#51555c;
    font-weight:bold;
    margin-left:-150px;
    float:left;
    text-align:right;
    width:130px;
    }
    #comment-form .section input {
    width:162px;
    }
    #comment-form #comment-form-comment label {
    font-size: 1.16666667em; /* 14 */
    line-height: 1.28571429;
    }
    #comment-form #comment-form-comment div {
    background:#ddd;
    float:left;
    margin-bottom:10px;
    }
    #comment-form p#some-html-is-ok {
    margin:0 0 0 .5em;
    }
    #comment-form textarea{
    display:block;
    height:9em;
    width:370px;
    }
    #comment-form p.actions {
    margin:0 6px 0 150px;[/code]

  • #25046

    imported_Fernando
    Participante

    Lo mejor, cuando ves algo que te gusta, es revisar el CSS de lo que te gusta y aplicarlo al tuyo ¿cual es la dirección del sitio ese con el CSS que te gusta y le echamos un vistazo? 😉

  • #25047

    Dana
    Participante
  • #25060

    Joel López M.
    Participante

    Exactamente como dice Fernando, yo lo que hago para hacer themes amí gusto, es combinar diferentes archivos .php de themes similares. 🙂

  • #25068

    Dana
    Participante

    humm,pos me quedo igual,xd

  • #25070

    imported_Fernando
    Participante

    Mira, la idea es visualizar el CSS de ese theme, en concreto las líneas que muestran los comentarios de ese modo. Es mas, en este caso el usuario del blog es compañero también de foro así que tienes ayuda extra.

    Pero vaya, si usas Firefox o Safari tienes herramientas (firebug para Firefox y el inspector web para safari) que te permiten espiar el CSS de todos los sitios que visites, copiar la parte que te guste y probarla en tu theme.

    En ese caso el css que usan es este:
    [quote][code]div.commentbody {
    background:#EEEEEE url(images/comment-top.png) no-repeat scroll 0 0;
    margin:10px 60px 10px 30px;
    padding:25px 0 0 10px;[/code][/quote]

    Solo tienes que descargar esa imagen (también puedes hacerlo con el inspector web de Safari) y modificar tu CSS y el div de los comentarios para que use ese div, o modificar tu css de los comentarios para que use ese estilo. Vamos, es algo avanzado, hay que tocar el style.css y el comments.php, no para principiantes, aunque no es tan dificil una vez que te pones, y de paso aprendes 🙂

  • #25077

    Dana
    Participante

    gracias amigo.

  • #25080

    Dana
    Participante

    es mas en esta pagina..
    http://www.e-referrer.com/

    he visto este quote q me gusta,como lo podia hacer igual,q codigo e de añadir?

    [img]http://www.descargas007.com/movil/images/525_16_01_2009_11_23.png[/img]

  • #25093

    imported_Fernando
    Participante

    Pues el CSS de esa parte es este:

    [quote][code].tr {<br />
    background:transparent url(/images/crnrs/1tr.gif) no-repeat scroll 100% 0;<br />
    padding:10px;<br />
    }[/code][/quote]Como todos los que parece que te gustan llevan una imagen detrás que es lo que le da el efecto.

  • #25095

    Dana
    Participante

    ? pero lo pongo en mi css tal como esta? y la imagen? q imagen es?

    1tr.gif

El foro ‘Themes y Diseño’ está cerrado y no se permiten nuevos debates ni respuestas.

Pin It on Pinterest

Ir al contenido