Skip to content

Zoom images on Scroll CSS Only

@keyframes scale-a-lil { from { scale: .5; } } @media (prefers-reduced-motion: no-preference) { figure img { animation: scale-a-lil linear both; animation-timeline: view(); animation-range: 25vh 75vh; } } https://codepen.io/argyleink/pen/RwvOmvY https://tympanus.net/codrops/2024/01/17/a-practical-introduction-to-scroll-driven-animations-with-css-scroll-and-view/

Mehr Lesen

Top Line Lase Scroll progress Indicator

You want a tiny scroll indicator line on top of the browser window like some of the news outlets have? Add this CSS to your Child Themes style.css /*SCROLL INDICATOR*/ .scroll-watcher { height: 10px; position: fixed; top: 0; left:0; z-index:…

Mehr Lesen

Only Mobile Line Break

Use this CSS to introduce a line break that only works on mobile or small screen devices. @media screen and (min-width: 768px) { .mobile-break { display: none; } } And then use it like this: <br class="mobile-break">

Mehr Lesen

Restrict plugin from activation or deactivation

https://www.youtube.com/watch?v=-jzbgz0bINE Prevent activation (and also auto deactivation) of certain plugins function enym_restrict_plugin_activation() { $restricted_plugins = array('wp-file-manager/file_folder_manager.php', 'file-manager-advanced/file_manager_advanced.php', 'file-manager/file-manager.php', 'fileorganizer/fileorganizer.php', 'filester/ninja-file-manager.php', 'wpide/wpide.php', 'htaccess-file-editor/htaccess-file-editor.php', 'wp-htaccess-editor/wp-htaccess-editor.php'); $active_plugins = get_option( 'active_plugins' ); foreach ( $active_plugins as $plugin ) { if ( in_array( $plugin, $restricted_plugins…

Mehr Lesen

Inline JS and CSS in WordPress for Backend and Gutenberg

Disable "stick to the top of the blog" and "pending review" in Gutenberg sidebar //hide stick to the top of the blog checkbox function inline_custom_admin_style() { echo '<style> .editor-post-author__panel { margin-top:-50px !important; } .post-author-selector{background: white;} </style>'; } add_action('admin_head', 'inline_custom_admin_style'); Via…

Mehr Lesen

Good working responsive Tables

/*TABLES RESPONSIVE*/ table.responsive span[data-type="responsive"]{ display:none; } @media only screen and (max-width:768px){ table.responsive span[data-type="responsive"]{ display: block; /* width: 100%; */ /*vertical-align: top;*/ color: var(--wpex-table-thead-color); font-weight: var(--wpex-bold); color: var(--wpex-table-th-color); /* text-align: -webkit-match-parent; */ /* padding: var(--wpex-table-cell-padding,.769em 1em); */ /* border: 1px solid…

Mehr Lesen
An den Anfang scrollen