• simplexs

    (@simplexs)


    Can anyone help…Please, I’m new to WP… Thanks

    Link to site for your review: helpingu2.com

    I’m using the Detour 1.0 template with WordPress and it will not do a text wrap around an image nor will it left/right align the image. I have tried to do it both with and without a caption on the image also without success.

    I inserted all the WP Caption code in the style.css as follows:

    /************************************************
    * Caption *
    ************************************************/

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

    .alignleft {
    float: left;
    }

    .alignright {
    float: right;
    }
    /*
    .wp-caption {
    border: 1px solid #ddd;
    text-align: center;
    background-color: #f3f3f3;
    padding-top: 4px;
    margin: 10px;
    /* optional rounded corners for browsers that support it */
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }

    .wp-caption img {
    margin: 0;
    padding: 0;
    border: 0 none;
    }

    .wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    padding: 0 4px 5px;
    margin: 0;
    }

Viewing 5 replies - 1 through 5 (of 5 total)
  • Michael

    (@alchymyth)

    the images are actually contained in a div class .mceTemp (see html code from your link):

    <div class="mceTemp">
    <dl id="attachment_33" class="wp-caption alignleft" style="width: 187px;">
    <dt><img style="border: 0pt none;" title="Picture-or-Video-022" src="https://defeatchiari.com/wp-content/uploads/2009/07/Picture-or-Video-022.jpg" alt="Ella Grace" width="177" height="250" /></dt>
    <dd>Ella Grace</dd>
    </dl>
    </div>

    therefore all the caption css has no influence.
    you could style .mceTemp by adding the following to the end of style.php:

    .mceTemp { float:left; min-width:150px; margin:10px 15px 10px 0px; clear:both; }

    or if you want a clear left edge of the text:

    .mceTemp { float:left; min-width:215px; margin:0px 10px 10px 0px; clear:both; }

    Thread Starter simplexs

    (@simplexs)

    Thank you for the suggestion but it didn’t work. It has to be something with this detour template. Are you particularly familiar with this Detour template?

    I have no idea where this .mcetemp came from. It wasn’t there earlier and I never saw before and believe me I have studied the code. Must have come into play after I tried using the default theme to see if the text wrap worked with that one which it did.

    Prior to that the code on the page it read this:

    <h1>Ella’s Story</h1>
    <h2>Our Story of Ella</h2>

    <div class=”wp-caption alignright” style=”width: 187px”><img style=”border: 0pt none;” title=”Picture-or-Video-022″ src=”https://defeatchiari.com/wp-content/uploads/2009/07/Picture-or-Video-022.jpg&#8221; alt=”Ella Grace” width=”177″ height=”250″ /><p class=”wp-caption-text”>Ella Grace</p></div>
    <p>Five years ago our family was blessed with the most adorable baby girl which we named Ella Grace. She was born with no health concerns and was beautiful and perfect in every way.</p>

    Totally don’t understand what is happening or why this template refuses to wrap text or align images. It’s like it’s got a mind of it’s own.

    I’ll try any other suggestions as well… I like the template and would like to continue using it but not if it’s possessed!

    Thanks again.

    Thread Starter simplexs

    (@simplexs)

    Ok, I figured out where the mcetemp came from… I was calling the image from another website. I have now corrected that and the present code is this but it still does not align:

    <h1>Ella’s Story</h1>
    <h2>Our Story of Ella</h2>
    <div id=”attachment_145″ class=”wp-caption alignleft” style=”width: 187px”><img class=”size-full wp-image-145″ title=”Picture-or-Video-022″ src=”https://helpingu2.com/wp/wp-content/uploads/2009/11/Picture-or-Video-022.jpg&#8221; alt=”Ella Grace” width=”177″ height=”250″ /><p class=”wp-caption-text”>Ella Grace</p></div>
    <p>Five years ago our family was blessed with the most adorable baby girl which we named Ella Grace. She was born with no health concerns and was beautiful and perfect in every way.</p>

    Michael

    (@alchymyth)

    there is one major typo in style.css

    closing curly bracket was wrong way round:

    span.search {
    background: #FEC110;
    color: black;
    font: bold 16px "Lucinda Sans", "Times New Roman", Times, serif;
    border: 2px solid #D010B1;
    padding: 0 3px;
    }

    that stopped all styles after this line to get applied.
    just repairing this one got the align to work.

    a few minor ones:
    double word font names (Century Gothic) should be enclosed in quotation marks (“Century Gothic”):

    #content h1 {
        color: #D010B1;
        font-size: 24px;
        line-height: 28px
        font-family: "Century Gothic", Verdana, Arial, Sans-Serif;
        font-weight: 900;
        padding: 0px 0px 10px 0px;
        margin: 0px 0px 10px 0px;
        }
    
    #content h1 a  {
        color: #D010B1;
        font-size: 24px;
        line-height: 28px
        font-family: "Century Gothic", Verdana, Arial, Sans-Serif;
        font-weight: 900;
        padding: 0px 0px 10px 0px;
        margin: 0px 0px 10px 0px
        text-decoration: none;
        }
    
    #content h1 a:hover {
        color: #FF7F00;
        text-decoration: none;
        }
    
    #content h3 {
        color: #FF7F00;
        font-size: 16px;
        font-family: "Century Gothic", Verdana, Arial, Sans-Serif;
        font-weight: 900;
        padding: 0px 0px 10px 0px;
        margin: 0px 0px 0px 0px;
        }

    hope this was all – enjoy your wordpress tweaking ??

    Thread Starter simplexs

    (@simplexs)

    Alchymyth … THANK YOU, THANK YOU, THANK YOU

    WordPress is some pretty neat stuff and I think I will continue to explore all it has to offer with other website builds.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Problem with text wrap on Detour Template’ is closed to new replies.