Category Archives: HTML

WordPress Tips: How to remove the extra space between LI elements from wp_nav_menu

Posted on March 19, 2013 by
No comments

Here is the snippet of code I use to remove the extra space that WordPress adds to the end of <li> elements when you use wp_nav_menu to call in a menu:

<?php $custommenu = wp_nav_menu ( array (
               'menu'            => 'my-custom-menu',
		'container'	=> '',
                'container_id'    => '',
                'menu_class'      => '',
                'menu_id'         => '',
                'echo'            => 0
 ) );
$custommenu = str_replace("\n", "", $custommenu);
$custommenu = str_replace("\r", "", $custommenu);
echo $custommenu;
?>


 

					


				

			Categories:  HTML, PHP, WordPress | Tags: , , , 		

		
			
			
		
	


	
	

	


		
Javascript Trick: Add a class or ID to an HTML element on hover


				

			
Posted on November 11, 2012 by 

			
2 comments

			

		

		
		

						


Here is the line of code you can use to add a class or ID to an element in your webpage when a user hovers over it (for example: if you want to add a class called “active” to an li element with a class called “top-nav” in the div called “menu” when a user hovers over it):


<script>


	$('#menu li').hover (
	function(){ $('.top-nav').addClass('active')},
	function() {$('.top-nav').removeClass('active')}
	)
</script>

					


				

			Categories:  CSS, HTML, Javascript | Tags: , , , , , 		

		
			
			
		
	


	
	

	


		
PHP Tips: How to convert underscores to spaces in emailed contact forms


				

			
Posted on November 11, 2012 by 

			
No comments

			

		

		
		

						


I was recently building a PHP contact form and ran into the issue where the field names I was using in my HTML form which we were more than one word long (i.e.: “First Name”) were being emailed with underscores in place of the spaces (i.e.: “First_Name”). The PHP file I was processing my form with was replacing the spaces with underscores. Which was necessary for processing the form, BUT – I needed to convert those underscores back to spaces when the contact form data was emailed for usability purposes.


Here is the simple line of code that I added to my PHP file:


$msg = str_replace("_"," ", $msg);


Where $msg was part of my mail function:


 mail($to, $subject, $msg, $headers)


And had already been defined:


  $msg = "User message: \n\n";
          foreach($this->fields as $key => $field)
                $msg .= "$key:  $field \n";


I added the first line of code (which used the str_replace function) right after the code which defined $msg.


You will want to replace the variable $msg in the code above with the name of the variable you are using for the body of the email in your mail function.



					


				

			Categories:  HTML, PHP, Random | Tags: , , , , , , 		

		
			
			
		
	


	
	

	


		
CSS: Use a custom image instead of bullet points for unordered lists


				

			
Posted on October 15, 2012 by 

			
No comments

			

		

		
		

						


Here is the line of code I use when I want to use a custom image instead of bullet points in unordered lists:


 


li { 
background:url(images/checkmark.jpg);
background-repeat:no-repeat;
background-size:20px 20px;
list-style-type:none;
padding-left:25px;
}


 


Simply replace the image URL in the code with the correct path to your image, adjust the width, height and padding, and you will be good to go :) 


Here is an example of an unordered list that uses an image of a checkmark in place of the normal bullet points:



					


				

			Categories:  CSS, HTML | Tags: , , , , , , 		

		
			
			
		
	


	
	

	


		
CSS Tricks: Removing the horizontal scrollbar from your divs


				

			
Posted on August 21, 2012 by 

			
No comments

			

		

		
		

						


Here is the simple CSS code I use to hide horizontal scrollbars from my divs:


overflow-x: hidden;


You can, of course, also use this to hide vertical scrollbars, should you need or want to:


overflow-y: hidden;


 

					


				

			Categories:  CSS, HTML | Tags: , , , , 		

		
			
			
		
	


	
	

	


		
CSS Tricks: Custom styling for your scrollbars


				

			
Posted on August 21, 2012 by 

			
No comments

			

		

		
		

						


Here is the simple code I use to style scrollbars in a web page. Simply add this code to your stylesheet:


::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 8px;
   background:#A020F0;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  background:#fff;
}


And customize it to fit the design that you want!

					


				

			Categories:  CSS, HTML | Tags: , , , , , 		

		
			
			
		
	


	
	
	
 
				

			
Previous Entries