Category Archives: CSS

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: , , , , ,

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: , , , , ,

WordPress Tricks: Add a div or other element to one specific page or page type

Posted on June 7, 2012 by
3 comments

 

Here is the code I use to add a div or image or other element to just one page or category page of my WordPress sites:

This code will add a div with the id “featured_content” only on the home page:

<?php if ( is_home() ) { ?>
<div id="featured_content">
&nbsp;
</div>
<?php } ?>

 

This code would add a div with the id “featured_recipe” to all posts in the category “recipes.”:

<?php if ( is_category('recipes') ) { ?>
<div id="featured_recipe">
&nbsp;
</div>
<?php } ?>

 

This code would exclude “myimage.jpg” only on the Contact page:

<?php if ( !is_page('contact') ) { ?>
<img src="myimage.jpg">
<?php } ?>

 

As you can see, there are many uses and ways implementations of this code. Let me know if you have any questions or need further assistance.

Categories: CSS, PHP, Random, WordPress | Tags: , , , , , , ,

WordPress Tricks: How to fix the issue of YouTube videos appearing on top of other content

Posted on May 1, 2012 by
No comments

Here is the code I use to make sure the embedded YouTube videos on a website don’t appear on top of other content (for example: drop down menus):

<object width='400' height='350'> 
    <param name='movie' value='http://www.youtube.com/YOURVIDEOLINK'> 
    <param name='type' value='application/x-shockwave-flash'> 
    <param name='allowfullscreen' value='true'> 
    <param name='allowscriptaccess' value='always'> 
    <param name="wmode" value="opaque" />
    <embed width='400' height='350'
            src='http://www.youtube.com/YOURVDIDEOLINK'
            type='application/x-shockwave-flash'
            allowfullscreen='true'
            allowscriptaccess='always'
            wmode="opaque"
    ></embed> 
    </object>

The areas of code highlighted in red above are what solve the overlapping/z-index problem, so if you already have your video embedded on your site, simply add those sections in the right place in your code and that should solve the issue.

NOTE: I found this solution at http://australiansearchengine.wordpress.com/2010/06/19/youtube-video-css-z-index/

Categories: CSS, HTML, Random | Tags: , , , ,
Previous Entries