Web & Software Developer

Archive for “CSS Snippets”

CSS and CSS3 style tips, techniques, tricks, and snippets.

Hide Skype Click To Call Phone Icon Next To Phone Numbers

Here are 2 ways you can stop Skype from adding a phone icon next to your phone numbers. Method 1: With CSS This method would be useful for a phone number that is displayed on the page, but for whatever reason, you don’t want it to be “clickable”. This means that you don’t have the […]

Astrology Zodiac CSS icons

Astrology Icons With CSS

This is an example of how to make astrology or zodiac icons with CSS. This is the CSS: Note: I’ve made the icons purple. You can edit line 3, above, to choose your own color. Usage Zodiac Sign Symbol Icons Aries symbol: Taurus symbol: Gemini symbol: Cancer symbol: Leo symbol: Virgo symbol: Libra symbol: Scorpio […]

Style The Response Messages For Contact Form 7

This CSS will style the “Validation errors” message box and the “Your message was sent” message from Contact Form 7 (a WordPress plugin). It uses the WordPress dashicons, so if your theme does not load the dashicons stylesheet, you can load it in the footer by adding this to your footer.php: The CSS:

nth-child CSS Selectors For 3 Column Grid Layouts

Here’s how to select every element of either the 1st column, the 2nd column, or the 3rd column of a 3-column grid layout. In other words, these are CSS selectors to select every third element. The column/grid elements must have a CSS class assigned to them. In this example, the class is “grid_4”. In addition, […]

nth-child CSS Selectors For 4 Column Grid Layouts

Here’s how to select every element of either the 1st column, the 2nd column, the 3rd column, or the 4th column, of a 4-column grid layout. In other words, these are CSS selectors for every fourth element. The column/grid elements must have a CSS class assigned to them. In this example, the class is “grid_3”. […]

Sitewide Notice Across The Top of Your Site

Here are the CSS and HTML needed to add a simple, site-wide notice across the top of your website. The CSS In the CSS that follows, you MUST change the last selector “.container” into the CSS class or ID of your own website’s outermost wrapper element. You can also edit the text color and background […]

nth-child CSS Selectors For 4 Column Layouts

Here’s how to select every element of either the 1st column, the 2nd column, the 3rd column, or the 4th column. This applies to 4-column galleries, or any setup of 4 columns (such as divs or paragraphs with class “one-fourth”).