Framing an Image

This entry will explain how you can add a frame to an image for your blog entries. Please keep in mind that we have used the FC2 Template [white_style] as the base for our examples.

The Basics of Framing an Image

1. Find [ entry_body ] in the style sheet (CSS) of the template.

The parent element that surrounds the independent tag which opens the text is :

In the template settings page, find [ entry_body ] in the style sheet. In Windows press CTRL+F and Mac press command+F to open the quick search function.

*The template

Please hit the enter key to open up some space to enter the code.

2. Enter the Style Code

Enter the following style code into the area highlighted by the red box in the image above.

.entry_body img {
border : 2px solid #000; /
}

This will create a straight line black border that is 2px thick.

*With the code

**This will attach a border to all images within the entry text, please add classes and determine selectors as necessary.

Adding a Border - Application

With a bit of editing, you can add a border decoration to image to make it look like a Polaroid photo.

1. As explained above, find the place to insert your code. *entry_body

2. Enter the styling code as shown in the red box in the image below.

Style Code

p span img {
padding : 5px; /
background-color : #fff; /
border : 1px solid #000; /
}

Meaning of Code Parts

padding : 5px; /* Sets a blank border of 5px */
background-color : #fff; /*Sets blank border to white */
border : 1px solid #000; /*Sets photo from to black */

Entering the Code

3. Please access the entry editing page after applying your style code.

A tag similar to the one below will appear when you insert an image to your entry. (*The address may be different if you are linking your album page)

"Text That Appears if Image Does Not Display" border="0">

4. Surround the image tag with

---/span>

*The frame designated in the style sheet will only be applied to image tags enclosed with

---

.