Hiding Embedded Bases Toolbar Elements via CSS

Custom CSS & Theme Design
1

What I’m trying to do

Hide individual elements from embedded bases.

Things I have tried

I added custom CSS to hide all elements but the “New” button from an embedded bases toolbar. When I first tried doing this, I used the following CSS.

:is(
	.bases-new-only,
	.bases-embed[alt~="new-only"]
)   .bases-toolbar-views-menu,
    .bases-toolbar-sort-menu,
    .bases-toolbar-filter-menu,
    .bases-toolbar-properties-menu {
	display: none;
}

This did not work. However, the CSS below works.

:is(
	.bases-new-only,
	.bases-embed[alt~="new-only"]
)   .bases-toolbar-views-menu {
	display: none;
}

:is(
	.bases-new-only,
	.bases-embed[alt~="new-only"]
)   .bases-toolbar-sort-menu {
	display: none;
}

:is(
	.bases-new-only,
	.bases-embed[alt~="new-only"]
)   .bases-toolbar-filter-menu {
	display: none;
}

:is(
	.bases-new-only,
	.bases-embed[alt~="new-only"]
)   .bases-toolbar-properties-menu {
	display: none;
}

This seems unnecessarily cumbersome. Is there something I’m doing wrong in the first example, or do they have to be individually declared like in the second?

2

The first part has to be declared for any of them.

You can try the following, not sure if it will do what you want.

:is(
  .bases-new-only,
  .bases-embed[alt~="new-only"]
)
:is(
  .bases-toolbar-views-menu,
  .bases-toolbar-sort-menu,
  .bases-toolbar-filter-menu,
  .bases-toolbar-properties-menu
) {
  display: none;
}
1 Like
3

Perfect! Thank you so much.

4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.