I'd like to edit a page's html source to remove boxes around images with links.
In CSS you can simply assign text-decoration:none to the element.
I'd like that flexibilty within the SharePoint HTML Source Editor
Add a comment
|
3 Answers
The short answer: When working with rich text editors that allow you to modify the HTML source, yes.
The longer answer: It can be tricky. SharePoint has a lot of CSS and JavaScript involved to make it look the way it does. Sometimes you'll find that you'll apply a css style and it simply does not seem to work as expected. For this try the !important modifier to the style. E.g. - <div style='border:1px solid black!important; color: green!important;'></div>
In other cases you'll find that you get a message saying that SharePoint has modified the source that you explicitly entered and end up removing some of your changes. Sometimes this is due to malformed HTML/CSS code but sometimes it can just be SharePoint trying to ruin your day. The way I have worked around this is by embedding the source another way. Options you have include a Page Viewer Web Part, an iframe, or a Content Editor Web Part with linked content where the linked content could be an HTML or CSS file if you would like.
Needless to say what you are looking to do looks pretty trivial to me and you shouldn't have much of an issue trying to update the CSS inside rich text editor elements that allow for HTML modification, but should you run into issues hopefully what I've outlined above helps you out.
answered Jul 11, 2013 at 18:45
-
Thanks Todders. Can I add CSS directly inside the HTML Editor? How would that look?– user3871Commented Jul 11, 2013 at 18:47
-
Just like you would with any other HTML editor. You can either add the CSS between style tags and specify IDs and classes for your HTML elements, or add the CSS inline within the style attribute of the element you want to style. Commented Jul 11, 2013 at 18:50
-
That doesn't work. I added
<style type="text/css"> a img {border:none;}</style>to remove borders from images but it didn't work– user3871Commented Jul 11, 2013 at 19:27 -
Did you try
<style type="text/css"> a img {border:none!important;}</style>like I recommended? maybe give your images a specific class and apply it to that class instead? Commented Jul 11, 2013 at 19:39 -
The easiest way to accomplish this is to edit the HTML source, find the offending img elements, and add a style attribute with "border:0px;"
<a href="..."><img style="border:0px;" src="..." /></a>
The inline style will trump the CSS that adds the borders.
Check the element where the borders are applied, you have to apply your style at that selector. Please add screenshots taking from the dev tool bars for the borders.
