Padding around images

CM1
#1

I am trying to add photos to an existing web page but when I do so using the widget, there is no padding around the photo. It is overlapped by the text on the page. Is there a way to add padding while still using the widget editor, or is HTML coding required? Here’s an example…all of these things are listed with bullet points, but as you can see at the bottom of the image, the bullets are covered up by the photo.

http://www.lenexa.com/raintorecreatio…

#2

Hi Katy,

It looks like you’ve selected a style of “Box 1” for this image, which your site’s designer has linked up to a CSS rule set that adds 10px of padding around the image. This works fine for plain text, but does not appear to be sufficient padding for list items.

On your template level, through Style > Override Theme CSS, your site’s designer has added a CSS rule set that appears as:

.perc-box-1 {border:none !important; padding:10px;}

If they were to simply add in a new rule set for the “Box 2” class with extra padding, such as this:

.perc-box-2 {border:none !important; padding:25px;}

Then you could edit this image and in the Appearance tab and change the class from “Box 1” to “Box 2”. This should give your image sufficient padding.

#3

Thanks so much for your quick reply. Is there a way to do all this using the widget – i.e., not requiring the desinger to set upa CSS rule for the padding? I asked her to create the CSS rule to get by for now, but I am interested in if the widget will provide me with a solution that doesn’t require our designer to have to create a style box. Thank you!

#4

Hi Katy,

I think setting up a reusable CSS class that you can select from the image class dropdown menu would be the best solution long-term. Either that, or globally styling all images within the Rich Text editor to automatically have sufficient padding for all use-cases.

That said, there are a coupe of manual solutions you can implement while you wait on your designer to setup this new CSS rule:

  1. Toggle over to Source View when editing the widget (by hitting the “<>” button in the toolbar), and manually add an inline CSS padding property to your image’s tag:

style="padding:25px;"

  1. Or, create a table in the Rich Text editor with the Cols and Rows properties set to 1, and the Cellpadding property set to 25. Then, drag your image into this box.
#5