1

I am trying to add a coloured text box and icon to my SharePoint classic web page. Exactly like the image below (but a different colour text box)

Thank you :)

enter image description here

  • You can use Content editor web part with Bootstrap and CSS to show such textboxes. – Ganesh Sanap Dec 10 '18 at 12:27
  • Be careful with applying Bootstrap. Bootstrap will redefine inbuilt SharePoint styles, for example box-sizing:border-box; instead of SharePoint box-sizing:content-box; – Raf Dec 11 '18 at 4:17
1

The solution is:

  1. Upload icon in SharePoint library or copy link to existing SharePoint standard icon
  2. Build html markup with styles
  3. Add script editor or content editor web part into your SharePoint classic web page
  4. Put your html code into web part
1

Sample demo, update the image and CSS accordingly.

enter image description here

enter image description here

Insert the custom HTML code.

<style>
        .inline-block {
   display: inline-block;
}
    </style>
    <div style="background-color:#e2d3f1">
        <div>
            <img class="inline-block" width="25" height="25" src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-warning-icon.png">
            <h3 class="inline-block">Note</h3>
        </div>
        <div>
            I am trying to add a coloured text box and icon to my SharePoint classic web page. Exactly like the image below (but a different colour text box)
        </div>
    </div>

enter image description here

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.