Using the WP Ecommerce Shop Styling plugin.
Email template product table is improved by adding the following styling to the email template:
| CSS | | copy code | | ? |
| 1 | #products-table { width: 100%;} |
| 2 | #products-table td {padding:5px;} |
| 3 | #products-table th{text-align: left;} |
Using CSS:
| CSS | | copy code | | ? |
| 1 | |
| 2 | /*styles for Chrome */ |
| 3 | @media screen and (-webkit-min-device-pixel-ratio:0) { |
| 4 | Body { |
| 5 | -webkit-text-size-adjust:none; |
| 6 | } |
| 7 | } |
This can cause issues in that it disables zoom for font size but it does remove the issue of Chrome wrecking layouts by increasing font sizes etc
TwentyTwelve loads ie.css from functions.php so to override it in your child theme use the following in your themes functions.php
| PHP | | copy code | | ? |
| 1 | // remove ie css from twentytwelve theme |
| 2 | function mytheme_dequeue_styles() { |
| 3 | wp_dequeue_style( 'twentytwelve-ie' ); |
| 4 | } |
| 5 | add_action( 'wp_enqueue_scripts', 'mytheme_dequeue_styles', 11 ); |
| 6 | //add new from child theme |
| 7 | wp_enqueue_style( 'mytheme-ie', get_stylesheet_directory_uri() . '/css/ie.css', array( 'twentytwelve-style' ), '1.0' ); |
| 8 | $wp_styles->add_data( 'mytheme-ie', 'conditional', 'lt IE 9' ); |
Place ie.css in your themes css directory.
Conditional styling for Chrome browser can be achieved by adding this to the style sheet:
| CSS | | copy code | | ? |
| 1 | @media screen and (-webkit-min-device-pixel-ratio:0) { |
| 2 | Body { |
| 3 | font-size: 20px; |
| 4 | } |
| 5 | } |
In THEME/functions.php add:
| PHP | | copy code | | ? |
| 1 | |
| 2 | // Custom WordPress Styles |
| 3 | function admin_css() { |
| 4 | wp_enqueue_style( 'admin_css', get_stylesheet_directory_uri() . '/admin.css' ); |
| 5 | } |
| 6 | add_action('admin_print_styles', 'admin_css' ); |
Add your custom admin styles to THEME/admin.css
Include meta tag in head to tell mobile devices to use device width instead of assuming desktop width and scrolling:
| CSS | | copy code | | ? |
| 1 | <meta name="viewport" content="width=device-width; initial-scale=1.0; " /> |
For iPhone:
| CSS | | copy code | | ? |
| 1 | @media only screen and (min-device-width: 480px) |
| 2 | { |
| 3 | #background img { |
| 4 | display: none; |
| 5 | } |
| 6 | } |
Other screen sizes can be targeted as follows:
| PHP | | copy code | | ? |
| 1 | min-width: 320px // smartphones, portrait iPhone, portrait 480x320 phones (Android) |
| 2 | min-width: 480px // smartphones, Android phones, landscape iPhone |
| 3 | min-width: 600px // portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) |
| 4 | min-width: 801px // tablet, landscape iPad, lo-res laptops ands desktops |
| 5 | min-width: 1025px // big landscape tablets, laptops, and desktops |
| 6 | min-width: 1281px // hi-res laptops and desktops |
| 7 |
In CSS file:
| HTML | | copy code | | ? |
| 1 | max-width: 100%; |
| 2 |
Images smaller than the available space will be untouched whereas images bigger than the available space will be scaled
| HTML | | copy code | | ? |
| 1 | @media only screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-min-device-pixel-ratio: 1) |
| 2 | { |
| 3 | #background img { |
| 4 | display: none; |
| 5 | } |
| 6 | } |
Symptom:
Dropdown menus appear behind content in the div below even if z index is set higher.
Conditions:
CSS based dropdown menus viewed in IE7
Solution:
This occurs when the div containing the menu is separate from the div containing the content below. IE7 resets the z index for the separate divs. Adding “position: relative;” to both and a zindex to the div containing the menus that is higher thatn that for the content div will solve this.
| HTML | | copy code | | ? |
| 01 | /*Set zindex of first div to be higher than div below so that |
| 02 | all zindex statements for elements in the first div are respected. |
| 03 | #navWrapper { |
| 04 | position:relative; |
| 05 | z-index:10; |
| 06 | } |
| 07 | #contentWrapper{ |
| 08 | position:relative; |
| 09 | z-index:1; |
| 10 | } |