Tag: css

Categories
Blog Code Snippets CSS

Ugly Form Fields on Mobile, particularly Select Field and Submit Buttons

Are you experiencing ugly form fields on the mobile devices which look nothing like the very cool and awesome fields which you built for the desktop version? That could be because its using the browser’s default css for the input and select fields and buttons.

I’ve experienced this on my iphone but it could happen with other mobile operating systems and browsers also.

This bit of code will eliminate that effect.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
Categories
Code Snippets CSS

Install a font file using css: otf, ttf, woff, etc.

First step: upload the .otf to the server so its accessible by the css file.

Add this bit of code to the top of your css file to activate a new font using its .otf file.

In this case, the .otf file was placed in the fonts folder on the same level as the css file.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@font-face {
font-family: 'Arial';
src: url('./Arial.eot');
src: local('Arial'), url('./Arial.woff') format('woff'), url('./Arial.ttf') format('truetype');
}
@font-face { font-family: 'Arial'; src: url('./Arial.eot'); src: local('Arial'), url('./Arial.woff') format('woff'), url('./Arial.ttf') format('truetype'); }
@font-face {
  font-family: 'Arial';
  src: url('./Arial.eot');
  src: local('Arial'), url('./Arial.woff') format('woff'), url('./Arial.ttf') format('truetype');
}

Here’s how to use that newly added font. The font name below must be exactly the same as the defined “font-family” name above.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
body {
font-family: 'Arial';
}
body { font-family: 'Arial'; }
body {
  font-family: 'Arial';
}
Categories
Blog Code Snippets CSS

Smooth Transitions

Add this bit of code to ensure smooth transitions of elements:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
* {
-webkit-transition: all 700ms;
transition: all 700ms;
}
* { -webkit-transition: all 700ms; transition: all 700ms; }
* {
  -webkit-transition: all 700ms;
  transition: all 700ms;
}

This will apply to all elements and for all types of transitions; whether its related to the element’s height, width, positioning or font size.

It is especially useful for mobile responsive when the element size has to be made smaller to fit the device. By using this smooth transition, the change looks smooth and nice to the end user.

Categories
Code Snippets Wordpress

Customize any Form on WordPress using CSS

Have you installed a contact form plugin for WordPress and found the default layout is entirely boring?

I’ve been there! The default layout comes with a very little or absolutely no css formatting.

Below is the default layout for Ninja Forms.

Contact Form - Before Applying CSS

Luckily, I was able to write a snippet of code which will resolve that.

The Solution to Customizing any Form on WordPress using CSS

This snippet can work on any contact form for WordPress; including of course Contact Form 7 and Ninja Forms. Just copy and paste into your custom css editor. Some themes will come up with this editor which you can find in the WordPress Admin section under ‘Appearance’. If your theme doesn’t come with it, download and install Simple CSS and JS which will work perfectly well.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
input, select, textarea {
border-radius: 3px;
color: #666;
font-size: 17px;
padding: 8px;
}
input, select, textarea { border-radius: 3px; color: #666; font-size: 17px; padding: 8px; }
input, select, textarea {
  border-radius: 3px;
  color: #666;
  font-size: 17px;
  padding: 8px;
}

 

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
/* Reduce the textarea size to 80 pixels */
textarea {
height: 80px;
}
/* Reduce the textarea size to 80 pixels */ textarea { height: 80px; }
/* Reduce the textarea size to 80 pixels */
textarea {
  height: 80px;
}

 

Contact Form - After Applying CSS

There you have it! A nice sleek modern looking form created by adding just a few lines of CSS.

Categories
Blog Code Snippets

CSS Media Queries for Mobile Devices

Writing CSS for different devices can be a pain in the ass. With Media Queries it’s easier, if you know how to pin point a specific device.

This can help you pin point a specific mobile device from within your CSS. Copy the code and paste it into you CSS file and get crackin’!

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* The New iPad (iPad 3) ----------- */
@media only screen
and (min-device-width: 1536px)
and (max-device-width: 2048px)
and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* The New iPad (iPad 3) ----------- */ @media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}


/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}


/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}


/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}


/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}


/* The New iPad (iPad 3) ----------- */
@media only screen
and (min-device-width: 1536px)
and (max-device-width: 2048px)
and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}


/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

 

Categories
Blog Code Snippets

Vertically Align Anything with Just 3 Lines of CSS Code

Have you to vertically align an element and it just won’t work.

vertical-align: middle; claims to do the trick but it won’t apply to every situation.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.element { position: relative; top: 50%; transform: translateY(-50%); }
.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

That’s all you need! It works straight out of the box, even in Internet Explorer 9.