WordPress.org

Ready to get started?Download WordPress

Forums

Custom border around a post (hard question) (16 posts)

  1. Marcomail
    Member
    Posted 8 years ago #

    I don't have text inside the post, only an image...i would like insert around and over this image my custom border...there is a possibility to do this ?

  2. moshu
    Member
    Posted 8 years ago #

    Can't you add a class to the image code and define the class in the stylesheet?

  3. Marcomail
    Member
    Posted 8 years ago #

    not this, my border are design from me with Photoshop, i must use a layer with a z-index bigger than the image...i have tried some solution but it's don't work property

  4. Marcomail
    Member
    Posted 8 years ago #

    any idea ?

  5. Chris_K
    Member
    Posted 8 years ago #

    Only idea I'd suggest would be to stop trying to "stack" images and use CSS, as Moshu suggested.

  6. Marcomail
    Member
    Posted 8 years ago #

    Can you explain me exactly ? I must put a layer over the image with trasparence in the middle to permit to see the image under...with a class on the image i can user border-syle etc etc, but it's not exactly i want

  7. Chris_K
    Member
    Posted 8 years ago #

    You've summed it up pretty well. :-)

    So what is there about using class with the border attributes isn't what you're after? It seems to me, without knowing much about your hopes, goals and aspirations, that the CSS method would be a lot easier.

  8. Marcomail
    Member
    Posted 8 years ago #

    I attach an image for explain well my problem:

    <img src="http://img128.imageshack.us/img128/7707/post6jc.th.gif" border="0" alt="Free Image Hosting at http://www.ImageShack.us" />

    the image is post in wordpress...the border must be a <div>

  9. Chris_K
    Member
    Posted 8 years ago #

    What is this border used for? Or, asked differently, what's the purpose of adding border to some images but not others?

  10. Marcomail
    Member
    Posted 8 years ago #

    it's only for style grapich, there isn't a purpose...it's more simple for me cut a rectangular image and adding in automatic the border with the css...i can do it with photoshop for every image but it's too complicate.

    I have used a <div> with relative position up the post `<div>', but there is a space high like the layer between the post

  11. Marcomail
    Member
    Posted 8 years ago #

    help me

  12. dss
    Member
    Posted 8 years ago #

    Adding a background color, a small margin and a border should frame any image placed into your blog.

    Unless you have some funky css forcing something else to happen.

    For a universal img tag solution add this code to your style.css:

    img {
    padding: 5px;
    background-color: #FFF;
    border: 1px solid #333;
    }

    see what happens.

    If you desperately need to keep whatever else your design requires for other images you can solve the trouble in one of two ways:

    class the css for your entry section only:

    .entry (or contents, or whatever your index declares) img {
    padding: 5px;
    background-color: #FFF;
    border: 1px solid #333;
    }

    OR make up a new id and wrap the images you want to have borders in that id when you want to:

    #wrap img {
    padding: 5px;
    background-color: #FFF;
    border: 1px solid #333;
    }

    The markup for this would be:
    <img id="wrap" src="whatever.jpg" alt="" />

    If none of that helps, then I have no idea what your trouble is...

  13. ladydelaluna
    Member
    Posted 8 years ago #

    i think you guys are missing this - it appears to me that the question is how to use a photoshop border, which is an "image" AS a border for another image... not how to put a plain colored border using css

    i could be wrong, but the only way i'm aware of doing that is within photoshop... i've never used an image AS a border to another image before.

  14. dss
    Member
    Posted 8 years ago #

    Well, you certainly can use an image as a border using css

    img {
    padding: 5px;
    border: url("image.jpg");
    }

    more here:
    http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image

    But it would seem like an easier solution to decide on the size of an image for your posts, create a background with the desired border, and then use something like this:

    #content img {
    padding: 5px;
    background: url("backgroundimage.jpg") no-repeat;
    }

    'course you would want to class this for the content area (depending on your theme) and then play with the padding to make sure it all fits in there.
    But requiring a specific size for images is a drag.

  15. ladydelaluna
    Member
    Posted 8 years ago #

    thanks for that dss - hopefully this guy isn't trying to use a border that has to be a certain size (100px by 200px) and shape (oval, as in the screenshot) due to the "custom"-ness of it. it appears to me that it's not even like putting a 5px squiggle several times around the image - but rather one of the borders that comes with photoshop itself, and isn't the same all the way around. that's why i said i didn't think it could be done with CSS

    it really looks to me like the easiest way to do what he's trying to do (if i've interpreted the whole thing properly) would be to just add the photoshop border IN photoshop... then put the image up.

  16. Marcomail
    Member
    Posted 8 years ago #

    for dss: border-image working only with CSS3, with your second advise the background is under the image, not over

    for ladydelaluna: you have explained well my problem

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.