WpFunc » css http://www.wpfunc.com Awesome, Quick, Simple WordPress Functions! Fri, 09 Jul 2010 09:05:32 +0000 en hourly 1 http://wordpress.org/?v=abc Buble Tooltips! http://www.wpfunc.com/wordpress/buble-tooltips.html http://www.wpfunc.com/wordpress/buble-tooltips.html#comments Fri, 15 Jan 2010 18:18:31 +0000 KaiseRCrazY http://www.wpfunc.com/?p=366
Related posts:
  1. Build a Top Sliding Login Panel
  2. Make Tabs for your Sidebar!
  3. Highlight the Searched Text!
]]> You can use this tooltips with your WordPress Blog! Very simple and collect href and href’s title areas for write bubles. This tooltip script has a verysimple, very nice code and easy install&use! Let’s Begin!

Here is the code;

This script have a nice coding. You add a javascript file into header.php with a simple code. This javascript calls the content area and class and added tooltip to every link!

1. Add some code into header.php

<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips()};
</script>

Add this code before the wp_head tag. Also you define an id for the special tooltip area. For an example i write “content” into enable Tooltips area. But in fact i use this function in my Turkish blog site with a special area. The social bookmarks&follow area. Here is the some pictures from there. If you want to visit and test the tooltip click here. There an example with special area. You have to select your div id’s Go to next step!

<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips("social")};
</script>

2. Add this css code into your style.css

.tooltip{
width: 200px; color:#000;
font:lighter 11px/1.3 Arial,sans-serif;
text-decoration:none;text-align:center}

.tooltip span.top{padding: 30px 8px 0;
    background: url(bt.gif) no-repeat top}

.tooltip b.bottom{padding:3px 8px 15px;color: #548912;
    background: url(bt.gif) no-repeat bottom}

That’s all now upload this files and .js and bt.gif image. Also you can download this tooltip codes from this post! The original post!
 Note: There is a file embedded within this post, please visit this post to download the file.

del.icio.usDiggFacebookFriendFeedRedditStumbleUponTechnoratiPDFPrint

Related posts:

  1. Build a Top Sliding Login Panel
  2. Make Tabs for your Sidebar!
  3. Highlight the Searched Text!

]]> http://www.wpfunc.com/wordpress/buble-tooltips.html/feed 0 Create Custom Date Butons! http://www.wpfunc.com/wordpress/create-custom-date-butons.html http://www.wpfunc.com/wordpress/create-custom-date-butons.html#comments Sun, 03 Jan 2010 18:42:10 +0000 KaiseRCrazY http://www.wpfunc.com/?p=355
Related posts:
  1. Add Social Bookmarks Bar into your Blog!
  2. Build a Top Sliding Login Panel
  3. Add an expration date for posts!
]]> Create your own date buttons. This is a simple div class and css style. Choose your background image and read this article. Let’s begin…

Here is the code;

Firstly create a div area for this. After that we sill make changes.

Code;

<div class=”post-date”>
<div class=”month”><?php the_time(’M') ?></div>
<div class=”day”><?php the_time(’d') ?></div>
</div>

The Template Image

CSS Style;

.post-date{
float: left;
display: inline;
margin: 0 10px 0 0;
background: url(images/date_button_template.gif) no-repeat;
}

Final :)


Use this code and the oıther on your theme. Have a nice day!

del.icio.usDiggFacebookFriendFeedRedditStumbleUponTechnoratiPDFPrint

Related posts:

  1. Add Social Bookmarks Bar into your Blog!
  2. Build a Top Sliding Login Panel
  3. Add an expration date for posts!

]]> http://www.wpfunc.com/wordpress/create-custom-date-butons.html/feed 0 Detect User Browser And Apply A StyleSheet http://www.wpfunc.com/wordpress/detect-user-browser-and-apply-a-stylesheet.html http://www.wpfunc.com/wordpress/detect-user-browser-and-apply-a-stylesheet.html#comments Tue, 15 Sep 2009 12:49:38 +0000 KaiseRCrazY http://www.wpfunc.com/?p=168
Related posts:
  1. Small Security Hole in WordPress!
  2. Udegbunam Asked “How i hide my content from IE6 Users?”
  3. How to Add Author Name to Author Archive
]]> You can detect user/visitors browser type and you can apply browser-base css styleshet for your theme. That’s siple and very useful. Firstly you have add this code below to your theme’s function.php. Let’s Begin…

We will change our functions.php. If you don’t know about WordPress coding or PHP dont touch this file. And Make backup if you know about WP and PHP!

Her is the code;

<?php
add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

if($is_lynx) $classes[] = 'lynx';
elseif($is_gecko) $classes[] = 'gecko';
elseif($is_opera) $classes[] = 'opera';
elseif($is_NS4) $classes[] = 'ns4';
elseif($is_safari) $classes[] = 'safari';
elseif($is_chrome) $classes[] = 'chrome';
elseif($is_IE) $classes[] = 'ie';
else $classes[] = 'unknown';

if($is_iphone) $classes[] = 'iphone';
return $classes;
}
?>

After that you can save and upload to your fileserver. And you can create for all browser-base css files. And you can use this code with your body class like the example;

<body class="home blog logged-in safari">

That’s all! Have a nice day!

del.icio.usDiggFacebookFriendFeedRedditStumbleUponTechnoratiPDFPrint

Related posts:

  1. Small Security Hole in WordPress!
  2. Udegbunam Asked “How i hide my content from IE6 Users?”
  3. How to Add Author Name to Author Archive

]]> http://www.wpfunc.com/wordpress/detect-user-browser-and-apply-a-stylesheet.html/feed 0 First Image on My Theme! My New Logo. http://www.wpfunc.com/general/first-image-on-my-theme-my-new-logo.html http://www.wpfunc.com/general/first-image-on-my-theme-my-new-logo.html#comments Sat, 25 Jul 2009 12:59:04 +0000 KaiseRCrazY http://www.wpfunc.com/?p=127
Related posts:
  1. Best Of 2009!
  2. Show Your Last Twitter Update Without a Plugin
  3. Happy New Year!
]]> Hey buddies. This isn’t a WordPress function. This one is about my theme. I use NeoEase‘s Blocks Theme on WPFunc. This theme powered full css and there is no image out of gravatar. I only add a logo (i think looks better now) and Donate button. There are 3 different image on this theme. I am so happy now. Thanks for your trackbacks, twitter follows and comments. Have a nice day!

del.icio.usDiggFacebookFriendFeedRedditStumbleUponTechnoratiPDFPrint

Related posts:

  1. Best Of 2009!
  2. Show Your Last Twitter Update Without a Plugin
  3. Happy New Year!

]]> http://www.wpfunc.com/general/first-image-on-my-theme-my-new-logo.html/feed 2