Remove Underline from Links

Use Case: In footer are specifically, we have many links, sometimes we put links on the text, and they all become underlined which looks messay. So, we can give the group containing footer a class name: footer-no-link-underline and put the following code in the additional CSS section of the theme:

/* Removes the underline from all links within the block with the custom class */
.footer-no-link-underline a {
    text-decoration: none;
    /* Include these to counter themes using borders or shadows for underline */
    border-bottom: none;
    box-shadow: none;
}

/* Adds the underline ONLY when the cursor hovers over the link */
.footer-no-link-underline a:hover {
    text-decoration: underline;
    /* If you used border/shadow, you'd re-add it here for the hover state, but
       using text-decoration: underline is simpler and recommended for hover. */
}

Remove Unwanted Borders from WordPress Details Block

Use Case: Sometimes due to your website’s color scheme, when you use the Details Block for FAQs, upon hover it shows ugly border. To remove that border, add the following code in the Additional CSS section of the theme:

/* Removing Unwanted Border from WordPress Details Block
*/
details summary:focus {
    outline: none;
}

/* Removing Unwanted Border from WordPress Details Block with better browser support */
details summary:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

Create Sticky Columns

Use Case: Suppose you use use the WordPress column block containing two columns. The left column has extensive text, while the right column has summary of that text necessary to display. You want that the right column should be sticky so that it remain visible to the user until the data column is being displayed to the user.

Give this class name to the column you want to stay sticky: sticky-column and put the following code to the Additional CSS section of the theme:

.sticky-column {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 20px; /* Adjust this value based on your header height */
    align-self: flex-start;
    height: fit-content;
}