Themes y Diseño

Foro WordPress » WordPress » Themes y Diseño

Pequeña modificación en SINGLE.PHP agregando foto (9 mensajes)

Acerca de este hilo

Tags

Etiquetas:

  1. bananajota

    3.0
    Antiguedad: Nov 2009
    Mensajes: 40

    offline

    Publicado hace 2 años
    #

    Buenas! Estoy con ganas de agregar la foto de los autores en cada post. Instalé el plugin correspondiente y lo inbserté al pie de los post en single.php. Queda muy bien. Ahora, el problema es que aparece la foto y a continuación en otro renglón los otros datos.
    http://www.diegocosta.com.ar/?p=576 (UN EJEMPLO)
    Cómo hago para que esa imágen quede donde está y el texto "Escrito por Fulano el día 22/11/08 en la categoría X" figure a la derecha, aprovechando mejor el espacio y equilibrando esa caja?

    Probé creando divs pero no soy muy ducho y si bien lo logré, no pude hacer que sean la misma caja, quedaban separados y sin fondo de color.

    Saludos y gracias

  2. Li Chong

    5.0
    Antiguedad: Ene 2009
    Mensajes: 273

    offline

    Publicado hace 2 años
    #

    Copia y pega el código que no sé dónde meter bisturí.

    Li Chong
  3. bananajota

    3.0
    Antiguedad: Nov 2009
    Mensajes: 40

    offline

    Publicado hace 2 años
    #

    Gracias Li Chong. Te puedo dar el código del SINGLE.PHP

    < ?php get_header(); ? >

        < !-- Container -- >
        < div id="content-wrap" >

            < !-- single post content -- >
            < div id="singlepost" >
                < div class="post" >
                    < !-- single post loop -- >
                    < ?php if (have_posts()) : while (have_posts()) : the_post(); ? >

                    < !-- title of the single pot -- >
                    < h3 >< ?php the_title(); ? >< /h3 >
                    < !-- content -- >
                    < ?php the_content(__('')); ? >

                    < !-- Single Post Details -- >
                < /div >

                < div id="singlepostinfo" >
    < ?php the_author_image(); ? > Escrito por < ?php the_author(); ? >,
                    < ?php /* This is commented, because it requires a little adjusting sometimes.
                        You'll need to download this plugin, and follow the instructions:
                        <a href="http://binarybonsai.com/archives/2004/08/17/time-since-plugin/" rel="nofollow">http://binarybonsai.com/archives/2004/08/17/time-since-plugin/</a> */

                        /* $entry_datetime = abs(strtotime($post- >post_date) - (60*120)); echo time_since($entry_datetime); echo ' ago'; */ ? >
                    el día < ?php the_time('j/F/Y') ? > en la categoría < ?php the_category(', ') ? >.
                    Seguí las respuestas a esta entrada con < ?php comments_rss_link('RSS 2.0'); ? >.
                    < ?php if (('open' == $post- > comment_status) &amp;&amp; ('open' == $post- >ping_status)) {
                        // Both Comments and Pings are open ? >
                    < ?php } elseif (!('open' == $post- > comment_status) &amp;&amp; ('open' == $post- >ping_status)) {
                        // Only Pings are Open ? >
                    < ?php } elseif (('open' == $post- > comment_status) &amp;&amp; !('open' == $post- >ping_status)) {
                        // Comments are open, Pings are not ? >
                    < ?php } elseif (!('open' == $post- > comment_status) &amp;&amp; !('open' == $post- >ping_status)) {
                        // Neither Comments, nor Pings are open ? >
                    < ?php } edit_post_link('Editar esta entrada.','',''); ? >
                < /div >

                < div class="single-entry-nav" >
                    < div class="left" >< ?php previous_post_link('« %link') ? >< /div >
                    < div class="right" >< ?php next_post_link('%link »') ? >< /div >
                    < div style="clear:both" >< /div >
                < /div >

                < div id="comment-wrapper" >
                    < ?php comments_template(); ? >
                < /div >       

                < !-- End of Loop fore single post -- >
                < ?php endwhile; else : ? >
                < ?php endif; ? >
            < /div >
            < !-- /singlepost  -- >

    < ?php get_sidebar(); ? >

    < ?php get_footer(); ? >

    y del STYLE.CSS

    /*
    Basado en Wordpress Magazine Theme
    Theme URI: <a href="http://www.gabfire.com/wordpress-magazine-theme-released/" rel="nofollow">http://www.gabfire.com/wordpress-magazine-theme-released/</a>
    Author: Mehmet Ozekinci
    Author URI: <a href="http://www.gabfire.com" rel="nofollow">http://www.gabfire.com</a>
    Version: 1.0
    .
    Modificado para Jaque Mate por DCG (Sept'09)
    .
    */


    /* *********************************************************** Reset Everything */
    * {margin:0;padding:0;}
    a:link, a:visited, a:hover {text-decoration:none;}
    fieldset,img {border:0;}
    ul {list-style:none;}
    q:before,q:after {content:'';}
    abbr,acronym { border:0;
    }

    body {
        background:#666;
        font: 1em/1.5em Arial, Verdana, Geneva, Helvetica, sans-serif;
        }
    span {display:none;}

    h1 {
    font:50pt Georgia,Times New Roman,Trebuchet;
            margin-bottom:10px;
        padding-left:45px;
        text-align:center;
            background:url(images/clubjaquemate.gif) no-repeat top left;
    }

        h1 a:link,h1 a:visited,h1 a:hover {color:#444;}
    h2 {
        font:bold 1.2em Georgia,Times New Roman,Trebuchet;
        color:#222;
        padding-bottom:3px;
        border-bottom:1px solid #efefef;
    }
    #rightcolumn h2 {padding-top:20px;}
    #rightcolumn h2#titlespons {padding:0;}
    h3 {
        padding-bottom:5px;
        }

    h3 {
        font:bold 1.2em Georgia,Times New Roman,Trebuchet;
        }   

    h3 a:hover{
        text-decoration:underline;
        }

    h3#respond{
        margin-top:20px;
        }

    .right {
        float:right;
        }

    .left {
        float:left;
        }

    /* ***********************************************************
    *   Links                  *
    ***********************************************************/


    a:link,  a:visited {
        color:#29568f;
        }

    a:hover {
        color:#d92100;
        }

    #postdetails a:link, #postdetails a:visited {
        color:#77ace0;
        }

    #postdetails a:hover {
        color:#ffae00;
        text-decoration:none;
        }

    #footer a:link, #footer a:visited {
        color:#fff;
        }

    #footer a:hover {
        text-decoration:underline;
        }

    /* ***********************************************************
    *   Main DIVISIONS      *
    ***********************************************************/


    #wrapper {
        width: 970px;
            padding:20px 0 10px;
        margin: 20px auto 0;
        background: #fff;
        border:double #ccc;
        }

    #header {
        width: 950px;
        color: #000;
        margin:0 auto;
        font-size: 14px;
            overflow: hidden;
        }

    #content-wrap {
        width:950px;
        margin: 10px auto 0;
        font:.75em/1.5em Arial,Tahoma,Verdana,sans-serif;
        clear:both;
        }

    #footer {
        width: 970px;
        margin: 0 auto;
        color: #ccc;
        font-size:.6em;
        text-align:right;
        }

    /************************************************************
    *   Header                          *
    ************************************************************/

    #headerleft {
        width: 650px;
        float: left;
        border:1px;
        }

    #headerright {
        width: 300px;
            float: right;
        margin: 0px;
        text-align: right;
        }

    #navigation {
        width:950px;
        background: #555;
        clear:both;
        }   

    #searchform{
        float: right;
        }

    #s {
        width: 190px;
        border: 1px solid gray;
        padding:1px;
        }

    #searchbutton{
        font: bold 11px Verdana;
        height: 20px;
        background-color: #fdffef;
        }

    /* header dropdown menu
    ---------------------------------------------------------------------------------------------- */

    #navigation ul li a,
    #navigation ul li a:visited {
        display: block;
        font: 1em Arial, Tahoma, Verdana;
        border-right:1px solid #666;
        color: #fff;
        padding: 6px 10px;
    }
    #navigation ul li:hover a,
    #navigation ul li a:focus,
    #navigation ul li a:active,
    #navigation ul li.p7hvr a {
        color: #fff;
        background:#d92100;
    }
    #p7menubar li {
        float: left;
        width: 9em;
    }
    #p7menubar li ul, #p7menubar ul li  {
        width: 12em;
    }
    #navigation ul ul li a,
    #navigation ul ul li a:visited  {
        color: #333;
        border-right:0;
        border-top:1px solid #999;
        font-size:.9em;
        padding: 3px 10px;
        text-decoration:none;
    }
    #navigation li ul {
        position: absolute;
        display: none;
        border:1px solid #999;
        border-top:0;
        background-color: #ddd;
        z-index:999;
    }
    #p7menubar li:hover ul, #p7menubar li.p7hvr ul {
        display: block;
    }
    #p7menubar li:hover ul a, #p7menubar li.p7hvr ul a {
        color: #333;
        background-color: transparent;
    }
    #p7menubar ul a:hover {
        background-color: #606060!important;
        color: #fff!important;
    }
    #p7menubar li {width: auto;}

    ul#feeds {
        float:right;
    }
    ul#feeds li {
        float: left;
    }
    ul#feeds li a,
    ul#feeds li a:visited {
        display: block;
        font: 1em Arial, Tahoma, Verdana;
        border-right:1px solid #666;
        color: #fff;
        padding: 6px 10px;
    }

    ul#feeds li a:hover,
    ul#feeds li a:focus,
    ul#feeds li a:active {
        color: #fff;
        background:#333;
    }
    .rss {
        font-size:90%;
    }

    /************************************************************
    *   Single post  [Single post page contains two column, Sidebar and Content]   *
    ***********************************************************/
       

    #singlepost {
        float:left;
        display: inline;
        padding: 8px 10px 10px 10px;
        margin-right:15px;
        width: 635px !important;
        width: 655px;
        width/**/:/**/635px;
    }

    .post {
    }

    #singlepostinfo {
        background: #f7f7f7;
        border-top: 1px dotted #ccc;
        border-bottom: 1px dotted #ccc;
        padding: 10px;
        clear:both;
        float:right;
        display:block;
        font:.8em/1.4em verdana;
    }  

    .postinfo { /* post info shown under the summary of posts on search results */
        text-align:right;
        padding-top:3px;
        font:.8em verdana, arial, tahoma;
        color:#9f9f9f;
        border-top:1px dotted #f1f1f1;
        margin-bottom:20px;
    }

    .single-entry-nav {
        display: block;
        margin:20px 0 ;
        font: 1em verdana;
        }   

    .post img {display:block;float:left;padding;}

    .post img.alignleft {
        float:left;
        margin: 5px 10px 5px 0;
            padding:5px 5px;
        display:block;
    }

    .post img.alignright {
        float:left;
        margin: 5px 0px 5px 10px;
            padding:5px 5px;
        display:block;
    }

    .post p {
        font:1em/1.6em verdana;
        padding-bottom: 15px;
    }

    .post ul,.post ol{
        font:.95em/1.5em verdana;
        padding-left:30px;
        margin-bottom:15px;
    }

    blockquote{
        font:.9em/1.5em "trebuchet ms", garamond, "lucida grande", serif;
        margin-bottom:15px;
    }

    #pagenavi {
        height:20px;
    }
    /************************************************************
    *   Content-wrapper    [Left column]    *
    ***********************************************************/

    #leftcolumn {
        float:left; display:inline;
        background:#f2f2f2;
        margin-right:15px;  padding:8px 10px 10px 10px;
        width: 300px !important;
        width: 320px;
        width/**/:/**/300px;
    }
    #featured {
        padding-bottom:5px;
        border-bottom:1px solid #f2f2f2;
        margin-bottom:15px;
        }
    #postdetails {
        text-align:right;
        background:#333;
        color:#fff;
        font:.8em verdana;
        padding:3px 5px;
        margin-top:5px;
    }
    #featured img {
        margin-bottom: 10px;
        display:block;
            padding:3px 5px;
    }
    #featurednewslist ul    {
        margin:0 0 15px 15px;
        list-style:square;
    }
    #featurednewslist li a:link, #featurednewslist li a:visited {
        color:#29568f;
    }
    #featurednewslist li a:hover {
        color:#d92100;
        text-decoration:underline;
    }
    /************************************************************
    *   Content-wrapper    [Middle column]            *
    ************************************************************ */

    #midcolumn {
        float:left;
        width: 320px;
        display:inline;
    }
    .midcolumnpost {
        margin-bottom:10px;
        padding:10px;
    }
    .gray { background-color:#f2f2f2;}
    .details {
        margin-top:10px;
        text-align:right;
        font:.8em verdana;
    }
    #midcolumn img {
        margin:5px 0 10px;
        display:block;
            padding:2px 2px;
    }
    /************************************************************
    *   Content-wrapper    [Right column]                *
    ********************************************************** */

    #rightcolumn {
        float:right;
        width:280px;
    }
    #sponsors {
        padding:0 8px 0 8px;
    }
    #sponsors img {
        margin-top:6px;
    }
    #categories {
        float:left;
        width:135px;
        margin-right:10px;
    }
    #archive {
        float:left;
        width:135px;
    }
    #rightcolumn ul {
        margin:0 0 0 3px;
        list-style-type: square;
    }
    #rightcolumn ul li {
        margin-left:18px;
        line-height:1.6em;
    }
    #rightcolumn ul li a, #rightcolumn ul li a:visited  {
        color:#777;
        display:inline;
        font:1em Tahoma,Arial,"Trebuchet MS",Verdana;
    }
    #rightcolumn ul li a:hover {
        color:#29568f;
        text-decoration:underline;
    }
    #archiveform {
        margin-top:5px;
    }
    #rightcolumn  ul ul {
        margin-bottom:0;
    }

    /* commentform
    ---------------------------------------------------------------------------------------------- */

    #comment-wrapper ol {list-style:decimal;font:90% verdana, arial, helvetica, verdana, serif;}
    #commentform p {margin-bottom:10px;}
    #commentform label {color:#666;font-size: 100%;padding-left: 5px;}
    #commentform small {color: #999999;font-size: 90%;}
    #commentform input {font: 100% Arial, Helvetica, sans-serif;width: 220px;padding: 2px;  border: 1px solid #e6e6e6;}
    #commentform textarea {font: 100% Arial, Helvetica, sans-serif;width: 480px;height: 140px;border: 1px solid #e6e6e6;padding: 2px 3px 3px 7px;}
    #commentform #submit {font: 12px/100% Arial, Helvetica, sans-serif;border: 1px solid #555;color:#2a2a2a;    background:#7ac4ea; width: 100px;height: 25px;padding: 2px 8px !important;padding: 2px 5px; margin-left: 390px;}
    #commentform #submit:hover {background:#d92100; color:#fff;}
    #commentform textarea:focus, #commentform input[type="text"]:focus {border: solid 1px #c00;}
    /* comment list
    ---------------------------------------------------------------------------------------------- */

    .commentlist {margin: 10px 0px;padding-left: 25px;line-height: 130%;}
    .commentlist li{padding: 5px 10px 0px;color:#888;}
    .commentlist .alt {background: #f2f2f2;border-top:1px solid #ccc;border-bottom:1px solid #ccc;}
    .commentlist cite {font:bold 100% verdana, arial, helvetica, sans-serif;color: #888;}
    .commenttext {margin-top:15px;}
    .commenttext p {padding-bottom:10px;font-size:11px;color: #333;}

    Gracias por tu tiempo.

    PD: Desde FIREFOX el sitio se ve centrado, pero en INTERNET EXPLORER se ve sobre la izquierda... algún tip para centrarlo también?

  4. Li Chong

    5.0
    Antiguedad: Ene 2009
    Mensajes: 273

    offline

    Publicado hace 2 años
    #

    Añade la siguiente regla a tu css:

    #singlepostinfo img {
        float: left;
        }

    Li Chong
  5. bananajota

    3.0
    Antiguedad: Nov 2009
    Mensajes: 40

    offline

    Publicado hace 2 años
    #

    Gracas Li Chong, tu kung fu es bueno....Te dejé puntos.
    Por otro lado, desde FIREFOX el sitio se ve centrado, pero en INTERNET EXPLORER se ve sobre la izquierda... y no flotando en el medio.
    ¿algún tip para centrarlo también?

  6. Li Chong

    5.0
    Antiguedad: Ene 2009
    Mensajes: 273

    offline

    Publicado hace 2 años
    #

    No sé, yo hace rato que me desentendí de IE, y eso fue hace cuatro años, en que era el 95% del mercado y hoy va en 55, en unos años más no habrá por qué hacerse problemas.

    Así que lo de IE, no se me ocurre nada.

    Aclaración: Li Chong no es seudónimo, es mi nombre real

    Li Chong
  7. Camelot

    5.0
    Antiguedad: Mar 2009
    Mensajes: 128

    offline

    Publicado hace 2 años
    #

    Pues en Firefox e IE8 yo los veo exactamente iguales, ¿de cuál IE estás hablando?
    Sobre la imagen del autor en los post, yo más bien estoy tratando de implementar algo como esto:

    He conseguido algo parecido pero todavía no me satisface...

  8. bananajota

    3.0
    Antiguedad: Nov 2009
    Mensajes: 40

    offline

    Publicado hace 2 años
    #

    Con el fondo blanco, no me convence mucho que todo esté sobre el mismo nivel., el título, el rosa de tu nombre, la fecha tan grande, tal vez si el titulo y el autor estuvieran algo diferenciados...A mi me gusta el modelo que me ayudó a terminar Li Chung pero si no algo así tal vez?

    Con respecto a cómo lo veo, me refiero a esto: Con IE8 se ve sobre la izquierda, o sea, mal.

    Con Firefox lo veo como deseo, es decir, centrado.

    ¿Alguna idea?

  9. bananajota

    3.0
    Antiguedad: Nov 2009
    Mensajes: 40

    offline

    Publicado hace 2 años
    #

    jaja Li Chong, xié xié entonces!
    Saludos

Responder

Debes Identificarte para publicar.

Foro WordPress » WordPress » Themes y Diseño