ramensoftware / windows-11-start-menu-styling-guide

A collection of commonly requested start menu styling customizations for Windows 11
129 stars 13 forks source link

Translucent is using white on darkmode #76

Open cyberbug-2077 opened 2 months ago

cyberbug-2077 commented 2 months ago

So, I can't see when the background is white Cant it setup like blurmica? Screenshot_519

bbmaster123 commented 2 months ago

yes, that is to be expected. You can either set Windows to light theme to get black text, or add a new style to set the text to whatever color you like

To force light theme:

Target: Grid
Style: RequestedTheme=1

Or, to set text color:

Target: TextBlock
Style: Foreground=Color

Cant it setup like blurmica?

what do you mean?

cyberbug-2077 commented 2 months ago

This is explorerblurmica on darktheme, work perfectly on white backgoround Screenshot_520

possible to make the base dark like that, instead of white?

bbmaster123 commented 2 months ago

I use explorerblurmica in light theme, I didn't understand what you meant but the pic helps I think you want a dark acrylic look rather than full translucent with black text.

try

Border#AcrylicBorder
Background:=<AcrylicBrush TintColor="Black" TintOpacity="0.25" />
cyberbug-2077 commented 2 months ago

Thank you, that's what I mean 🔥 Screenshot_523 How to do the same for notificaion? I've try the above code, but its not work

bbmaster123 commented 2 months ago

Glad I could help!

How to do the same for notificaion?

the notification center mod? it has a few targets you'll need to apply your style to, copy the code from TranslucentShell, paste it into notification center styler's advanced settings, and replace the existing background styles with yours, and then everything will match :)

cyberbug-2077 commented 2 months ago

Thank you, works great!

cyberbug-2077 commented 2 months ago

is there anything for action center? Screenshot_525

bbmaster123 commented 2 months ago

looks like you are on 24h2 for some reason Microsoft decided to rename the exe, adding Shellhost.exe to your inclusion list should get it working again. That said, I'm not sure if any of the targets have changed since 23h2, you might need to use UWPspy to help with that.

donzzy commented 2 months ago

I use explorerblurmica in light theme, I didn't understand what you meant but the pic helps I think you want a dark acrylic look rather than full translucent with black text.

try

Border#AcrylicBorder
Background:=<AcrylicBrush TintColor="Black" TintOpacity="0.25" />

where do I add this added code? sorry noob here.

bbmaster123 commented 2 months ago

in Windhawk, go to the Start Menu Styler mod, click the settings tab, scroll down and you'll see boxes for Targets and styles. First line goes in the target box, second in the styles box. Then click save and it will apply the styles.

If you get stuck at any point let me know :)

ishan-077 commented 2 months ago

I was wondering - How did you manage to make your explorer also follow the acrylic theme? I tried adding explorer.exe and it gave me no success.

While I'm at it, how can I also apply the same visibility tweak that you did to the menu to the search menu as well?

bbmaster123 commented 2 months ago

@ishan-077 another program called ExplorerBlurMica is used to make explorer acrylic

For search, you can add searchhost.exe to your inclusion list in the mod's advanced settings cheers

ishan-077 commented 2 months ago

Thanks for the explorer github page, however I must apologize because I don't think I was clear in my original message.

I have already put searchhost.exe in my mod inclusion list but I want to slightly tweak its opacity as well, because in my experience the settings from the start menu don't carry over to the search page, and I have no idea what targets I have to tweak for it.

Thanks in advance, cheers

Screenshot 2024-09-20 230311 Screenshot 2024-09-20 230349

bbmaster123 commented 2 months ago

looks like its working to me? search can't be styled nearly as much as the start menu as most of the actual content is in a webview

to find targets to use with search, use UWPSpy A lot of start menu targets share a name with the search menu targets so themes generally can apply to both, but there are indeed search specific targets For Example, Border will apply to both of them, but Cortana.UI.Views.TaskbarSearchPage will of course only apply to the search menu

ishan-077 commented 2 months ago

I was able to fix it, it was the Windows.UI.Xaml.Controls.Border > AppBorder element and it applied to the search menu immediately. Thanks for your reply.

dac4git commented 1 month ago

not a huge fan of acrylic, but is there a way to make the items (notification/cal flyout, start menu, search, etc) transparent/dark. i can do it manually, but cannot get it set in windhawk. problem is manually doesnt save after a reboot, thus i have to use the hotkey per item to apply it again...

image

Scrazeloppe commented 1 month ago

I was able to fix it, it was the Windows.UI.Xaml.Controls.Border > AppBorder element and it applied to the search menu immediately. Thanks for your reply.

@ishan-077 would you be able to explain exactly what you did to get it to work? Sorry I'm new to this

Scrazeloppe commented 1 month ago

Glad I could help!

How to do the same for notificaion?

the notification center mod? it has a few targets you'll need to apply your style to, copy the code from TranslucentShell, paste it into notification center styler's advanced settings, and replace the existing background styles with yours, and then everything will match :)

@bbmaster123 I went one by one replacing each line with your suggested change to the code
Border#AcrylicBorder Background:=<AcrylicBrush TintColor="Black" TintOpacity="0.25" />

but it didn't seem to work, do you have any ideas? Sorry I'm a noob at this

dac4git commented 1 month ago

Background:=

styler > settings > scroll down > Add New Item under Control Styles > Match Image > save settings

image

Scrazeloppe commented 1 month ago

Background:=

styler > settings > scroll down > Add New Item under Control Styles > Match Image > save settings

image

yea i did this for the start menu and it works for that, but it doesn't work for the notification mod, trying to figure that out

dac4git commented 1 month ago

because Border doesnt apply to that component. download uwspy and track down which component it is and apply the style to that component

dac4git commented 1 month ago

how can i reset this to default? accidentally deleted "background" from the right pane and when i add it back it only goes as solid color (i added opacity so that its not just pitch black). if i turn off windhawk, it stays like that. its like that permanently now...

image

image

m417z commented 1 month ago

@dac4git there's no easy way to reset it, just terminate the process from Task Manager, it will relaunch automatically and all the temporary changes will be gone.

dac4git commented 1 month ago

@dac4git there's no easy way to reset it, just terminate the process from Task Manager, it will relaunch automatically and all the temporary changes will be gone.

@m417z no, even when i close out of windhawk Completely it stays like that...

m417z commented 1 month ago

If you exit Windhawk, terminate the search process (SearchHost.exe), and the style stays like that, then it's not related to Windhawk, as it doesn't do permanent changes to the system.

dac4git commented 1 month ago

If you exit Windhawk, terminate the search process (SearchHost.exe), and the style stays like that, then it's not related to Windhawk, as it doesn't do permanent changes to the system.

@m417z perfect! just had to restart the searchhost.exe like you stated. sorry, i couldnt reboot to test as i have unsaved projects opened.. didnt think to restart the service. apologies.

while you're on here... how can i edit the highlighted target via "add item" (what would i put in the target box under control styles) image

the only way i was able to modify it at all was via uwspy directly, but would be much better if i could do it in the "settings > control styles > add item" target line

m417z commented 1 month ago

Try Border#AppBorder

dac4git commented 1 month ago

Try Border#AppBorder

Tried all these and none worked:

Border#AppBorder

Windows.UI.Xaml.Controls.Border > AppBorder

Windows.UI.Xaml.Controls.Border#AppBorder

Border > Windows.UI.Xaml.Controls.Border#AppBorder

AppBorder#Windows.UI.Xaml.Controls.Border

AppBorder > Windows.UI.Xaml.Controls.Border

m417z commented 1 month ago

It might be because both UWPSpy and the mod are loaded at the same time. It's not supported, and they both override each other's interception. For best results, try the following:

Border#AppBorder or Windows.UI.Xaml.Controls.Border#AppBorder should work.

dac4git commented 1 month ago

terminated uwspy disabled start menu styler ended task: searchhost.exe used start menu search to reload searchhost.exe turned on start menu styler tried both lines in the target box, neither worked

image

bbmaster123 commented 1 month ago

@dac4git good morning I notice your opacity is set to 0.8. I just want to point out that when used with an acrylicbrush, opacity controls clear transparency (as in not how transparent the acrylic effect is, but how transparent the layer containing the acrylic is displayed). I would recommend setting that to 1 always unless you are trying to acheive clear transparency instead of blurry transparent.

To control the acrylic effect itself, use TintColor, TintOpacity and TintLuminosityOpacity. For tintcolor, you can use a color name (black, transparent) or a hex color with transparency (#2244BBBB) As best I can tell, TintOpacity is how much of the specified color (black in this case) to add to the effect, while TintLuminosityOpacity controls how bright/dark the acrylic looks.

If that still isn't working for you, try a full reboot, and if still nothing, could you please send a screenshot of how it looks now, and your full style code?

dac4git commented 1 month ago

@dac4git good morning I notice your opacity is set to 0.8. I just want to point out that when used with an acrylicbrush, opacity controls clear transparency (as in not how transparent the acrylic effect is, but how transparent the layer containing the acrylic is displayed). I would recommend setting that to 1 always unless you are trying to acheive clear transparency instead of blurry transparent.

To control the acrylic effect itself, use TintColor, TintOpacity and TintLuminosityOpacity. For tintcolor, you can use a color name (black, transparent) or a hex color with transparency (#2244BBBB) As best I can tell, TintOpacity is how much of the specified color (black in this case) to add to the effect, while TintLuminosityOpacity controls how bright/dark the acrylic looks.

If that still isn't working for you, try a full reboot, and if still nothing, could you please send a screenshot of how it looks now, and your full style code?

yeah, with acrylic and a little opacity it creates a smoke-style transparency that is similar to aeroglass.. unless i can apply my glass reflection png to the background somehow...

thanks for all of the tips! i got it functioning for the search now. i do have startallback, so something somehow got glitched. just unistalled windhawk with revo and reinstalled it and now the Border#AppBorder works as it should. 2 other IDs i am having trouble locating are:

image the flyout background of pinned item folder/groups on the start menu

and the dropshadow behind the notificaiton flyout (for Notification Center Styler)

bbmaster123 commented 1 month ago

oh you want an image? should've said so haha! :)

I use an image too, set appborder to the background color youd like, then add: Border#AccentAppBorder

Visibility=Visible
Background:=<ImageBrush Stretch="uniformtofill" ImageSource="C:\Program Files\DWMBlur\data\AeroPeek.png" Opacity="0.42" />

it puts the image on a different layer above the acrylic so you can get the translucent recflection without removing the background entirely

got it functioning for the search now. i do have startallback, so something somehow got glitched. That makes sense, Startallback has been known to interfere at times. Its generally pretty good, but yea sometimes it causes strange behaviors.

the flyout background of pinned item folder/groups on the start menu Should be StartMenu:ExpandedFolderList > Grid > Border that one stumped me for a bit too. flyouts do show in uwpspy but only at first? once I dismiss the start menu and click it again, those flyouts dont come back up in the visual tree. I usually screenshot the list when that happens and try my best to find what I need.

I also use this sometimes if I'm really having trouble finding something

the dropshadow behind the notificaiton flyout

Grid#NotificationCenterGrid

that's the target, if you remove shadow in uwpspy, it will work, but not sure how to actually remove/set a shadow in windhawk if its even possible at the moment.

dac4git commented 1 month ago
Background:=<ImageBrush Stretch="uniformtofill" ImageSource="C:\Program Files\DWMBlur\data\AeroPeek.png" Opacity="0.42" />

Awesome! the glass reflection image i use for openglass wont show up though. even if i adjust that opacity value.. can you share the image you use for the glass effect and i'll try it with the exact code you provided, please?

also - what process did you spy on for the notification center? i cant get it to highlight that no matter which service i've tried to spy on. i just got the Grid#NotificationCenterGrid code from the translucent skin provided on github and modified it to be invisible (all except for the shadow...)

appreciate all the help too

bbmaster123 commented 1 month ago

uhm, good sir please replace the image from my code with whatever image you would like to use lmao if I recall, openglass, if installed to root would be Background:=<ImageBrush Stretch="uniformtofill" ImageSource="C:\openglass\data\glass.png" Opacity="0.42" /> Also im pretty sure its the exact same png between dwmblurglass and openglass, just renamed

The image I use actually isn't a glass reflection, but it works the same way. I made a few custom png's, and replaced my reflection image in dwmblurglass so that both programs always use the same png. Then I made a script to grab a random background image from a folder with all my images, copy it to the dwmblurglass folder, and rename at user logon.

here's an example of one that I'm calling Damascus Acrylic or Damascus Glass

I feel like I must be one of only a few using these apps NOT to recreate windows 7, as much as I still love the look. I used it from 2007/8-2019!

what process did you spy on for the notification center?

depending on if you are on 23h2 or 24h2, its either shellexperiencehost.exe or shellhost.exe.

appreciate all the help too

No worries, I might be a bit slow to respond sometimes but I do like to help :)

dac4git commented 1 month ago

uhm, good sir please replace the image from my code with whatever image you would like to use lmao if I recall, openglass, if installed to root would be Background:=<ImageBrush Stretch="uniformtofill" ImageSource="C:\openglass\data\glass.png" Opacity="0.42" /> Also im pretty sure its the exact same png between dwmblurglass and openglass, just renamed

The image I use actually isn't a glass reflection, but it works the same way. I made a few custom png's, and replaced my reflection image in dwmblurglass so that both programs always use the same png. Then I made a script to grab a random background image from a folder with all my images, copy it to the dwmblurglass folder, and rename at user logon.

here's an example of one that I'm calling Damascus Acrylic or Damascus Glass

I feel like I must be one of only a few using these apps NOT to recreate windows 7, as much as I still love the look. I used it from 2007/8-2019!

LOL.. no im not that slow. i replace your path with the path to my Win7_Glass_Reflection.png that i have custom set in openglass as well. its just a png with glass reflection appearance. it wont show on the start menu though. i increased opacity as well. i have it working with SAB win7 taskbar and it overlays that to give it glass reflection as well.. just not working on the windhawk start menu styler. i'll keep adjusting it to see if i can make it work somehow.

thats weird. i spied on both shellexperiencehost.exe and shellhost.exe. its 24h2 but the uwspy window never opens when i spy and then click on the clock to launch the cal/notification pane. can you provide the UI.Xaml target that you see when you spy on it? then maybe i can figure it out from there

bbmaster123 commented 1 month ago

LOL.. no im not that slow.

I'm sure, but there are a lot of users that need everything spelled out, I have to assume lowest common denominator, no offense! Better to be clear where not needed anyway than vague when needed, imo

it wont show on the start menu though

oh for start menu use Border#AcrylicOverlay for the image, and Border#AcrylicBorder to set the acrylic. If you need targets for anything else let me know. I put an image on start, search, notification, toasts, context menu, tooltip, settings, defender, calculator etc

Yea I get that too. I've had success with killing shellhost, set styler mod to disabled, click clock, run uwpspy here's a screenshot just in case image

dac4git commented 1 month ago

LOL.. no im not that slow.

I'm sure, but there are a lot of users that need everything spelled out, I have to assume lowest common denominator, no offense! Better to be clear where not needed anyway than vague when needed, imo

it wont show on the start menu though

oh for start menu use Border#AcrylicOverlay for the image, and Border#AcrylicBorder to set the acrylic. If you need targets for anything else let me know. I put an image on start, search, notification, toasts, context menu, tooltip, settings, defender, calculator etc

Yea I get that too. I've had success with killing shellhost, set styler mod to disabled, click clock, run uwpspy here's a screenshot just in case image

no worries at all! and excellent! thanks for the img. time to get this fixed lol.

bbmaster123 commented 1 month ago

no worries at all! and excellent! thanks for the img. time to get this fixed lol.

for sure! ping me when/if you need me :)

Scrazeloppe commented 1 month ago

I don't understand anything you guys are talking about... What's this about putting images on it? 😔 I'm cooked. I just wanted to make notifications and search menu more opaque so I could see on white backgrounds 😭

dac4git commented 1 month ago

I don't understand anything you guys are talking about... What's this about putting images on it? 😔 I'm cooked. I just wanted to make notifications and search menu more opaque so I could see on white backgrounds 😭

do you have the translucent mod set right now?

Scrazeloppe commented 1 month ago

I don't understand anything you guys are talking about... What's this about putting images on it? 😔 I'm cooked. I just wanted to make notifications and search menu more opaque so I could see on white backgrounds 😭

do you have the translucent mod set right now?

Yes I have it set to translucent for start menu and notification mod.

dac4git commented 1 month ago

@Scrazeloppe set theme to "None"

add each target as follows and see how you like these settings:

taget 1:

Grid#CalendarCenterGrid Background:=<AcrylicBrush TintColor="Black" TintOpacity="0.25" Opacity="0.8" />

target 2:

Grid#ControlCenterRegion Background:=

target 3:

Grid#NotificationCenterGrid Background:=<AcrylicBrush TintColor="Black" TintOpacity="0.25" Opacity="0.8" />

target 4:

Border#ToastBackgroundBorder2 Background:=<AcrylicBrush TintColor="Black" TintOpacity="0.25" Opacity="0.8" />

There are some more subcomponents im playing with still - like media controls, etc. if that opacity/shade works better, i'll post the full mod code when done

Scrazeloppe commented 1 month ago

@Scrazeloppe set theme to "None"

add each target as follows and see how you like these settings:

taget 1:

Grid#CalendarCenterGrid Background:=<AcrylicBrush TintColor="Black" TintOpacity="0.25" Opacity="0.8" />

target 2:

Grid#ControlCenterRegion Background:=

target 3:

Grid#NotificationCenterGrid Background:=<AcrylicBrush TintColor="Black" TintOpacity="0.25" Opacity="0.8" />

target 4:

Border#ToastBackgroundBorder2 Background:=<AcrylicBrush TintColor="Black" TintOpacity="0.25" Opacity="0.8" />

There are some more subcomponents im playing with still - like media controls, etc. if that opacity/shade works better, i'll post the full mod code when done

works perfect, thank you I appreciate it. except I just used Background:=<AcrylicBrush TintColor="Black" TintOpacity="0.25" /> instead. Do you know the target(s) for the search menu to apply the same style?

dac4git commented 1 month ago

@Scrazeloppe set theme to "None" add each target as follows and see how you like these settings: taget 1: Grid#CalendarCenterGrid Background:=<AcrylicBrush TintColor="Black" TintOpacity="0.25" Opacity="0.8" /> target 2: Grid#ControlCenterRegion Background:= target 3: Grid#NotificationCenterGrid Background:=<AcrylicBrush TintColor="Black" TintOpacity="0.25" Opacity="0.8" /> target 4: Border#ToastBackgroundBorder2 Background:=<AcrylicBrush TintColor="Black" TintOpacity="0.25" Opacity="0.8" /> There are some more subcomponents im playing with still - like media controls, etc. if that opacity/shade works better, i'll post the full mod code when done

works perfect, thank you I appreciate it. except I just used Background:=<AcrylicBrush TintColor="Black" TintOpacity="0.25" /> instead. Do you know the target(s) for the search menu to apply the same style?

Start Menu Search:

Border#AppBorder Background:=<AcrylicBrush TintColor="Black" TintOpacity="0.25" Opacity="0.8" />

Scrazeloppe commented 1 month ago

Start Menu Search:

Border#AppBorder Background:=

thank you so much! i can finally see everything. thanks a lot everybody here

dac4git commented 1 month ago

Start Menu Search: Border#AppBorder Background:=

thank you so much! i can finally see everything. thanks a lot everybody here

oh, add this one in. (its to fix the color when you type in the search box and it changes from the start host to the search host.. if you noticed, the search field stayed darker than the rest...)

Windows.UI.Xaml.Controls.Border#TaskbarSearchBackground Background:=<AcrylicBrush TintColor="Black" TintOpacity="0.02" Opacity="0.8" />

dac4git commented 1 month ago

@bbmaster123 any other thoughts on the start menu glass background? i've used a png (multiple different) and have the code set to:

Border#AcrylicOverlay Background:=<ImageBrush Stretch="uniformtofill" ImageSource="C:\Windhawk\Glass Reflection\Glass.png" Opacity="0.75" /> Visibility=Visible

I've tried changing out "Background:=" for "Fill:=" as well, but it never shows...

does it need to be a specific type of image? bit, etc?

Also - just a note, i figured out the uwpspy and notification spying fix. that process is suspended when not opened, so launch uwpspy, highlight searchhost.exe, click the clock and while thats opened, click spy button. Works perfect every time.

oh, btw just figured out how to remove the shadows. so simple i wanted to smack myself upside the head... Shadow:= just put no value. it removes it. now i got the calendar with only toast notifications floating above it. why M$ makes some of these horrid designs is beyond me

bbmaster123 commented 1 month ago

@dac4git it should set pretty well any png, as well as lots of other image formats, as long as its not corrupt.

Try setting an online image like: Background:=<ImageBrush Stretch="uniformtofill" ImageSource="https://raw.githubusercontent.com/bbmaster123/FWFU/refs/heads/main/icon.svg" Opacity="1" />

should see a snowman. if that works, I think it confirms that 24H2 can only set images from an online source...

Shadow:=

right I forgot about that! Just don't know how to set a shadow then.

why M$ makes some of these horrid designs is beyond me

don't even get me started! haha

dac4git commented 1 month ago

@dac4git it should set pretty well any png, as well as lots of other image formats, as long as its not corrupt.

Try setting an online image like: Background:=<ImageBrush Stretch="uniformtofill" ImageSource="https://raw.githubusercontent.com/bbmaster123/FWFU/refs/heads/main/icon.svg" Opacity="1" />

should see a snowman. if that works, I think it confirms that 24H2 can only set images from an online source...

Shadow:=

right I forgot about that! Just don't know how to set a shadow then.

why M$ makes some of these horrid designs is beyond me

don't even get me started! haha

oh im still on 23h2. way too many incompatibilities with 24h2 for the software i use still. maybe in a few months they'll fix it. you set it just like that: image