How can I isolate left and right float images in the blog, so that each can reference different CSS?

CM1
1

Is there a unique class that gets assigned to just the left float images in the blog? Or maybe vice versa? I could not identify one in Firebug.

2

Hi Debbie,

The best way to isolate an image for CSS styling purposes would be to assign one of the default CSS classes to the image through the Appearance tab when editing the image in the Rich Text editor. For instance, for all images you have set to float left, you could also select the “Box 1” class from the dropdown (or any class that you aren’t already using), and then use a CSS rule for img.perc-box-1 to style it.

3

Hi Nathaniel,

I thought I could add the class manually, but because the blog will be maintained by non-technical editors, was hoping that a class could be assigned automatically which I’ve seen in other CMSs (eg., “.rightalign”, “.leftalign”, etc.)

4

Debbie,

I understand. You could use jQuery’s addClass function to add a new class to these images based on a filter looking for left floated images. The code would look like this:

   return $(this).css('float') == 'left' <br /> }).addClass("leftAlign"); <br /> </script>```   
 
Alternately, you're always encouraged to post an Idea on here requesting this type of functionality built in to CM1.
5

Hi Debbie,

If your end-users are going to be inserting the images within the blog-post widget, they can simply use the alignment feature to either float the images left or right. CM1 adds the float styles inline on those images, rather than applying a class.

6

I agreed with Debbie. It would be easier to use class than inline. Here’s an example: .perc-alignleft , etc… b/c I want to add margin (if set to right, then set margin: 0 0 15px 15px ) to keep the texts away from the img, also give me more controls, too. Thank you.

7

Debbie & Aaron,

You can create a “Custom Class” for your rich text editor to make it easier for your content contributors to add classes like “.perc-alignleft” to your images (or text).

Please take a look at our help doc on Creating Custom Styles in Rich-Text Widget.

8

@armani - I think this will help: http://www.gareth53.co.uk/blog/2009/1… (see line: 1373 - 1375)

I believe most people will click “align” from the menu (similar to Microsoft Office since it’s familiar) as opposed to going to “custom class” b/c they may not realized it.

@nathaniel - I will try your solution and see if this will work better. Thanks!