Category: CSS

Set background image inline using php

When we required for set background dynamic then we used below script,.


<?php 
if(!empty($home_testimonials_bg_image)){ 
$bg_image = $home_testimonials_bg_image['url'];
$bg_image = "url('$bg_image')"; 
$bg_image = 'style="background-image:'.$bg_image.';"'; } ?> 
<section class="testimonials-Section" <?php echo $bg_image; ?>>

</section>

Advertisements

Custom post type singular menu active class


// ====================================
// Custom post type singular menu active class
// ====================================
function add_current_nav_class($classes, $item) {
// Getting the current post details
global $post;
// Getting the post type of the current post
$current_post_type = get_post_type_object(get_post_type($post->ID));
$current_post_type_slug = $current_post_type->rewrite['slug'];

// Getting the URL of the menu item
$menu_slug = strtolower(trim($item->url));

// If the menu item URL contains the current post types slug add the current-menu-item class
if (strpos($menu_slug,$current_post_type_slug) !== false) {
$classes[] = 'current-menu-item';
}
else if( is_single() && $item->title == 'News' )
{
// Blog page set active menu
$classes[] = 'current-menu-item';
}
// Return the corrected set of classes to be added to the menu item
return $classes;
}
add_action('nav_menu_css_class', 'add_current_nav_class', 10, 2 );

How to get browser name and version using PHP

Get browser name and version using PHP function. This script main used detect browser internet explorer version.

/*******/
/* Get Browser Information
/*******/

function getBrowser()
{
    $u_agent = $_SERVER['HTTP_USER_AGENT'];
    $bname = 'Unknown';
    $platform = 'Unknown';
    $version= "";

    //First get the platform?
    if (preg_match('/linux/i', $u_agent)) {
        $platform = 'linux';
    }
    elseif (preg_match('/macintosh|mac os x/i', $u_agent)) {
        $platform = 'mac';
    }
    elseif (preg_match('/windows|win32/i', $u_agent)) {
        $platform = 'windows';
    }
   
    // Next get the name of the useragent yes seperately and for good reason
    if(preg_match('/MSIE/i',$u_agent) && !preg_match('/Opera/i',$u_agent))
    {
        $bname = 'Internet_Explorer';
        $ub = "MSIE";
    }
    elseif(preg_match('/Firefox/i',$u_agent))
    {
        $bname = 'Mozilla_Firefox';
        $ub = "Firefox";
    }
    elseif(preg_match('/Chrome/i',$u_agent))
    {
        $bname = 'Google_Chrome';
        $ub = "Chrome";
    }
    elseif(preg_match('/Safari/i',$u_agent))
    {
        $bname = 'Apple Safari';
        $ub = "Safari";
    }
    elseif(preg_match('/Opera/i',$u_agent))
    {
        $bname = 'Opera';
        $ub = "Opera";
    }
    elseif(preg_match('/Netscape/i',$u_agent))
    {
        $bname = 'Netscape';
        $ub = "Netscape";
    }
   
    // finally get the correct version number
    $known = array('Version', $ub, 'other');
    $pattern = '#(?<browser>' . join('|', $known) .
    ')[/ ]+(?<version>[0-9.|a-zA-Z.]*)#';
    if (!preg_match_all($pattern, $u_agent, $matches)) {
        // we have no matching number just continue
    }
   
    // see how many we have
    $i = count($matches['browser']);
    if ($i != 1) {
        //we will have two since we are not using 'other' argument yet
        //see if version is before or after the name
        if (strripos($u_agent,"Version") < strripos($u_agent,$ub)){
            $version= $matches['version'][0];
        }
        else {
            $version= $matches['version'][1];
        }
    }
    else {
        $version= $matches['version'][0];
    }
   
    // check if we have a number
    if ($version==null || $version=="") {$version="?";}
   
    return array(
        'userAgent' => $u_agent,
        'name'      => $bname,
        'version'   => $version,
        'platform'  => $platform,
        'pattern'    => $pattern
    );
} 


/*******/
/* Browser Information using PHP
/*******/
$ua = getBrowser();
$yourbrowser = "Your browser: " . $ua['name'] . " " . $ua['version'] . " on " .$ua['platform'] . " reports: <br >" . $ua['userAgent'];
print_r($yourbrowser);


/*******/
/* Add Browser Information in WordPress body class
/*******/
add_filter( 'body_class', 'add_browser_class' );
function add_browser_class($classes){
	$ua=getBrowser();	
	$browser_class = "browser_" . $ua['name'] . " browser_version" . $ua['version'];
	
	if($ua['name'] == "Internet_Explorer" && $ua['version'] < 10){
		$classes[] = $browser_class;	
	}	
	// return the $classes array
	return $classes;
	
}

How to change cursor using CSS and HTML

How to change cursor to mouse over see below:

<h2>Mouse over the words to change the cursor.</h2>
<ul>
  <li class="auto">auto</li>
  <li class="crosshair">crosshair</li>
  <li class="default">default</li>
  <li class="e-resize">e-resize</li>
  <li class="help">help</li>
  <li class="move">move</li>
  <li class="n-resize">n-resize</li>
  <li class="ne-resize">ne-resize</li>
  <li class="nw-resize">nw-resize</li>
  <li class="pointer">pointer</li>
  <li class="progress">progress</li>
  <li class="s-resize">s-resize</li>
  <li class="se-resize">se-resize</li>
  <li class="sw-resize">sw-resize</li>
  <li class="text">text</li>
  <li class="w-resize">w-resize</li>
  <li class="wait">wait</li>
</ul>

Style here

.cursor {
	text-align: center;
	font-size: 18px;
}
.auto {
	cursor: auto;
}
.crosshair {
	cursor: crosshair;
}
.default {
	cursor: default;
}
.e-resize {
	cursor: e-resize;
}
.help {
	cursor: help;
}
.move {
	cursor: move;
}
.n-resize {
	cursor: n-resize
}
.ne-resize {
	cursor: ne-resize
}
.nw-resize {
	cursor: nw-resize
}
.pointer {
	cursor: pointer
}
.progress {
	cursor: progress
}
.s-resize {
	cursor: s-resize
}
.se-resize {
	cursor: se-resize
}
.sw-resize {
	cursor: sw-resize;
}
.text {
	cursor: text;
}
.w-resize {
	cursor: w-resize;
}
.wait {
	cursor: wait;
}

Simple drop down css menu

simple drop down css menu example

In this post I describe that how we can create drop down menu using CSS3 and html ui li tag.

Below is the code for html file.

<ul>
	<li><a href=”index.php”>Link</a>
	<ul>
		<li><a href=”index.php”>Sub Link</a></li>
		<li><a href=”index.php”>Sub Link</a></li>
	</ul>
	</li>
</ul>

In CSS put this code for simple drop down menu.

.vertical-nav {
height:auto;
list-style:none;
margin: 20px 0 0 0;
}
.vertical-nav li {
height: 25px;
margin: 0;
padding: 5px 0;
background-color: #666;
border: none;
text-align: center;
display: inline-block;
float: left;
min-width: 125px;  /******* MODIFIED ********/
}
.vertical-nav li:hover {
background-color:#f36f25;
color:#FFFFFF;
}
.vertical-nav li a {
font-family:Calibri, Arial;
font-size:18px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
}
.vertical-nav li.current {
background-color:#F36F25;
}
.vertical-nav li.current a {
color:#FFFFFF;
}
vertical-nav ul li ul {
display:none;
list-style-type:none;
width:125px;
padding:0px;
margin-top:3px;
margin-left:-5px;
}
vertical-nav ul li:hover ul {
display:block;
}
vertical-nav ul li:hover ul li {
background-color:#555555;
width:125px;
height:30px;
display:inline-block;
}
vertical-nav ul li ul li:hover {
background-color:#333333;
}
vertical-nav ul li ul li a {
color:#FFF;
text-decoration:underline;
}
vertical-nav ul li ul li a:hover {
text-decoration:none;
}
.vertical-nav li ul {
display: none;
margin-top: 6px;
padding: 0;
}
.vertical-nav li:hover ul {
display: block;
}
.sub-menu li
{
clear: both;
}