12 {{ upvoteCount | shortNum }}
12 {{ upvoteCount | shortNum }}

How to frame images in WP

by screwdriver
10 replies
  • WEB DESIGN
    • |
Hi,

I'm creating my sales page in Wordpress with the Spire plugin at the moment and I realised that my images look a bit plain. So I have a rel newbie question - how do I make frame or customize the images with a frame to make them look nicer?

Or do I have to edit the images in photoshop or a similiar program?

Thanks.
#frame #images
  • Profile picture of the author KirkMcD
    What kind of frame? If you want more than just some kind of line, you'll need to breakout photoshop and either modify the picture or learn css and how to apply the changes so that they work with the plugin.
    {{ DiscussionBoard.errors[4196796].message }}
  • Profile picture of the author Patrick
    Add this to the img class of your stylesheet.

    border: 1px solid #E4E4E4;padding: 7px;

    You will get a nice frame around all your images.
    Signature
    Freelance WordPress Developer | Free WordPress Themes | Free WordPress Plugins | Free WordPress Support
    {{ DiscussionBoard.errors[4210503].message }}
    • Profile picture of the author MattStrange
      Originally Posted by schwarzes View Post

      Add this to the img class of your stylesheet.

      border: 1px solid #E4E4E4;padding: 7px;

      You will get a nice frame around all your images.
      Beat me to it

      Heres a code example, for the frame rotation you may have issues with some browsers, i would use an image if you only have one or two photo frames.

      HTML Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rotated Div Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

<style type="text/css">
.frame
{
	padding: 10px;
	-moz-box-shadow: 0 0 5px #888;
	-webkit-box-shadow: 0 0 5px#888;
	box-shadow: 0 0 5px #888;
	-webkit-transform: rotate(-15deg);   
	-moz-transform: rotate(-15deg);
	-ms-transform: rotate(-15deg);
	transform: rotate(-15deg);
}
</style>
</head>
<body>
<img class="frame" src="image.jpg" /></div>
</body>
</html>

      Matt
      Signature
      {{ DiscussionBoard.errors[4210618].message }}
      • Profile picture of the author Patrick
        Originally Posted by MattStrange View Post

        Beat me to it

        Heres a code example, for the frame rotation you may have issues with some browsers, i would use an image if you only have one or two photo frames.

        HTML Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rotated Div Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

<style type="text/css">
.frame
{
    padding: 10px;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    -webkit-transform: rotate(-15deg);   
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    transform: rotate(-15deg);
}
</style>
</head>
<body>
<img class="frame" src="image.jpg" /></div>
</body>
</html>
        Matt

        haha thats just one of example I used...a very basic one..
        Signature
        Freelance WordPress Developer | Free WordPress Themes | Free WordPress Plugins | Free WordPress Support
        {{ DiscussionBoard.errors[4210857].message }}
  • Profile picture of the author xtrapunch
    Hey ScrewDriver... I guess you are talking about the pics of the guys which looks like passport-size photos with white margins. If you want this for just one image or a couple of images, add them using Photoshop or Gimp. That's how those guys have done. The image has no border but it's part of the image itself.
    Signature
    >> Web Design, Wordpress & SEO - XtraPunch.com <<
    Web Design & SEO Agency | Serving World Wide from New Delhi, India

    {{ DiscussionBoard.errors[4210737].message }}
  • Profile picture of the author DivineWeb
    for frames around every image is possible via plugin or via advanced css technique. but best is to use css.
    {{ DiscussionBoard.errors[4210878].message }}
  • Profile picture of the author screwdriver
    Forgot about this thread. Thanks for the codes - I'll look into it.

    But the easiest way I found was to add the effect or frame in word than just copy the whole image into photoshop and then save it as jpg and upload it. Voilá.
    {{ DiscussionBoard.errors[4255045].message }}

Trending Topics