WordPress.org

1. jennifer2010
   Member
   Posted 6 months 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 6 months 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 6 months 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!

Reply

You must log in to post.