SharePoint Online branding example: Images styling with CSS and HTML

SharePoint Online training courses

Hi, friends in this SharePoint online branding article we will see how little effort with CSS and HTML can change image look in terms of sizes, shapes, color, and border.

These images can enhance the site look and feel with a great impact.

In the below example, I have referred HTML file into the web part page inside a content editor web part inside SharePoint online site.

The same approach can be followed for SharePoint online branding, SharePoint branding, SharePoint online branding examples, SharePoint 2013 branding.

This thing will be helpful if you want to create a dashboard page for your SharePoint online site and there you want to show any attractive images.

Before you start implementing below code, make sure to create two separate files stylesheet.css and ImageEffects.html. Also, save images and css file to below respective folders, which has a reference in HTML file. You can definitely change the name as per your choice; just make sure to refer them correctly.

https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/CSS/stylesheet.csshttps://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/Images

The main component in css file are border-radius and box-shadow, property that defines the radius of an element’s corners, values and colors can vary as per your requirements.

SharePoint Online branding: stylesheet.css

Below is the .css file.

.image1
{
width:150px;
border-radius: 10%;
box-shadow: 10px 10px 5px firebrick;
margin-left: 40px !important;
}
.image2
{
width:150px;
border-radius: 70%;
box-shadow: 10px 10px 5px darkorange;
margin-left: 40px !important;
}
.image3
{
width:150px;
border-radius: 50%;
box-shadow: 10px 10px 5px darkmagenta;
margin-left: 40px !important;
}
.image4
{
width:150px;
border-radius: 2%;
box-shadow: 10px 10px 5px lawngreen;
margin-left: 40px !important;
}
.corners1 {
border-radius: 15px 50px 30px 5px;
background: mediumblue;
padding: 10px;
width: 300px;
height: 150px;
}
.corners2 {
border-radius: 15px 50px 30px;
background: red;
padding: 10px;
width: 300px;
height: 150px;
}
.corners3 {
border-radius: 15px 50px;
background: #ff006e;
padding: 10px;
width: 300px;
height: 150px;
}
.corners4 {
border-radius: 15px;
background: #73AD21;
padding: 10px;
width: 300px;
height: 150px;
}

SharePoint Online branding: HTML File- ImageEffects.html

Below is the HTML File.

<html>
<head>
<link rel="stylesheet" href="https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/CSS/stylesheet.css">
</head>
<table>
<tr>
<td><p><br><img src="https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/Images/image1.jpg" class="image1" alt="Avatar" ></p></td>
<td><p><br><img src="https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/Images/image2.jpg" class="image2" alt="Avatar" ></p></td>
<td><p><br><img src="https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/Images/image3.jpg" class="image3" alt="Avatar" ></p></td>
<td><p><br><img src="https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/Images/image4.jpg" class="image4" alt="Avatar" ></p></td>
</tr>
<tr>
<td><p><br><img src="https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/Images/image3.jpg" class="corners1" alt="Avatar" ></p></td>
<td><p><br><img src="https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/Images/image4.jpg" class="corners2" alt="Avatar" ></p></td>
</tr>
<tr>
<td><p><br><img src="https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/Images/image3.jpg" class="corners3" alt="Avatar" ></p></td>
<td><p><br><img src="https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/Images/image4.jpg" class="corners4" alt="Avatar" ></p></td>
</tr>
</table>
</html>

Below is the final output after integrating the Html file to the webpart page in SharePoint.

You can create a web part page and on that web part page, you can add a content editor web part. And then you can give reference to the HTML file inside the content editor web part.

sharepoint online branding
sharepoint online branding
sharepoint online branding examples
sharepoint online branding examples

Read some SharePoint customization tutorials:

I hope this SharePoint branding article is helpful for you! Please let me know if you need any clarifications or more CSS related articles.

>