WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How do I create a border inside of a post? (3 posts)

  1. jennifer2010
    Member
    Posted 1 year ago #

    I made this image inside of photoshop:
    http://102.imagebam.com/download/i0-HSeexmbpSuGGz74wwWA/21790/217895548/test.jpg

    I'm wondering how I can use CSS to make this in a WordPress post.
    Specifically:
    How I can make the top and bottom border
    How I can align the text centered to the middle of the image

    Note, that this needs to be done inside of the add new post editor. I don't mean I want the actual post box to have this styling!

    Any help is greatly appreciated!
    Thank you

  2. Kyle Numann
    Member
    Posted 1 year ago #

    Well, you could add this html using the html editor (instead of the visual editor)

    <div class="video_callout">
        <div class="callout_text">
        <span class="label">Video Duration</span>
        <span class="duration">60 Minutes</span>
        </div>
        <div class="callout_image">
        <img src="http://www.mysite.com/image.jpg">
        </div>
    </div>

    And then style it with css such as this

    .video_callout {
    height:150px;
    width:300px;
    border-top:3px solid black;
    border-bottom:3px solid black;
    }
    .callout_text {
    width:50%;
    text-align:center;
    }
    .callout_image {
    width:50%;
    }
    .callout_text span.label {
    font-style:italic;
    color:black;
    }
    .callout_text span.duration {
    color:red;
    }
  3. jennifer2010
    Member
    Posted 1 year ago #

    Thank you for the response, Kyle!

    I implemented the above directions but unfortunately the outcome was not that good :(

    It looks like this now:
    http://img716.imageshack.us/img716/2823/newlb.jpg

    Here's my css code:

    .video_callout {
    height:150px;
    border-top:3px solid;
    border-bottom:3px solid;
    border-color: #b2b2b2;
    }
    .callout_text {
    width:50%;
    text-align:left;
    }
    .callout_image {
    width:100%;
    text-align:right;
    }
    .callout_text span.label {
    font-style:italic;
    font-size:40px;
    color:black;
    }
    .callout_text span.duration {
    color:red;
    font-size:40px
    }

    Any ideas!?

    Thanks so much!

    UPDATE: I fixed it (for the most part) using float:left on text and float:right on image - thank you!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.