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 […]
Archive for “CSS Snippets”
CSS and CSS3 style tips, techniques, tricks, and snippets.
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 […]
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:
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, […]
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”. […]
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 […]
Some people use this responsive CSS to avoid horizontal scrolling on mobile phones: But I find that it causes the vertical scroll bar to disappear on Android phones. This was the case on an Samsung Galaxy S3. So, I don’t use overflow-x:hidden for responsive web design. Instead, I use the following. If the rest of […]
Here are 4 wood social buttons in the form of CSS sprites. They include these 4 icons: Linkedin icon, Twitter icon, Google Plus icon, and Facebook icon. They are size 32px. They are glossy wood, dark wood. Here are steps on how to implement these social sprites on your own website: Step 1 – Download […]
Here are 4 wood social buttons in the form of CSS sprites. CSS sprites help your web pages load faster, since all of these are on 1 image instead of 4 images. They include these 4 icons: Twitter icon, Google Plus icon, YouTube icon, and Facebook icon. They are size 64px. They are glossy wood, […]
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”).