Try ShortPoint nowAt ShortPoint, we listen to your design needs. In ShortPoint SPFx version 7.0.2.xx, we stepped up to make your experience with ShortPoint Theme Builder smoother and easier, so nothing is stopping you from making your Modern Pages look visually appealing. Let us look into the user experience improvements in this article.
This article is for you if you are using ShortPoint SPFx on Modern Pages in Office 365 (SharePoint Online) environment. The following improvements are available in both Team Sites and Communication Sites.
*The improvements are not yet available for classic pages.
Breaking Change:
Color Palette and Advanced Colors are now accessible from the Branding option in the main Theme Builder menu.
Please note that after the upgrade you need to activate the Theme Builder, re-select your colors from Branding > Color Palette and publish your changes in order to make your site compatible with the new Theme Builder Colors.
Learn more about Branding in the respective section of this article.
TABLE OF CONTENTS
- What is new in ShortPoint Theme Builder?
- New and Optimized Theme Builder Menu
- Responsive Preview Functionality For Desktop and Mobile
- Movable, Resizable, and Collapsible Theme Builder Window
- Automated Custom CSS Validity Feedback
What is new in ShortPoint Theme Builder?
New and Optimized Theme Builder Menu
Header
One of the most awaited improvements is now possible with the new version of ShortPoint Modern Theme Builder. All the options you need to customize your SharePoint modern page headers are now in one place.
You can now fully manage the header part of modern SharePoint pages: insert and edit the page logo, change header background, modify command bar colors, adjust dividers before and after the header, and alter header paddings and margins.
Logo
Customize your site’s browser tab by editing its title and adding your own favicon.
You can also modify where the header logo brings your user by adding a URL in the Logo link field. Use ShortPoint Theme Builder to make changes to the logo by resizing its width and height, and altering its paddings and margins.
Background
Create an eye-catching header by adding an image and using advanced settings to determine how it will be displayed.
Command Bar
With ShortPoint, you can make your command bar stand out by changing the color of its background, text, icons, and hover over action.
Before & After
Add dividers and increase thickness to clearly highlight your page header.
Paddings & Margin
Control your header’s height by changing padding and margin values.
Menus
Design a better navigation experience by changing menu layouts and colors. You have the option to adjust hub, primary, and sub-menus in Modern Theme Builder.
It is worth highlighting that you now have the freedom to change the hover color of menu items according to your preference.
Branding
Color Palette and Advanced Colors are now accessible from the Branding option in the main Theme Builder menu. Color settings are now simplified and can be intuitively understood. It makes creating new color selections easy and readily accessible.
In Modern Theme Builder, the Color Theme Tool function is now under Branding plus we have automated the creation of other colors based on the Primary option in Advanced Colors. Make your own SharePoint Theme.
In Classic Theme Builder, you can set your Body Text Color and Body Background Color options here.
Please note that after the upgrade to ShortPoint SPFx 7.0.2.xx in order to make your site compatible with the new Theme Builder Colors you need to:
- Activate the Theme Builder
- Re-select your colors in Branding > Color Palette
- Publish your changes
Background
Background is now moved to the main Modern Theme Builder menu.
Responsive Preview Functionality For Desktop and Mobile
In the new Theme Builder, you can instantly see how your selections and inputs in Theme Builder look as you make them with responsive preview functionality. By default, you will be previewing the home page, but you are free to select any other modern page to reflect your changes. And if you wish to see what your SharePoint site looks like in a mobile phone, tablet, and rotated view on both, you can simply click on the three icons on the bottom of the panel.
Comparing a desktop view against a mobile view is easier with the latter opening as a separate window when selected. You can see how your SharePoint page elements behave and changes between a desktop, and a tablet, a smartphone, or a rotated view.
Learn more about the mobile previews in our article on Modern Theme Builder Mobile and Tablet Preview.
Movable, Resizable, and Collapsible Theme Builder Window
ShortPoint Theme Builder now gets a floating panel which you can drag and move to any part of your screen. It can also be resized vertically according to your preference and clicking outside of the panel collapses Theme Builder into an icon. Click the icon and the panel will reappear for your next modern site adjustments.
A more flexible Theme Builder panel allows you to see your SharePoint page preview in its intended state, without interference, as you make your customizations.
Automated Custom CSS Validity Feedback
Spend less time checking to see if your custom CSS works or not. Receive immediate feedback about the validity of your code when adding it into Theme Builder Custom CSS. Get information on errors, and make corrections before you publish. You can check our CSS tips, tricks, and workarounds here: {we will include here a folder with all custom CSS codes as we prepare them}.
More product updates to add value to your desired output and designing experience in SharePoint are coming your way. Watch out for future iterations of ShortPoint Theme Builder.
Related articles:
