How to Customize SharePoint Using HTML, CSS, JavaScript Code

Let's talk about why custom code is such a game-changer in SharePoint, how different coding languages come together to create amazing solutions, and how ShortPoint Code Editor simplifies the entire process!
‍

• Understanding HTML, CSS, and JavaScript Code Snippets
  
  Think of HTML, CSS, and JavaScript as the building blocks of modern websites. HTML is like the skeleton that gives structure to your content, CSS is the stylist that makes everything look beautiful, and JavaScript is the magician that brings interactivity and life to your pages. When you combine these in SharePoint, you can create incredible custom solutions that go way beyond what's available out-of-the-box. But here's the thing! Adding these codes to a Modern SharePoint page isn't always straightforward without the right tools.
  ‍
• What Challenges Arise When Using Custom Code in Modern SharePoint?
  ‍
  Modern SharePoint offers built-in web parts, seamless device compatibility, Microsoft 365 integration, and robust security for basic intranet needs. However, many organizations need more customization options. While the traditional SharePoint Framework requires extensive coding skills, ShortPoint offers a simpler alternative for those seeking to avoid complex technical development.
  ‍
• How Does ShortPoint Code Editor Simplify Custom Code Integration?
  ‍
  ShortPoint's content editor is remarkably user-friendly, no coding expertise is required. Whether you're a beginner or an expert, you can easily add custom HTML, CSS, and JavaScript to your SharePoint pages. Working seamlessly alongside SPFx, it makes SharePoint customization accessible to everyone. Need eye-catching designs? No problem. Want complex functionality? You've got it. Looking for smooth code integration? It's all there. This versatility makes it a powerful tool for transforming your SharePoint pages into your exact vision.

Let's put the ShortPoint Code Editor Web Part to the test with a practical example of customizing SharePoint pages.SharePoint's built-in Weather web part handles basic weather updates.

However, you might want something more visually striking. Maybe you're looking for beautiful animations, vibrant colors, or extra features that make your page pop! That's where external weather widgets and a few tweaks using custom HTML and CSS come in handy.

Here is an example:
Let's add this weather widget to your SharePoint page using the ShortPoint Code Editor. I'll guide you through the two-part process:

Part 1: Installing ShortPoint Code Editor

First, we need to upload the custom SharePoint web part to your SharePoint tenant. This is a one-time setup. Once you enable the app, it becomes accessible across all your site collections.
‍

Note:
You will need Global Admin permissions for this step. If you don't have these permissions, forward these instructions to your designated Global Admin.

Step 1: Download the ShortPoint Code Editor SPFx package

Visit the dedicated Code Editor page on our official website and click Download. After downloading, unzip the file.

DOWNLOAD

Step 2: Upload the app to your App Catalog

Now that you have the SPFx package, navigate to your SharePoint App Catalog by navigating to [1] SharePoint Admin > More Features and [2] opening the App Catalog.

Then, click Upload and open the ShortPoint Code Editor SPFx package you downloaded.

Step 3: Enable the app

After successfully uploading the app, the Enable app options will appear.
‍

• If you want all your SharePoint designers to have access to the web part automatically, you can choose Enable this app and add it to all sites.
• If you prefer to let individual site owners control app installation, select Only enable this app.
• Finally, click the Enable app button.
  ‍

You will get a confirmation that your app has been enabled.

Steps for individual site owners if Only enable this app is selected

If you chose Only enable this app, site owners will have to take a few extra steps to install the Code Editor Web Part app. It's super simple! Here's what they'll need to do to add it to their sites:

1. Go to Site Contents
2. Select to add New App
3. And, add ShortPoint Code Editor Web Part

That’s it! Your ShortPoint Code Editor Web Part is now installed and ready to use.

Part 2: Adding a weather widget using the custom SharePoint Web Part

Now comes the exciting part! Whether you're adding a weather widget or any other custom code to your SharePoint page, the process is super straightforward. Let me show you how it's done.
‍

Step 1: Edit the page

Open the SharePoint page where you want to add your weather widget and click the Edit button.
‍
‍

Step 2: Insert Code Editor web part

In the column where you want to place the widget, press the Add new web part plus icon. Search for ShortPoint Code and select it.

After adding the ShortPoint Code web part, you'll see placeholder content. Click the Edit properties button to start customizing your code.

‍

Step 3: Copy the weather widget code

It’s time to get the code snippet of the weather widget you want to add to your page. Head over to your preferred weather widget provider or write one yourself. Here is the complete custom code we used for our example:

<div id="ww_0d339707284ef" class="weather-card" v='1.3' loc=
'auto' a='{"t":"horizontal","lang":"en","sl_lpl":1,"ids"
:[],"font":"Arial","sl_ics":"one_a","sl_sot":"celsius"
,"cl_bkg":"image","cl_font":"#FFFFFF","cl_cloud":"#FFFFFF"
,"cl_persp":"#81D4FA","cl_sun":"#FFC107","cl_moon":"#FFC107","cl_thund":"#FF5722"}'>
    More forecasts: <a href="https://oneweather.org/orlando
    /30_days/" id="ww_0d339707284ef_u" target="_blank"
    >Orlando weather 30 day</a>
</div>
<script async src="https://app3.weatherwidget.org/js/?id
=ww_0d339707284ef"></script>
|||||
.weather-card {
    border-radius: 20px !important;
    width: 100%;
    max-width: 500px /*{Field0 - Max Width (Default 500px)}*/;
    zoom: 1.5 /*{Field1 - Overall Size (Default 1.5)}*/;
    text-align: center;
}
.weather-card {
    user-select: none !important;
}
.weather-card,
.weather-card a,
.weather-card a:visited,
.weather-card a:hover {
    color: white;
    cursor: default;
}
.ww-box {
    margin-left: auto !important;
    margin-right: auto !important;
}
.ww_source {
    display: none !important;
}
.ww_arr_right,
.ww_arr_left {
    opacity: 0 !important;
    cursor: default !important;
}
.ww_line {
    margin 0 28px !important;
}
div.ControlZone--control:has(div[id^="ShortPointCode-"]) {
    background-color: unset !important;
}
&>div {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
}
|||||

Copy it to your clipboard.


‍

Step 4: Import the code

Now that you've copied the code to your clipboard, you can go back to the Code Editor and press the Import button. The HTML and CSS field will automatically populate with the custom code.

Step 5: Customize the code

The ShortPoint Code Editor is highly customizable and user-friendly. You can:
‍

• Edit code directly using the brackets button
• Adjust settings through simple input fields
• Control who sees your content by restricting visibility to specific Microsoft 365 groups, and
• Keep your code isolated to just the web part using Sandbox mode

Best of all, you'll see your changes in real-time with an instant preview before publishing.

‍

Step 6: Republish the page

Great! Now that everything looks perfect, hit that Republish button, and your new weather widget will be live for everyone to see.

See how simple that was? Whether you're adding a weather widget or any other custom HTML, CSS, or JavaScript code to your SharePoint page, the ShortPoint Code Editor Web Part makes it a breeze. Now you can customize your pages exactly the way you want them!