1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Any way to add css class to image?

Any way to add css class to image?

3 posts, 0 answered
  1. Nancy
    Nancy avatar
    18 posts
    Registered:
    25 Jan 2008
    29 Feb 2008
    Link to this post
    Is there any way to add a css class to the items that show up in the image properties dialog in the RAD Editor?  The hspace and vspace attributes have been deprecated and no longer show up in Firefox, Opera and Safari.  I want to make a class called 'padded' in my stylesheet and allow the site content editors to select this class from a dropdown when adding images.

    These users will not know HTML so I can't ask them to edit the HTML to add this.

    Thanks for your help. -Nancy
  2. Nancy
    Nancy avatar
    18 posts
    Registered:
    25 Jan 2008
    29 Feb 2008
    Link to this post
    It turns out I was able to fix this on my own with a change to my CSS.  I had a declaration in my css

    *
    {
        margin: 0;
        padding: 0;
    }

    to remove default margins and paddings from all elements and then I add them back one at a time so I control that everything looks exactly the same in all browsers.  That declaration was overriding the hspace and vspace attributes in the images.  When I removed the declaration, the hspace and vspace show up. This solved the immediate problem, but since hspace and vspace are deprecated, this is something that should be addressed in the future.
    Thanks, Nancy
  3. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    04 Mar 2008
    Link to this post
    Hello Nancy,

    You can set class to an image inserted via Rad Editor. Right-click in the image and then choose "Set image properties" from the context menu that appears. After that choose a class name from the CSS Class drop down. 

    The CSS class dropdown displays all classes defined in the page or in an external CSS file. You can read more about that in Rad Editor online help.

    RadEditor for ASP.NET
    CSS Styles: http://www.telerik.com/help/aspnet/editor/CSSStyles.html
    External CSS Files: http://www.telerik.com/help/aspnet/editor/ExternalCSSFiles.html

    RadEditor 'Prometheus' for ASP.NET
    CSS Styles: http://www.telerik.com/help/radcontrols/prometheus/CSSStyles.html
    External CSS Files: http://www.telerik.com/help/radcontrols/prometheus/ExternalCSSFiles.html

    In order to apply the css to images in your site, you should define css for these images in your site theme as well (~/App_Themes/YourTheme/YourCSS.css). For example:

    img.padded {
        margin: 0;
        padding: 0;
        border: 0;
    }



    If you do not want to set CSS class to images, you can set global styles for these images. In order for images to appear as expected in RadEditor I suggest that you write CSS styles in an external file (you can read more about how to add an external css file in the online help). For example, you can write this rule in the external file:
     
    img {
        margin: 0;
        padding: 0;
    }

    Then add css for images in the site theme as well. That should be in ~/App_Themes/YourTheme/YourCSS.css. If the main content that is edited with Rad Editor is placed in a div with class content (<div class="content">) you can write this rule:

    div.content img {
        margin: 0;
        padding: 0;
    }


    Or, you can write more specific rules that best suit your case.

    All the best,
    Katia
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Register for webinar
3 posts, 0 answered