WpFunc » css http://wpfunc.com Awesome, Quick, Simple WordPress Functions! Thu, 01 Dec 2011 01:17:01 +0000 en hourly 1 http://wordpress.org/?v= Buble Tooltips! http://wpfunc.com/wordpress/buble-tooltips.html http://wpfunc.com/wordpress/buble-tooltips.html#comments Fri, 15 Jan 2010 18:18:31 +0000 http://www.wpfunc.com/?p=366 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.

]]> http://wpfunc.com/wordpress/buble-tooltips.html/feed 0 Create Custom Date Butons! http://wpfunc.com/wordpress/create-custom-date-butons.html http://wpfunc.com/wordpress/create-custom-date-butons.html#comments Sun, 03 Jan 2010 18:42:10 +0000 http://www.wpfunc.com/?p=355 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!

]]> http://wpfunc.com/wordpress/create-custom-date-butons.html/feed 0 Detect User Browser And Apply A StyleSheet http://wpfunc.com/wordpress/detect-user-browser-and-apply-a-stylesheet.html http://wpfunc.com/wordpress/detect-user-browser-and-apply-a-stylesheet.html#comments Tue, 15 Sep 2009 12:49:38 +0000 http://www.wpfunc.com/?p=168 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!

]]> http://wpfunc.com/wordpress/detect-user-browser-and-apply-a-stylesheet.html/feed 0 First Image on My Theme! My New Logo. http://wpfunc.com/general/first-image-on-my-theme-my-new-logo.html http://wpfunc.com/general/first-image-on-my-theme-my-new-logo.html#comments Sat, 25 Jul 2009 12:59:04 +0000 http://www.wpfunc.com/?p=127 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!

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