Modern Taskbar for Windows 11
The Modern Taskbar for Windows 11, a unique customization crafted using the versatile Windows 11 Taskbar Styler mod in the Windhawk tool. This innovative design reimagines the traditional taskbar with rounded edges and a distinctive space between the widget area and the system tray. The sleek aesthetic, combined with its modern layout, brings a balanced and polished appearance to your desktop.
I’ve provided a detailed guide on how to use these styles in Windhawk, along with instructions on customizing them to suit your preferences. Whether you’re a fan of minimalistic designs or looking for a unique way to personalize your desktop, the Modern Taskbar offers the perfect blend of functionality and style.
Steps to Install Windhawk and the Mod:
- Download and install Windhawk.
- Open Windhawk and go to “Explore” in the upper right menu.
- Search for “Windows 11 Taskbar Styler” and click “Details.”
- Click “Install” and accept any pop-ups.
- After installing the mod, open its “Advanced” tab and Paste the given code into the Mod settings.
Windows 11 Modern Taskbar
{"controlStyles[0].target": "Grid#RootGrid > Taskbar.TaskbarBackground > Grid","controlStyles[0].styles[0]": "Margin=270,0,270,2","controlStyles[0].styles[1]": "Background:=<AcrylicBrush TintColor=\"{ThemeResource SystemChromeAltHighColor}\" TintOpacity=\"0.8\" FallbackColor=\"{ThemeResource SystemChromeLowColor}\" />","controlStyles[0].styles[2]": "BorderBrush:=<SolidColorBrush Color=\"{ThemeResource SurfaceStrokeColorDefault}\" />","controlStyles[0].styles[3]": "CornerRadius=5","controlStyles[0].styles[4]": "BorderThickness=1","controlStyles[1].target": "Grid#SystemTrayFrameGrid","controlStyles[1].styles[0]": "Margin=0,0,5,2","controlStyles[1].styles[1]": "CornerRadius=5","controlStyles[1].styles[2]": "Background:=<AcrylicBrush TintColor=\"{ThemeResource SystemChromeAltHighColor}\" TintOpacity=\"0.8\" FallbackColor=\"{ThemeResource SystemChromeLowColor}\" />","controlStyles[1].styles[3]": "BorderBrush:=<SolidColorBrush Color=\"{ThemeResource SurfaceStrokeColorDefault}\" />","controlStyles[1].styles[4]": "BorderThickness=1","controlStyles[1].styles[5]": "Padding=10,0,0,0","controlStyles[1].styles[6]": "Width=260","controlStyles[2].target": "Taskbar.AugmentedEntryPointButton#AugmentedEntryPointButton > Taskbar.TaskListButtonPanel#ExperienceToggleButtonRootPanel > Border#BackgroundElement","controlStyles[2].styles[0]": "Background:=<AcrylicBrush TintColor=\"{ThemeResource SystemChromeAltHighColor}\" TintOpacity=\"0.8\" FallbackColor=\"{ThemeResource SystemChromeLowColor}\" />","controlStyles[2].styles[1]": "Margin=-4","controlStyles[2].styles[2]": "BorderBrush:=<SolidColorBrush Color=\"{ThemeResource SurfaceStrokeColorDefault}\" />","controlStyles[2].styles[3]": "BorderThickness=1","controlStyles[2].styles[4]": "CornerRadius=5","controlStyles[3].target": "Rectangle#BackgroundFill","controlStyles[3].styles[0]": "Fill=Transparent","controlStyles[4].target": "Rectangle#BackgroundStroke","controlStyles[4].styles[0]": "Fill=Transparent","controlStyles[5].target": "Taskbar.AugmentedEntryPointButton#AugmentedEntryPointButton > Taskbar.TaskListButtonPanel#ExperienceToggleButtonRootPanel","controlStyles[5].styles[0]": "Margin=3,0,0,2","controlStyles[5].styles[1]": "Width=260","controlStyles[6].target": "Windows.UI.Xaml.Controls.Grid#AugmentedEntryPointContentGrid","controlStyles[6].styles[0]": "Margin=10,0,0,0","controlStyles[6].styles[1]": "HorizontalAlignment=Left"}
Modern Left Taskbar
{"controlStyles[0].target": "Grid#RootGrid > Taskbar.TaskbarBackground > Grid","controlStyles[0].styles[0]": "Margin=5,0,540,2","controlStyles[0].styles[1]": "Background:=<AcrylicBrush TintColor=\"{ThemeResource SystemChromeAltHighColor}\" TintOpacity=\"0.8\" FallbackColor=\"{ThemeResource SystemChromeLowColor}\" />","controlStyles[0].styles[2]": "BorderBrush:=<SolidColorBrush Color=\"{ThemeResource SurfaceStrokeColorDefault}\" />","controlStyles[0].styles[3]": "CornerRadius=5","controlStyles[0].styles[4]": "BorderThickness=1","controlStyles[1].target": "Grid#SystemTrayFrameGrid","controlStyles[1].styles[0]": "Margin=0,0,5,2","controlStyles[1].styles[1]": "CornerRadius=5","controlStyles[1].styles[2]": "Background:=<AcrylicBrush TintColor=\"{ThemeResource SystemChromeAltHighColor}\" TintOpacity=\"0.8\" FallbackColor=\"{ThemeResource SystemChromeLowColor}\" />","controlStyles[1].styles[3]": "BorderBrush:=<SolidColorBrush Color=\"{ThemeResource SurfaceStrokeColorDefault}\" />","controlStyles[1].styles[4]": "BorderThickness=1","controlStyles[1].styles[5]": "Padding=10,0,0,0","controlStyles[1].styles[6]": "Width=260","controlStyles[2].target": "Taskbar.AugmentedEntryPointButton#AugmentedEntryPointButton > Taskbar.TaskListButtonPanel#ExperienceToggleButtonRootPanel > Border#BackgroundElement","controlStyles[2].styles[0]": "Background:=<AcrylicBrush TintColor=\"{ThemeResource SystemChromeAltHighColor}\" TintOpacity=\"0.8\" FallbackColor=\"{ThemeResource SystemChromeLowColor}\" />","controlStyles[2].styles[1]": "Margin=-4","controlStyles[2].styles[2]": "BorderBrush:=<SolidColorBrush Color=\"{ThemeResource SurfaceStrokeColorDefault}\" />","controlStyles[2].styles[3]": "BorderThickness=1","controlStyles[2].styles[4]": "CornerRadius=5","controlStyles[3].target": "Rectangle#BackgroundFill","controlStyles[3].styles[0]": "Fill=Transparent","controlStyles[4].target": "Rectangle#BackgroundStroke","controlStyles[4].styles[0]": "Fill=Transparent","controlStyles[5].target": "Taskbar.AugmentedEntryPointButton#AugmentedEntryPointButton > Taskbar.TaskListButtonPanel#ExperienceToggleButtonRootPanel","controlStyles[5].styles[0]": "Margin=0,0,-4,2","controlStyles[5].styles[1]": "Width=260","controlStyles[6].target": "Windows.UI.Xaml.Controls.Grid#AugmentedEntryPointContentGrid","controlStyles[6].styles[0]": "Margin=10,0,0,0","controlStyles[6].styles[1]": "HorizontalAlignment=Left"}
To use the Modern Left Taskbar, you need to set the taskbar alignment to the left.
- Go to Settings.
- Navigate to Personalisation > Taskbar > Taskbar Behaviours.
- Under Taskbar Alignment, select Left.
Modern Taskbar Without Widgets
{"controlStyles[0].target": "Grid#RootGrid > Taskbar.TaskbarBackground > Grid","controlStyles[0].styles[0]": "Margin=5,0,270,2","controlStyles[0].styles[1]": "Background:=<AcrylicBrush TintColor=\"{ThemeResource SystemChromeAltHighColor}\" TintOpacity=\"0.8\" FallbackColor=\"{ThemeResource SystemChromeLowColor}\" />","controlStyles[0].styles[2]": "BorderBrush:=<SolidColorBrush Color=\"{ThemeResource SurfaceStrokeColorDefault}\" />","controlStyles[0].styles[3]": "CornerRadius=5","controlStyles[0].styles[4]": "BorderThickness=1","controlStyles[1].target": "Grid#SystemTrayFrameGrid","controlStyles[1].styles[0]": "Margin=0,0,5,2","controlStyles[1].styles[1]": "CornerRadius=5","controlStyles[1].styles[2]": "Background:=<AcrylicBrush TintColor=\"{ThemeResource SystemChromeAltHighColor}\" TintOpacity=\"0.8\" FallbackColor=\"{ThemeResource SystemChromeLowColor}\" />","controlStyles[1].styles[3]": "BorderBrush:=<SolidColorBrush Color=\"{ThemeResource SurfaceStrokeColorDefault}\" />","controlStyles[1].styles[4]": "BorderThickness=1","controlStyles[1].styles[5]": "Padding=10,0,0,0","controlStyles[1].styles[6]": "Width=260","controlStyles[2].target": "Taskbar.AugmentedEntryPointButton#AugmentedEntryPointButton > Taskbar.TaskListButtonPanel#ExperienceToggleButtonRootPanel > Border#BackgroundElement","controlStyles[2].styles[0]": "Background:=<AcrylicBrush TintColor=\"{ThemeResource SystemChromeAltHighColor}\" TintOpacity=\"0.8\" FallbackColor=\"{ThemeResource SystemChromeLowColor}\" />","controlStyles[2].styles[1]": "Margin=-4","controlStyles[2].styles[2]": "BorderBrush:=<SolidColorBrush Color=\"{ThemeResource SurfaceStrokeColorDefault}\" />","controlStyles[2].styles[3]": "BorderThickness=1","controlStyles[2].styles[4]": "CornerRadius=5","controlStyles[3].target": "Rectangle#BackgroundFill","controlStyles[3].styles[0]": "Fill=Transparent","controlStyles[4].target": "Rectangle#BackgroundStroke","controlStyles[4].styles[0]": "Fill=Transparent","controlStyles[5].target": "Taskbar.AugmentedEntryPointButton#AugmentedEntryPointButton > Taskbar.TaskListButtonPanel#ExperienceToggleButtonRootPanel","controlStyles[5].styles[0]": "Visibility=Collapsed"}
Modern Center Taskbar
{"controlStyles[0].target": "Grid#RootGrid > Taskbar.TaskbarBackground > Grid","controlStyles[0].styles[0]": "Margin=540,0,540,2","controlStyles[0].styles[1]": "Background:=<AcrylicBrush TintColor=\"{ThemeResource SystemChromeAltHighColor}\" TintOpacity=\"0.8\" FallbackColor=\"{ThemeResource SystemChromeLowColor}\" />","controlStyles[0].styles[2]": "BorderBrush:=<SolidColorBrush Color=\"{ThemeResource SurfaceStrokeColorDefault}\" />","controlStyles[0].styles[3]": "CornerRadius=5","controlStyles[0].styles[4]": "BorderThickness=1","controlStyles[1].target": "Grid#SystemTrayFrameGrid","controlStyles[1].styles[0]": "Margin=0,0,275,2","controlStyles[1].styles[1]": "CornerRadius=5","controlStyles[1].styles[2]": "Background:=<AcrylicBrush TintColor=\"{ThemeResource SystemChromeAltHighColor}\" TintOpacity=\"0.8\" FallbackColor=\"{ThemeResource SystemChromeLowColor}\" />","controlStyles[1].styles[3]": "BorderBrush:=<SolidColorBrush Color=\"{ThemeResource SurfaceStrokeColorDefault}\" />","controlStyles[1].styles[4]": "BorderThickness=1","controlStyles[1].styles[5]": "Padding=10,0,0,0","controlStyles[1].styles[6]": "Width=260","controlStyles[2].target": "Taskbar.AugmentedEntryPointButton#AugmentedEntryPointButton > Taskbar.TaskListButtonPanel#ExperienceToggleButtonRootPanel > Border#BackgroundElement","controlStyles[2].styles[0]": "Background:=<AcrylicBrush TintColor=\"{ThemeResource SystemChromeAltHighColor}\" TintOpacity=\"0.8\" FallbackColor=\"{ThemeResource SystemChromeLowColor}\" />","controlStyles[2].styles[1]": "Margin=-4","controlStyles[2].styles[2]": "BorderBrush:=<SolidColorBrush Color=\"{ThemeResource SurfaceStrokeColorDefault}\" />","controlStyles[2].styles[3]": "BorderThickness=1","controlStyles[2].styles[4]": "CornerRadius=5","controlStyles[3].target": "Rectangle#BackgroundFill","controlStyles[3].styles[0]": "Fill=Transparent","controlStyles[4].target": "Rectangle#BackgroundStroke","controlStyles[4].styles[0]": "Fill=Transparent","controlStyles[5].target": "Taskbar.AugmentedEntryPointButton#AugmentedEntryPointButton > Taskbar.TaskListButtonPanel#ExperienceToggleButtonRootPanel","controlStyles[5].styles[0]": "Margin=273,0,0,2","controlStyles[5].styles[1]": "Width=260","controlStyles[6].target": "Windows.UI.Xaml.Controls.Grid#AugmentedEntryPointContentGrid","controlStyles[6].styles[0]": "Margin=10,0,0,0","controlStyles[6].styles[1]": "HorizontalAlignment=Left"}
Modern Round Taskbar
{"controlStyles[0].target": "Grid#RootGrid > Taskbar.TaskbarBackground > Grid","controlStyles[0].styles[0]": "Margin=540,0,540,2","controlStyles[0].styles[1]": "Background:=<AcrylicBrush TintColor=\"{ThemeResource SystemChromeAltHighColor}\" TintOpacity=\"0.8\" FallbackColor=\"{ThemeResource SystemChromeLowColor}\" />","controlStyles[0].styles[2]": "BorderBrush:=<SolidColorBrush Color=\"{ThemeResource SurfaceStrokeColorDefault}\" />","controlStyles[0].styles[3]": "CornerRadius=5","controlStyles[0].styles[4]": "BorderThickness=1","controlStyles[1].target": "Grid#SystemTrayFrameGrid","controlStyles[1].styles[0]": "Margin=0,0,275,2","controlStyles[1].styles[1]": "CornerRadius=5,25,25,5","controlStyles[1].styles[2]": "Background:=<AcrylicBrush TintColor=\"{ThemeResource SystemChromeAltHighColor}\" TintOpacity=\"0.8\" FallbackColor=\"{ThemeResource SystemChromeLowColor}\" />","controlStyles[1].styles[3]": "BorderBrush:=<SolidColorBrush Color=\"{ThemeResource SurfaceStrokeColorDefault}\" />","controlStyles[1].styles[4]": "BorderThickness=1","controlStyles[1].styles[5]": "Padding=10,0,0,0","controlStyles[1].styles[6]": "Width=260","controlStyles[2].target": "Taskbar.AugmentedEntryPointButton#AugmentedEntryPointButton > Taskbar.TaskListButtonPanel#ExperienceToggleButtonRootPanel > Border#BackgroundElement","controlStyles[2].styles[0]": "Background:=<AcrylicBrush TintColor=\"{ThemeResource SystemChromeAltHighColor}\" TintOpacity=\"0.8\" FallbackColor=\"{ThemeResource SystemChromeLowColor}\" />","controlStyles[2].styles[1]": "Margin=-4","controlStyles[2].styles[2]": "BorderBrush:=<SolidColorBrush Color=\"{ThemeResource SurfaceStrokeColorDefault}\" />","controlStyles[2].styles[3]": "BorderThickness=1","controlStyles[2].styles[4]": "CornerRadius=25,5,5,25","controlStyles[3].target": "Rectangle#BackgroundFill","controlStyles[3].styles[0]": "Fill=Transparent","controlStyles[4].target": "Rectangle#BackgroundStroke","controlStyles[4].styles[0]": "Fill=Transparent","controlStyles[5].target": "Taskbar.AugmentedEntryPointButton#AugmentedEntryPointButton > Taskbar.TaskListButtonPanel#ExperienceToggleButtonRootPanel","controlStyles[5].styles[0]": "Margin=273,0,0,2","controlStyles[5].styles[1]": "Width=260","controlStyles[6].target": "Windows.UI.Xaml.Controls.Grid#AugmentedEntryPointContentGrid","controlStyles[6].styles[0]": "Margin=10,0,0,0","controlStyles[6].styles[1]": "HorizontalAlignment=Left"}
Center Round Taskbar
{"controlStyles[0].target": "Grid#RootGrid > Taskbar.TaskbarBackground > Grid","controlStyles[0].styles[0]": "Margin=270,0,270,2","controlStyles[0].styles[1]": "Background:=<AcrylicBrush TintColor=\"{ThemeResource SystemChromeAltHighColor}\" TintOpacity=\"0.8\" FallbackColor=\"{ThemeResource SystemChromeLowColor}\" />","controlStyles[0].styles[2]": "BorderBrush:=<SolidColorBrush Color=\"{ThemeResource SurfaceStrokeColorDefault}\" />","controlStyles[0].styles[3]": "CornerRadius=25","controlStyles[0].styles[4]": "BorderThickness=1","controlStyles[1].target": "Grid#SystemTrayFrameGrid","controlStyles[1].styles[0]": "Margin=0,0,275,2","controlStyles[1].styles[1]": "Padding=10,0,0,0","controlStyles[1].styles[2]": "Width=260","controlStyles[2].target": "Rectangle#BackgroundFill","controlStyles[2].styles[0]": "Fill=Transparent","controlStyles[3].target": "Rectangle#BackgroundStroke","controlStyles[3].styles[0]": "Fill=Transparent","controlStyles[4].target": "Taskbar.AugmentedEntryPointButton#AugmentedEntryPointButton > Taskbar.TaskListButtonPanel#ExperienceToggleButtonRootPanel","controlStyles[4].styles[0]": "Margin=273,0,0,2","controlStyles[5].target": "Windows.UI.Xaml.Controls.Grid#AugmentedEntryPointContentGrid","controlStyles[5].styles[0]": "Margin=10,0,0,0","controlStyles[5].styles[1]": "HorizontalAlignment=Left"}
Find "controlStyles[0].styles[3]": "CornerRadius=25"
and change the CornerRadius value to any number of your choice to customize the appearance as per your preference.
Taskbar Width:
To adjust the width of the Modern Center Taskbar and Modern Round Taskbar, follow these instructions:
- To reduce the taskbar width, locate the following lines in the code and adjust the red values. Make sure to increase all red values by the same amount
"controlStyles[0].styles[0]": "Margin=540,0,540,2",
"controlStyles[1].styles[0]": "Margin=0,0,275,2",
"controlStyles[5].styles[0]": "Margin=273,0,0,2",
- Example: If you want to reduce the width by 150 pixels, add 150 to each red value:
Change540 to 690
,275 to 425
, and273 to 423
."controlStyles[0].styles[0]": "Margin=690,0,690,2",
"controlStyles[1].styles[0]": "Margin=0,0,425,2",
"controlStyles[5].styles[0]": "Margin=423,0,0,2",
By following this method, you can easily adjust the taskbar width to suit your preference.
Taskbar Corner Radius Customization
To adjust the corner radius of the taskbar:
- Locate the
CornerRadius
in the code. - The value determines the radius for each corner:
- Example:
CornerRadius=5
sets all four corners to a radius of 5. - Example:
CornerRadius=21,5,5,21
allows you to customize each corner individually:- Top-left corner: 21
- Top-right corner: 5
- Bottom-left corner: 5
- Bottom-right corner: 21
Adjust the Value
To apply the same radius to all corners, use a single value (e.g., CornerRadius=10
).
To set different radii for each corner, use four values separated by commas in the order: top-left, top-right, bottom-left, bottom-right (e.g., CornerRadius=15,10,10,15
).
This allows for flexible customization of the taskbar’s appearance.
Conclusion
The Modern Taskbar for Windows 11 is a perfect blend of style and practicality, designed to elevate your desktop experience. With its sleek rounded edges, distinct spacing, and customizable features, it offers a fresh and modern take on the traditional taskbar. Whether you’re a fan of minimalism or looking to add a unique touch to your Windows 11 setup, this customization has you covered. Explore the guide on my website to learn how to install and tailor it to your liking, and transform your desktop into a polished and visually captivating workspace!
Are you new to Windows customization?
Follow the steps given on this post page and I always recommend Creating a Restore Point before starting the customization. If you have any other doubts comment below.