Move or change widgets button on DockLike theme

[bancalero]

Hi!

Is there a way to move the widgets button to the left in the DockLike theme? Or make it smaller (just the icon with te temperature) like how it is with the vanilla taskbar aligned to the left?

I know it's recommended to disable widgets in this theme but I really like to view the weather at a glance.

Thx in advance!

[bbmaster123]

You might need to disable the feature flag with vivetool: ExtendedModeAEPForTaskbar: 48660958 This makes it an icon only next to start.

Otherwise you can modify the Widgets Button with these targets: Taskbar.AugmentedEntryPointButton#AugmentedEntryPointButton Grid# AugmentedEntryPointContentGrid

I recommend using UWPSpy to help track down what targets and styles to change

Give it a try and let me know if you have any trouble :)

[bancalero]

Hey! Thx for the reply!

Sorry, I'm a bit of a newbie at this, so do you happen to know with properties I have to change to move it to the left with those targets you mentioned?

I might try vivetool aswell

THX!

[bbmaster123]

that's ok! We all start somewhere :)

Have you read the styling guide? https://github.com/ramensoftware/windows-11-taskbar-styling-guide

anyway, have a look at the image in this theme: https://github.com/ramensoftware/windows-11-taskbar-styling-guide/tree/main/Themes/Squircle

the vivetool flag essentially toggles between the top image and bottom, with weather on the left being the disabled state. I'd recommend this first as its just 1 toggle, nice and simple.

However if you prefer to target the full width widgets button instead, you can try this:

Target:
 Taskbar.AugmentedEntryPointButton#AugmentedEntryPointButton
 Style:
 Transform3D:=<CompositeTransform3D TranslateX="-800" /> 

replace -800 with how many pixels to the left you want to move the button

[bancalero]

yeah, I read the styling guide, changed the docklike to a floating dock with the instructions :)

the vivetool didnt work, as my taskbar is center aligned, and when I turned it to the left, it appears kinda broken on the DockLike theme :(

well tried your suggestion, the button itself seems to be on the left but it doest create a "box" for it, so it just disapears and leaves a blank space where it was

[bbmaster123]

Great :)

You did restart explorer, or sign out/in after vivetool?

ah, was your widgets already on the left? I thought it was on the right If that's the case, remove the code from before, use this instead:

Target:
Grid#RootGrid
Style:
HorizontalAlignment=3

we can style it further once it shows up where you want it!

[bancalero]

You did restart explorer, or sign out/in after vivetool?

Yeah! Restarted the PC right after

ah, was your widgets already on the left?

Yup, it is like this without the theme:

and like this with the theme enabled:

My goal is to make the widgets stay on the far left like without the theme but with it's own "dock" like the clock and system tray, something like this:

Is that possible?

Thx!

[bbmaster123]

ohhh okay yea I was totally misunderstanding, this should be closer:

{
  "theme": "DockLike",
  "controlStyles[0].target": "Grid#RootGrid",
  "controlStyles[0].styles[0]": "Margin=-400,0,1,0",
  "controlStyles[0].styles[1]": "Background=Transparent",
  "controlStyles[0].styles[2]": "Padding=0",
  "controlStyles[1].target": " Taskbar.AugmentedEntryPointButton#AugmentedEntryPointButton",
  "controlStyles[1].styles[0]": "Margin=0,0,250,0",
  "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[3].target": "Taskbar.ExperienceToggleButton > Taskbar.TaskListButtonPanel",
  "controlStyles[3].styles[0]": "Background:=<AcrylicBrush TintColor=\"{ThemeResource SystemChromeAltHighColor}\" TintOpacity=\"0.8\" FallbackColor=\"{ThemeResource SystemChromeLowColor}\" />",
  "controlStyles[4].target": "Taskbar.TaskListButton#TaskListButton > Taskbar.TaskListLabeledButtonPanel#IconPanel",
  "controlStyles[4].styles[0]": "Background:=<AcrylicBrush TintColor=\"{ThemeResource SystemChromeAltHighColor}\" TintOpacity=\"0.8\" FallbackColor=\"{ThemeResource SystemChromeLowColor}\" />",
  "controlStyles[5].target": "Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel",
  "controlStyles[5].styles[0]": "CornerRadius=5,0,0,0",
  "controlStyles[5].styles[1]": "Background:=<AcrylicBrush TintColor=\"{ThemeResource SystemChromeAltHighColor}\" TintOpacity=\"0.82\" FallbackColor=\"{ThemeResource SystemChromeLowColor}\" />",
  "resourceVariables[0].variableKey": "",
  "resourceVariables[0].value": ""
}

go to advanced, and paste all of that under mod settings, and click save When you go back to settings, all of these styles will be populated in the boxes for you to go through You'll probably need to adjust the margins depending on your screen resolution

[bancalero]

That worked! Adjusted the margins and now it's almost perfect. I cant seem to find where to adjust the height of the widgets "dock" tho, and the search button now has a transparent background hahaha

Thank you very very much!!

[bbmaster123]

that would be the second target, Taskbar.AugmentedEntryPointButton#AugmentedEntryPointButton set Height=number

Search being transparent is because search icon, search icon and label, and search box are all different targets, so that needs to be set too, just like we set a background for weather, the dock, and tray area

add one more target in settings:

Target:
Taskbar.SearchBoxButton#SearchBoxButton > Taskbar.TaskListButtonPanel#ExperienceToggleButtonRootPanel
Style:
Background:=<AcrylicBrush TintColor="{ThemeResource SystemChromeAltHighColor}" TintOpacity="0.8" FallbackColor="{ThemeResource SystemChromeLowColor}" />

you're very welcome :)

[bancalero]

adjusted the weather box to my liking, but the search icon is still transparent unfortunately :/ but now I'm having another problem, when I open a new app, the weather box moves as new icons appear on the taskbar. Guess giving the widgets it's own box is more complicated than I antecipated hahaha

thx for all your help so far!

[bbmaster123]

that is a bit odd, have you tried restarting explorer? it looks like this for me:

yea it moves around because of how the "ItemsFrameRepeater" behaves when the taskbar is centered, in order to keep everything centered as you open and close apps.

I can keep playing around with it for you, but it's probably close to as good as we can get right now. Its not really in its own box which is why this is a little difficult. Its technically still grouped in with start, search, and the rest. I just kind of cheated a bit by making the whole taskbar background transparent, and then applying a background to the elements that needed one otherwise it would look like this if I apply a solid color background:

[bancalero]

that is a bit odd, have you tried restarting explorer?

yeah, even tried restarting the computer but it keeps being transparent :/

I can keep playing around with it for you, but it's probably close to as good as we can get right now.

theres no need :) you aready helped me a lot, I'll keep messing around with it and if I came to any solution ill post it here, if not, lets hope someone make a theme that matches my desires in the future :)

thanks again for your help, I learned a lot from it!