scroll-margin-top

What: CSS-Tricks just posted about this last Friday and since I could have used this that day (!) but didn’t find it until now, I’m adding a note here for myself:

You have a page with a table of contents (with links), or you have a one page website with in-page navigation and you have a fixed header — when you click a link the content scrolls up too far and is hidden by the fixed header. This is not a good user experience, and you can improve it with scroll-margin-top in Firefox and Chrome-based browsers…

Read more

Shortcode & Autop

I have a little WordPress plugin I use on some of my sites and it employs shortcodes. The shortcodes are not self-closing and they are wrapped in more shortcodes. They’re nested shortcodes. Using them looks like this:

[ltabjes talen="Taal Language"][ltab taal="Taal"]

Content

[/ltab][ltab taal="Language"]

More content

[/ltab][/ltabjes]

WordPress wraps p-tags around each of these shortcode tags, and adds more p-tags inside the shortcodes, adding more space than is wanted. All those empty p-tags are a drag. The shortcode_unautop function removes the outer paragraph tags, but not the inner ones. I don’t want to remove wpautop altogether because the content in the shortcode might still need it. How to solve this?

Read more

Speeding up local install of WordPress in XAMPP

My local installs of WordPress in XAMPP where excruciatingly slow, easily 5 seconds for each page load even with a clean install of WordPress. Local installs are supposed to make development in WordPress easier but 5 second page loads make it harder.  I found solutions for this in several places and I’m linking one that has several of them in one answer on Stack Overflow.

Read more

Spacing in CSS pseudo-element content

A bit of an abstract title but I’m basically taking about:

h4::after {
    content: "";
}

If you have just text in the content property, you can adjust spacing with the letter-spacing and/or word-spacing properties in CSS. Letter-spacing would even work if you have just icons but I had a combination of three icons and a word, and the letter-spacing I wanted between the icons pulled the letters of the word too far apart. You can’t use html in the content property of a pseudo-element like ::before or :: after, so   is out.

What: I found my solution on Stack Overflow, see link below, where someone had given a pretty list of the different spaces in CSS as a solution to a similar problem.

Read more