Google calendar custom frame modification request

[Gourav1910]

Hi, I found the custom frame of google calendar is very helpful in the side panel for continuously tracking my time-blocked routine.

But in the side panel, the upper header seems to be big. So is it possible for you to trim the upper header(where the date is written (FRI and 17 in blue circle)? It will be good for the visual experience.

[obsidianspear]

think just add

.JE11kf {
display: none !important;
}

to the css part

[Gourav1910]

You mean, I should add this in a css snippets or inside the custom frame setting of calendar?

[obsidianspear]

That'll be the custom frame setting for the calendar in the plugin settings. Separate from your theme appearance CSS snippets.

[Gourav1910]

omg thanku thanku thanku😊😊🫡it worked. You made my day.

[Ellpeck]

Reopening this because I do want to include this in the default preset!

[Gourav1910]

Reopening this because I do want to include this in the default preset!

I want to add one more issue from the custom frame of google keep.

Why can't I able to open the main menu? Did you do this intentionally or did you forget about it? If it is possible then how to make it possible to open main menu as well.

[obsidianspear]

I'll chime back in so you have something to work with. Replace the default custom frame CSS code in google keep with:

---

div.PvRhvb.PvRhvb-qAWA2, div.gb_sc { display: none; }

div.PvRhvb-fozPsf-ysyhld { min-width: 0px !important; }

---

Let me know if that returns menu functionality to your window.

Also, as an extra, if you want to use google keep and tasks WITH your google calendar custom frame, you can remove the 'div.gboEAb,' and 'div.Kk7lMc-QWPxkf-LgbsSe-haAclf,' line (including the comma) which will return the right sidebar functionality so your code now looks like

---

/* hide right-side menu, and some buttons */ div.d6McF, div.pw6cBb, div.gb_Td.gb_Va.gb_Id, div.h8Aqhb, div.dwlvNd, .JE11kf { display: none !important; }

---

This include the previous fix mentioned. Let me know if that works for you.

[Ellpeck]

Unfortunately, neither one of these fixes can be used in the default plugin. As Google randomizes their CSS class names, any updates to their code (which happened a fair few times with Keep by now) will break most of the randomized names. This is why the default Keep preset uses the hierarchy of elements as a reference, rather than the class names.

If you want your fixes to be included in the plugin by default, you'll have to edit them to use as few class names as possible, unfortunately.

[obsidianspear]

That's a bummer. I only just learned how to edit CSS this week so just now learning that. Makes sense though.

[obsidianspear]

I think I found a solution. How about this?

---

/* hide the menu bar, "Keep" text, and logo */ html > body > div:nth-child(2) > div:nth-child(2) > div:first-child[class*=" "], html > body > div:first-child > header:first-child > div > div:first-child > div > div:first-child, html > body > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child { display: none !important; }

---

The menu bar div class when folded (what we want to hide) is "PvRhvb PvRhvb-qAWA2" as opposed to menu when expanded which is just "PvRhvb" so adding [class*=" "] can narrow perhaps?

The CSS doesn't display the child div if it contains a space (" ") despite the value being randomized with updates as you mention (assuming same structure). Can also exclude the value containing a dash ("-")

Last added CSS was to just fix the spacing of other elements when opening and closing menu. Would this work instead?