WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Adding borders to only pasted photos? (5 posts)

  1. AAGDotCom
    Member
    Posted 1 year ago #

    Hello, I run a site called Nicki Daily, and I put updates on WP, photos on Coppermine. When I upload new photos, I put the thumbnails from CPG into a WP post. One link I use for example: http://nickidaily.com/photos/albums/userpics/10013/thumb_ABHMO~0.jpg. I paste that into the post as saving and uploading images would be a lot to do. I want to add a border to the images, using the following code.

    <style>
    body {
    	margin: 0px;
    	padding: 0px;
    	background-color: transparent;
    }
    
    img {
    background-color: #ffffff;
    background-image: url();
    background-repeat:repeat;
    background-position:center center;
    border: 1px solid #cccccc;
    padding: 4px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    }
    
    img:hover {
    background-color: #ffffff;
    background-image: url();
    background-repeat:repeat;
    background-position:center center;
    border: 1px solid #aaaaaa;
    padding: 4px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    }
    
    </style>

    The problem is, I only want those thumbnails to have borders. I don't want anything else; so is it possible to modify the code to do that?

    Thanks in advance!

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    What exactly do you add to your posts in terms of markup?

  3. AAGDotCom
    Member
    Posted 1 year ago #

    Here's an example of the HTML in one of my posts that contains the thumbnails:

    I've added three new Angela Boatwright outtakes to the gallery. Two of these are from her 2008 photoshoot for VIBE Magazine and are tagged. They're also in color, unlike some other photos released.
    
    The other outtake I've added is from her 2009 shoot for Honey Magazine. A snippet of it was previously uploaded, but this is the full/UHQ picture. Check them out by clicking on the thumbnails below!
    <p style="text-align: center;"><a href="http://nickidaily.com/photos/thumbnails.php?album=78">Photoshoots > 2008 > Angela Boatwright (VIBE Magazine)</a></p>
    <p style="text-align: center;"><a href="http://nickidaily.com/photos/thumbnails.php?album=78"><img alt="Z1b5jLE.jpg" src="http://nickidaily.com/photos/albums/userpics/10013/thumb_Z1b5jLE.jpg" /><img alt="zOLUlQJ.jpg" src="http://nickidaily.com/photos/albums/userpics/10013/thumb_zOLUlQJ.jpg" /></a></p>
    <p style="text-align: center;"><a href="http://nickidaily.com/photos/thumbnails.php?album=35">Photoshoots > 2009 > Angela Boatwright (Honey Magazine)</a></p>
    <p style="text-align: center;"><a href="http://nickidaily.com/photos/thumbnails.php?album=35"><img alt="ABHMO~0.jpg" src="http://nickidaily.com/photos/albums/userpics/10013/thumb_ABHMO~0.jpg" /></a></p>

    [Please post markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum's parser.]

  4. esmi
    Forum Moderator
    Posted 1 year ago #

    You would be far better using:

    <a class="cm" href="http://nickidaily.com/photos/thumbnails.php?album=78">Photoshoots > 2008 > Angela Boatwright (VIBE Magazine)</a>

    and then using something like:

    img.cm {
    display:block;
    amrgin:1.5em 0;
    background-color:#fff;
    border: 1px solid #cccccc;
    padding: 4px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    }
    
    img.cm:hover {
    border-color:#aaaaaa;
    }
  5. AAGDotCom
    Member
    Posted 1 year ago #

    ^ Thank you!

Topic Closed

This topic has been closed to new replies.

About this Topic