Web & Software Developer

Archive for “CSS Snippets”

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

Pure CSS Responsive Mobile Toggle MenuPure CSS Responsive Mobile Toggle Menu

This is a CSS-only way to convert your site’s menu into a mobile responsive menu that is wide on desktop screens, and automatically turns into a toggle-menu on small mobile screens. A toggle-menu is a menu that will be closed until you tap on the menu button. When the menu button is tapped, the menu … Read more →

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 … Read more →

Astrology Zodiac CSS iconsAstrology Icons With CSS

Updated to include Chiron, Black Moon Lilith, and the asteroids: Juno, Pallas, and Vesta. This is an example of how to make astrology or zodiac icons with plain CSS. You’ll be able to use the icons as plain symbols, like in the image above. You’ll also be able to display the icons as buttons like … Read more →

Style The Response Messages For Contact Form 7Style The Response Messages For Contact Form 7

This CSS will style the “Validation errors” message box and the “Thank you for your message” message for the Contact Form 7 WordPress plugin. By default, Contact Form 7 shows this error message when the contact form is not properly filled out: “One or more fields have an error. Please check and try again.” And, … Read more →

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, … Read more →

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”. … Read more →

Sitewide Notice Across The Top of Your Site

You can instead get this as a WordPress plugin. 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. … Read more →

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”).