Context-Aware Classes en

Installations 9 Likes 3

Provides handy classes to hide or show content based on where it is displayed, for example in a dashboard, an entity, a tooltip, etc. You could use them to omit excessive details from dashboard widgets without having to use a different entity or to move content to posts, or on the contrary display a special note when only an excerpt of the entity is seen in a tooltip. You could also hide certain large elements from view for mobile users, for example large images or tables that are difficult to navigate, omit images when printing, etc.

You can use these class names for any type of element in the HTML view of the editor:

class="dashboard-only": Dashboard only
class="no-dashboard": No dashboard
class="editor-only": Visible in the Summernote editor only (useful for reminders or placeholders in entity templates)
class="ExT-only": Extraordinary Tooltips only
class="no-ExT": No Extraordinary Tooltips
class="mobile-only": Mobile only
class="no-mobile": No mobile
class="marker-only": Map marker only
class="marker-details-only": Map sidebar details only
class="no-map": Nowhere on a map (Explore or dashboard widget view)
class="print-only": Only in print mode (note: will likely not show in previews)
class="no-print": Exclude from print
class="tooltip-only": Kanka tooltips only
class="no-tooltip": Exclude from tooltips
class="transclusion-only": Show only when transcluded using mentions with the field:entry parameter
class="no-transclusion": Exclude from transcluded entries

This plugin supports the Marketplace Toolbar for Summernote! You can install this user script with a browser extension to insert the necessary HTML in your entities without memorizing or referencing this page.

Note that tooltip-only, no-tooltip and marker-only are only effective at or very near the top of an entry, since tooltips grab the first so many characters. In addition, only some HTML elements are interpreted in tooltips, so no-tooltip may be ignored depending on the HTML tag you apply it to. You can work around that limitation by wrapping an invalid element in a div or span and hiding that element to also hide everything it contains.

If you have ideas for other classes to add to this theme, feel free to suggest them on Discord.

Want to show appreciation for my plugins or request one-on-one CSS help? I accept tips on Ko-fi (no account needed):

Latest version 1.7 View content

Released 1 year ago

Updated "tooltip-only" and "no-tooltip" for the new tooltip library.

Plugin CSS for 1.7


:root { --summernote-insert-context-aware-classes: enabled; }

.entity-content .dashboard-only { display: none; }
#campaign-dashboard .dashboard-only { display: initial; }

#campaign-dashboard .no-dashboard {	display: none; }

@media (min-width: 768px) {
	.entity-content .mobile-only { display: none; }
}
@media (max-width: 767px) {
	.entity-content .no-mobile { display: none; }
}

.entity-content .tooltip-only {	display: none; }
.tippy-box .tooltip-only { display: initial; }
.tippy-box .no-tooltip { display: none; }

.entity-content .marker-only { display: none; }
.marker-popup-entry .marker-only { display: initial; }

.entity-content .marker-details-only { display: none; }
#sidebar-marker .marker-details-only { display: initial; }

#map-body .no-map, .map-dashboard .no-map { display: none; }

@media print {
	.no-print { display: none; }
}
@media screen {
	.print-only { display: none; }
}

.editor-only { display: none; }
.note-editing-area .editor-only { display: initial; }

.entity-content .transclusion-only { display: none; }
.mention-entry-content .transclusion-only { display: initial; }
.mention-entry-content .no-transclusion { display: none; }