WordPress.com

1. lmkitties
   Member
   Jul 24, 2011, 1:35 PM

   The Mystique theme has an image post type that creates a shadow box around the image. I would like to copy that formatting to an image that I have on all of my blog's pages. Currently, the home page has an image post and then a regular post. The image post has the shadow box. Each page has the same image but without the shadow box. How can I make them consistent? Either make each page's image look like the the image post or make the image post look like the page images?

   http://electjimclark.wordpress.com

   The blog I need help with is electjimclark.wordpress.com.

2. thesacredpath
   Member
   Jul 24, 2011, 5:55 PM

   Here is the CSS for the image. You will have to figure out what the img stuff is under in the other theme and then add the declarations to it. Image insertion size (full-sized anyway) will likely have to be changed to provide room for the formatting treatment.

   .format-image .entry {
       border-radius: 8px 8px 8px 8px;
       box-shadow: 0 1px 5px #CCCCCC;
       display: block;
       margin: 10px auto;
       padding: 10px;
   }

3. lmkitties
   Member
   Jul 24, 2011, 6:04 PM

   I'm working within one theme only. I'm trying to get that formatting onto a picture on one of the Pages. When I add that formatting and Save, that formatting does not stay. This is what is on the HTML tab on my page for my picture:

   <img class="alignright size-full wp-image-123" title="Contribute Banner3" src="http://electjimclark.files.wordpress.com/2011/07/contribute-banner3.jpg" alt="" width="604" height="99" />

   Can you tell me where I put this formatting within the reference above?

4. thesacredpath
   Member
   Jul 24, 2011, 7:01 PM

   Ok, since you had posted to the CSS forum, I assumed you wanted to add the styling to the CSS. To do it on an image by image basis, you would do the following:

   <img class="alignright size-full wp-image-123" style="border-radius: 8px 8px 8px 8px; box-shadow: 0 1px 5px #CCCCCC; margin: 10px auto; padding: 10px; display:block;" title="Contribute Banner3" src="http://electjimclark.files.wordpress.com/2011/07/contribute-banner3.jpg" alt="" width="604" height="99" />

5. lmkitties
   Member
   Jul 24, 2011, 7:18 PM

   Thank you very much. I could go either way with this. I can add the box to the post on the Page or I can take the box off of the Image Post. If I were to edit the CSS to remove the box on the Image Post, would I just do this?

   .format-image .entry {
   ;

6. thesacredpath
   Member
   Jul 24, 2011, 7:34 PM

   No, you would have to edit all the declarations otherwise the original CSS would be used. You have to override the original CSS here at wordpress.com. You don't actually edit the original CSS.

   .format-image .entry {
       border-radius: 0;
       box-shadow: none;
       display: block;
       margin: 10px auto;
       padding: 0;
   }

   You could also set the margin to 0 also. You would have to see how things look and then try it at 0 and see if it looked better.

7. lmkitties
   Member
   Jul 24, 2011, 9:14 PM

   Worked perfectly. The first method produced inconsistent shadow boxes between the two. Now they are the same.

8. thesacredpath
   Member
   Jul 24, 2011, 9:28 PM

   You are welcome.

Topic Closed

This topic has been closed to new replies.