WordPress.org

1. bricksmith
   Member
   Posted 1 year ago #

   I'm having problems with styling of images.

   The css for my theme specifies that images should be styled float: right.

   However, I thought that I would be able to override that simply by specifying a different position (ex: left) when inserting an image into a post using the image editor. So far, it's not working. Any ideas?

2. sewmyheadon
   Member
   Posted 1 year ago #

   Can you provide us a link?

   Keep in mind that when you specify position using the media gallery while placing an image, it just adds a CSS class to the image. You'll need to edit your CSS to tell the browser how to position imagery with these classes.

   Make sense?

3. bricksmith
   Member
   Posted 1 year ago #

   I think I get what you are saying, sewmyheadon. I'll check further into that. Here's a link to the blog:

   http://28nineteen.com/

4. sewmyheadon
   Member
   Posted 1 year ago #

   Right now, you have a generic definition for all images in your posts:

   div.post img, div.page img { float: right; padding: 5px; }

   This is causing all images to float right. If you'd like to be able to use the position selector through the Media Gallery, it will add classes to your image and you can add the following CSS in your style.css file to override these positions:

   div.post img.alignleft {float:left;}
   div.post img.alignright {float:right;}

5. xinxin
   Member
   Posted 1 year ago #

   Thanks, sewmyheadon - this helped me in one of my sites.

6. bricksmith
   Member
   Posted 1 year ago #

   Thanks so much!

   I left the generic definition in place so my existing posts would not be messed up and added the .alignleft and .alignright. That seemed to do the trick.

   Thanks!

7. optimisticfriend
   Member
   Posted 1 year ago #

   Thanks! It worked for me as well after I slightly modified the code to match the theme css, which is using "contentleft" instead of "post."
   #contentleft p img.alignleft {float:left;}
   #contentleft p img.alignright {float:right;}

Topic Closed

This topic has been closed to new replies.