This is a plugin for WordPress which disables the upper admin area in the font […]
Showing posts from Tag: css
show all posts
Development and implementation of a Web GIS component which consumes a predefined API.
Add the following code to your theme’s functions.php file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
/* * Show the thumbnail and the title of a WP post with bootstrap media */ // Add the shortcode add_shortcode('show_post_wp_bm', 'get_post_title_and_thumbnail_in_boostrap_media'); // Create the function if(!function_exists('get_post_title_and_thumbnail_in_boostrap_media')): function get_post_title_and_thumbnail_in_boostrap_media($atts, $content=null) { // Get the attributes provided extract(shortcode_atts(array( "id" => null ), $atts)); // Check if an id was specified and that the post with that id exists if (is_numeric($id)) { $post = get_post($id); } // Get the data if ($post != null) { $title = apply_filters ( 'wp_title', $post->post_title); $html = ''; $html .= '<div class="media">'; $html .= '<div class="media-left media-middle">'; $html .= '<a href="'.get_permalink($post).'" title="'.$title.'">'; $html .= get_the_post_thumbnail($post, 'thumbnail'); $html .= '</a>'; $html .= '</div>'; $html .= '<div class="media-body">'; $html .= '<a href="'.get_permalink($post).'" title="'.$title.'">'; $html .= '<h4 class="media-heading">'.$title.'</h4>'; $html .= '</a>'; //$html .= '...'; $html .= '</div>'; $html .= '</div>'; // Return the content return html_entity_decode($html); } // Return an error return '[show_post_wp_bm] Invalid ID: ' . $id; } endif; |
Add the following code to your theme’s functions.php file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// Categories walker class Walker_Categories_Template extends Walker_Category { function start_lvl(&$output, $depth=1, $args=array()) { $output .= "\n<ul class=\"list-group\">\n"; } function end_lvl(&$output, $depth=0, $args=array()) { $output .= "</ul>\n"; } function start_el(&$output, $item, $depth=0, $args=array()) { $output .= "<li class=\"list-group-item\"><a href=\"". esc_url( get_category_link( $item->term_id ) ) ."\" title=\"".esc_attr( $item->name )."\"><span class=\"badge pull-right\">".esc_attr($item->count)."</span>".esc_attr( $item->name ); } function end_el(&$output, $item, $depth=0, $args=array()) { $output .= "</a></li>\n"; } } |
Use the categories list function […]
Use the following code to remove the dotted outline around a link:
|
1 2 3 |
a, a:hover, a:active, a:focus { outline: 0; } |
Source: Removing […]
Here is a useful and interesting tutorial: http://thenewcode.com/533/Sepia-toning-photographs-with-CSS
The code below will help you make Twitter’s Boostrap accordion widget as high as the […]
Use the following code to disable the navbar collapse in Twitter’s Bootstrap version 3.3.4:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/*no collapse*/ .navbar-collapse.collapse.off { display: block!important; } .navbar-collapse.collapse.off ul { margin: 0; padding: 0; } .navbar-nav.no-collapse>li, .navbar-nav.no-collapse { float: left !important; } .navbar-right.no-collapse { float: right!important; } |
[…]
The example below adds a tag to the bottom of the page. The CSS code […]
This project is a custom WordPress theme designed for presenting images. It was built after […]
mrbunnycooking.com is a cooking blog based on wordpress. Some of the modifications and features will […]
Browsing the web, I found the following sizes:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
/* 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 */ } /** Elements */ /* Default sizes */ /* 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 */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } |
Sources: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ http://stuffandnonsense.co.uk/projects/320andup