Image styles

8 posts by 2 authors in: Forums > CMS Builder
Last Post: 17 hours ago (RSS)

Hi, I have images loaded up into the content text area so they can sit in the text content, they have a style set in the css but if an image is set to align left or align right I want to add a margin depending on what side it is aligned to so it doesn't sit to close to the text. Is there a way I can add a style to the image upload window or set the css so that it recognises if the image is floating left or right then apply the correct style?

By jasmar222 - 17 hours ago

Are adding a class to the image to get it float left/right?

By MercerDesign - 17 hours ago

The style will be set inline by telling the image to align left or right in the content area so adding a class to the upload window would work but better still for it to work automatically if the style is set. I don't think my client will always remember to select the class from the upload window though.

By jasmar222 - 17 hours ago

When you align left/right the image, does it add an attribute to the img tag in the HTML?

for example...

<img align="left" src="image.jpg">

By MercerDesign - 17 hours ago

No, if you align the image in the wysiwyg editor it adds style="float:left"

By jasmar222 - 17 hours ago

In that case, add this to your css...

img[style*="float:left"] {
  margin-right: 1em;
}

img[style*="float:right"] {
  margin-left: 1em;
}

By MercerDesign - 17 hours ago

Brilliant, thank you. I've been searching and trying to do that css all day.

By jasmar222 - 17 hours ago

This is called ”attribute selectors” in case you want to look into it more