css Archives - draghici.net

December 1, 2017 July 19, 2017

Just an admin button

This is a plugin for WordPress which disables the upper admin area in the font […]

Cristi Draghici

December 1, 2017 December 1, 2016

GIS Project

Development and implementation of a Web GIS component which consumes a predefined API.

Cristi Draghici

April 28, 2016 April 28, 2016

WordPress – Show the thumbnail and the title of a WP post with Bootstrap media

Add the following code to your theme’s functions.php file:

/*
 * 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;

* 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>';

// Return the content

return html_entity_decode($html);

}

// Return an error

return '[show_post_wp_bm] Invalid ID: ' . $id;

}

endif;

Cristi Draghici

April 25, 2016 April 25, 2016

WordPress – Adding Bootstrap to wp_list_categories()

Add the following code to your theme’s functions.php file:

// 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";  
    }  
}

// 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 […]

Cristi Draghici

February 12, 2016

Remove the dotted outline around a link

Use the following code to remove the dotted outline around a link:

a, a:hover, a:active, a:focus {
    outline: 0;
}

a, a:hover, a:active, a:focus {

outline: 0;

}

Source: Removing […]

Cristi Draghici

February 4, 2016

CSS Sepia effect

Here is a useful and interesting tutorial: http://thenewcode.com/533/Sepia-toning-photographs-with-CSS

Cristi Draghici

November 10, 2015 September 21, 2015

Full height accordion in Twitter’s Bootstrap 3.3.4

The code below will help you make Twitter’s Boostrap accordion widget as high as the […]

Cristi Draghici

November 10, 2015 September 21, 2015

Bootstrap navbar – disable collapse

Use the following code to disable the navbar collapse in Twitter’s Bootstrap version 3.3.4:

/*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;
}