Category Archives: CSS

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

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/

Including retweets in your custom Twitter feeds

Here are the codes I use to create a custom Twitter feed for my websites which includes retweets.

First you will want to insert the Javascript that makes the whole thing work. Copy and paste this line of code into your website, preferably just before the closing <body> tag:

<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=thelibzter&include_rts=1&callback=twitterCallback2&count=6" type="text/javascript"></script>

Replace the words THELIBZTER in the above example with your own Twitter username. Change the number 4 after “count” to the number of tweets that you want to display.

Next, copy and paste the following html into the web page where you want the Twitter widget to display:

<div id="twitter">
<div id="twitter_t"></div>
<div id="twitter_m">
 <div id="twitter_container">
 <ul id="twitter_update_list"></ul>
 </div>
</div>
<div id="twitter_b"></div>
</div>

And, finally, copy and paste the following CSS into your website’s stylesheet:

#twitter {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:430px;
border:1px solid #c9c9c9;
}
#twitter_t {
width:405px;
height: 44px;
background:#c68aeb url(yourimagehere);
color:#fff;
text-shadow:.5px .5px #333;
font-size:18px;
font-family:Candara;
padding-top:20px;
padding-left:25px;
}
#twitter_m {
width: 400px;
padding: 0 15px;
background:#f7effc;
}
#twitter_container {
min-height:45px;
height:auto !important;
height:40px;
padding-bottom:5px;
padding-top:5px;
}
#twitter_update_list {
width: 413px;
padding: 0;
overflow: hidden;
font-family: Georgia;
font-size: 14px;
font-style: italic;
color: #31353d;
line-height: 16px;
font-weight:bold;
margin-left:-13px;
}
#twitter_update_list li {
width: 400px;
list-style: none;
padding:15px;
border-bottom: dotted 1px #ccc;
}
#twitter_update_list li a {
color:#631891;
text-decoration: none;
}
#twitter_update_list li a:hover {
color: #31353d;
}
#twitter_b {
width: 430px;
height: 29px;
background:#c68aeb url(yourimagehere);
}

Of course, you will probably want to edit the CSS codes for your Twitter widget.

And that, my friends, is all it takes to create a custom Twitter widget for your website! :) Have fun, and let me know if you run into any issues.

FURTHER READING:

If you want to remove the time stamp from the tweets in your custom Twitter feed, please check out this post  – http://icode4you.net/creating-a-custom-twitter-feed-how-to-remove-the-time-stamp-from-tweets.

Make sure you also check out another post I wrote that has the styles for several different custom Twitter widgets that are all ready to incorporate into your website!

And here is a link to a post that provides the codes and instructions on how to create a Twitter feed of the search results for a certain term.

CSS Tricks: How to make sure an image is always centered inside its div

Here is the code I use to keep an image always centered inside its containing div, regardless of browser width or resizing:

<img src="yourimage.jpg" style="width:100%;margin:0 auto;">

CSS Tricks: How to use a semi-transparent background in a div without affecting the text

Here is the simple way to add a semi-transparent background to a div without affecting the text elements inside the div.

Instead of this code:

background:#555;
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */

Use this:

background-color:rgba(255,0,0,0.5);

If you dont know the rbga value of the hexidecimal color you want to use, you can find it at http://www.color-hex.com/. Just type the hexidecimal value into the box at the top right corner of the page and click “Get color info.”

Take the rgb value  it provides you and put the three numbers into the paranthese in the block of code above. Then simply add the percent of opacity that you want to add to the background (i.e. 0.5 for 50%, 0.8 for 80%, etc.).

Concrete5: How to add a unique body class to individual pages

Here is the easiest way I have found to add a unique body class to individual pages in a Concrete5 site.

First, in your dashboard go to “Pages and Themes,”then “Attributes,” and add a custom attribute (text field) called bodyclass.

Next, open your theme’s header.php file and add:

class="<?php echo $c->getCollectionAttributeValue('bodyclass')?>"

to your < body > tag, so it reads like this:

<body class="<?php echo $c->getCollectionAttributeValue('bodyclass')?>">

For any page that you want to apply a custom class to, simply add the Body Class custom attribute and type whatever class name you want into the Body Class Custom Attribute text field. When you save your changes, your opening < body > tag will now look like:

<body class="red">

CSS Trick: Resize background image to fit browser window

Here is the neat little block of CSS that I use to resize a background image to fit the size of the browser window the site is being viewed in:

body {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Let me know if you have any questions or need help with this! :)