Forums (Obsolete)

Member

Jon White - 8/12/2013 5:02:59 AM

Adding classes to images/padding to images through CSS

Hi everyone,

I'm not sure if i'm missing something but i'd like to add some css styling to the images my users will add in the WYSIWYG editor.

Basically i want to add padding to the top,right and bottom of an image when floated left.

Same for a right float, i want to add padding to the top, left and bottom.

This is so it creates a gap/margin between paragraph text. I know currently you can choose a border, but i want to have a class of 'floatleft' (for example) added to the image when a user selects a left float, and another for right (or some such class)

Or is this something that you can do already and i have missed?, i know i can add a global 'img' style but i want it specific to the floats so i can specify not to have an all round padding. IYSWIM.

Thank you in advance

Kentico Support

kentico_janh - 8/12/2013 5:34:10 AM

RE:Adding classes to images/padding to images through CSS

Hello,

The problem is that there is an inline style when you configure your image to float left or right. However you can't then specify what padding to apply for your images, because you can't tell which image is floated right and which left. I would recommend you to create two new css classes (one which floats to left and has some padding and other which floats to right and has same padding as well) and instead of setting a floating to your image, you can switch to the Advanced tab and fill proper class in the Class property.

Best regards,
Jan Hermann

Member

Jon White - 8/12/2013 6:22:06 AM

RE:Adding classes to images/padding to images through CSS

Okay thank you, I just wandered if there's a way to change the addition of the inline style, and replace with a class. i.e. 'floatleft, 'floatright'. That would be most useful??

Your solution was what i first thought but i was hoping this would be more 'user friendly'. The above class solution would solve this problem.

I'm assuming it's not possible, however thank you for your help. I appreciate it.

Kentico Support

kentico_janh - 8/12/2013 7:49:14 AM

RE:Adding classes to images/padding to images through CSS

Hello,

I've found a solution for you, however it involves a customization of the \CMSModules\Content\Controls\Dialogs\Properties\HTMLMediaProperties.ascx file, where you move the Class property from the Advanced tab to the General tab and make the Align property to be hidden and change its label to Align instead, so the end of the General section would look like this:

<tr style="display:none">
                        <td style="white-space: nowrap;">
                            <cms:LocalizedLabel ID="lblAlign" runat="server" EnableViewState="false" DisplayColon="true"
                                ResourceString="dialogs.image.alignlabel" />
                        </td>
                        <td>
                            <asp:DropDownList ID="drpAlign" runat="server" Width="105" />
                        </td>
                    </tr>    
                    
                    <tr>
                        <td>
                            <cms:LocalizedLabel ID="lblImageAdvStyleClass" runat="server" EnableViewState="false"
                                ResourceString="dialogs.image.alignlabel" DisplayColon="true" />
                        </td>
                        <td>
                            <asp:DropDownList ID="txtImageAdvClass" runat="server" Width="105" />
                        </td>
                    </tr>

After this you need to fill this dropdown with your css class values in the OnInit method:

// Load align dropdown with values
            txtImageAdvClass.Items.Add(new ListItem("", ""));
            txtImageAdvClass.Items.Add(new ListItem("floatleft", "left"));
            txtImageAdvClass.Items.Add(new ListItem("floatright", "right"));

Best regards,
Jan Hermann