WP-Mix

A fresh mix of code snippets and tutorials

Category Archive: CSS

Posts about CSS

Page 1 of 4

Responsive CSS for Simple Ajax Chat

Thank you to Benjamin S. for sharing this CSS snippet for my free WordPress plugin, Simple Ajax Chat. Simple Ajax Chat (SAC) provides a setting that makes it easy to add your own custom CSS/styles. So today we’re going to take advantage of that option to customize the appearance of the SAC chat box so […]

Fix Chrome Border Radius

I’ve posted before about fixing weird default browser styles. It happens all too often. Well-intentioned browser developers taking liberties on the page with things like CSS styles. This post shares a quick code snippet that fixes the Chrome browser’s new “rounded corners” style that now is applied to form elements like buttons and inputs.

JavaScript & jQuery: Add Style to Fragment Identifier

It’s easy to style a <div></div> by targeting its ID. But what if you only want to add style when a specific fragment identifier is targeted via the URL? So for example, your page at /about/ has a table with all the data. When visitors arrive directly at /about/, no extra styles are added. But […]

Font Smoothing in Chrome & Firefox

Working with text in Chrome (and other Webkit-based browser) and Firefox can be frustrating. Depending on context, certain fonts may be displayed weird: too heavy, too fat, too thick, and so forth. So much so that the text can look distorted and difficult to read. Fortunately, we can apply the CSS font-smoothing property to make […]

CSS select all except last child

Blazing fast snippet for you today: how to select all children except the last child. Targeting HTML with CSS has never been so much fun..

CSS hover link slide-up background

Quick CSS snippet for you, sort of hard to explain but basically it’s an effect whereby the background color slides up when the link is hovered. Keep reading to check out a demo and grab the code.

Fix double abbr underlines

The developers at Firefox decided to add their own default styles for <abbr></abbr> and <acronym></acronym> tags — completely ignoring the fact that many sites already include their own styles for abbreviations and acronyms. The result is an ugly double underline and/or text-decoration in Firefox browsers.

CSS Vertical Center Block

Here are two ways to vertically center a block-level element using CSS. The first method uses CSS flexbox, while the second method uses CSS transform.

jQuery Auto Resize Multiple Textareas

The User Notes Widget that’s included in my Dashboard Widgets Suite plugin enables users to edit notes right on the WP Dashboard. To make things extra awesome, each note automatically expands as the user types more lines of text. This post explains how I achieved this trick, aka multiple auto-resize textareas.

jQuery check inline CSS property

Working on my WordPress plugin, Dashboard Widgets Suite, I needed a quick function to check a property defined via the inline style attribute on a specific element. Here is an easy, plug-n-play solution that works great.

Disable iOS Tap Color

Here is a quick CSS snippet to disable the tap color in iOS.

CSS Style Placeholders

When displaying with HTML forms, most modern browsers display placeholder values for textarea and input fields. Once you’ve added placeholder attributes to your form fields, you can style their appearance via CSS.