Posts

Showing posts from 2011

Set limit wp_list_pages

<?php $numberPage = 5; $pages = wp_list_pages("echo=0&title_li="); $pages_arr = explode("\n", $pages); for($i=0;$i<$numberPage;$i++){ echo $pages_arr[$i]; } ?>

How to disable the WordPress Admin Bar

Image
WordPress 3.1 introduces a new feature called the Admin bar. A lot of people will be wanting to disable this when WordPress 3.1 comes out. But since some people might want to disable the admin bar for everyone, I thought I'd show you a  ways to quickly disable the WordPress admin bar 1. Login in admin page then click on All Users under user box 2. Edit all user that you want to disable then Un-Check on "When view site"

How to Show Home Link In wp_nav_menu

WordPress wp_nav_menu function is really helpful to display a custom navigation menus in your wordpress theme. The custom menu can be set in the admin area, easily, with a drag-and-drop interface You can use the code below as the solution: function my_page_menu_args( $args ) { $args['show_home'] = true; return $args; } add_filter( 'wp_page_menu_args', 'my_page_menu_args' ); Put the code in the theme function.php

Master Page feature is missing under Look and Feel section in Sharepoint 2010

Image
By default SharePoint Server 2010 (standard and enterprise) you need you activate SharePoint Server Publishing Infrastructure under Site collection features and SharePoint Server Publishing under Manage Site Feature Master Page feature under Look and Feel section. The Master Page link will appear when you have these 2 features activated 1. Site Actions -> Site Settings ->Site Collection Administration -> Site collection features 1. Site Actions -> Site Settings -> Site Actions  -> Manage site features

Hide First Tab in SharePoint 2010 Navigation

Image
 In SharePoint 2010 when you create new site or sub-sites it will show Home in first tab . this post will show how to hide first tab. Here is the original code of top navigation control: <SharePoint:AspMenu   ID="TopNavigationMenuV4"   Runat="server"   EnableViewState="false"   DataSourceID="topSiteMap"   AccessKey="<%$Resources:wss,navigation_accesskey%>"   UseSimpleRendering="true"   UseSeparateCss="false"   Orientation="Horizontal"   StaticDisplayLevels="2"   MaximumDynamicDisplayLevels="1"   SkipLinkText=""   CssClass="s4-tn"/> <SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">     <Template_Controls>         <asp:SiteMapDataSource           ShowStartingNode="False"   

HTML5 Game Magician - Fairy Rescue

Image
Happy to announce that we are amongst the finalists. http://www.relfind.com/game/magician.html

Opacity image in CSS3

Image
1. HTML Code <section class="social"> <a href="#"><img alt="Share to Facebook" src="images/social-facebook.png"></a> <a href="#"><img alt="Share to Twitter" src="images/social-twitter.png"></a> <a href="#"><img alt="Digg This" src="images/social-digg.png"></a> <a href="#"><img alt="Stumble It" src="images/social-stumble-upon.png"></a> <a href="#"><img alt="Share to Reddit" src="images/social-reddit.png"></a> <a href="#"><img alt="Share to Delicious" src="images/social-delicious.png"></a> <a href="#"><img alt="Technorati" src="images/social-technorati.png"></a> <a href="#"><img alt="LinkedIn" src=

Scale image in CSS3

Image
1. HTML Code <section class="social-zoom"> <a href="#"><img alt="Share to Facebook" src="images/social-facebook.png"></a> <a href="#"><img alt="Share to Twitter" src="images/social-twitter.png"></a> <a href="#"><img alt="Digg This" src="images/social-digg.png"></a> <a href="#"><img alt="Stumble It" src="images/social-stumble-upon.png"></a> <a href="#"><img alt="Share to Reddit" src="images/social-reddit.png"></a> <a href="#"><img alt="Share to Delicious" src="images/social-delicious.png"></a> <a href="#"><img alt="Technorati" src="images/social-technorati.png"></a> <a href="#"><img alt="LinkedIn" s

Rotate image in CSS3

Image
1. HTML Code <section class="social"> <a href="#"><img alt="Share to Facebook" src="images/social-facebook.png"></a> <a href="#"><img alt="Share to Twitter" src="images/social-twitter.png"></a> <a href="#"><img alt="Digg This" src="images/social-digg.png"></a> <a href="#"><img alt="Stumble It" src="images/social-stumble-upon.png"></a> <a href="#"><img alt="Share to Reddit" src="images/social-reddit.png"></a> <a href="#"><img alt="Share to Delicious" src="images/social-delicious.png"></a> <a href="#"><img alt="Technorati" src="images/social-technorati.png"></a> <a href="#"><img alt="LinkedIn" src=&q

Google Plus Photo Album

Image
1. HTML for Google Plus Photo Album <div id="page_wrap"> <div class="google-plus" style="margin-left:490px"> <img class="album" src="photos/2.jpg"> <img class="album" src="photos/3.jpg"> <img class="album" src="photos/1.jpg"> </div> <div class="google-plus" style="margin-left:200px"> <img class="album" src="photos/4.jpg"> <img class="album" src="photos/5.jpg"> <img class="album" src="photos/6.jpg"> </div> <div class="single-photo"> <a href="#pic1" title="Photo"><img src="photos/3.jpg" alt="picture"> </div> 2. CSS for Google Plus Photo Album <style type="text/css"> .single-photo { backgrou

blockqoute with before in css3

Create a simple CSS3 folded-corner effect without images. It works well in all modern browsers and is best suited to designs with simple color backgrounds. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim. <style type="text/css"> blockquote.qoute { font: 14px/28px arial; background: #97C02F; color: #FFFFFF; margin: 2em auto; overflow: hidden; padding: 1em 1.5em; position: relative; width: 480px; box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 20px 80px -20px rgba(0, 0, 200, 0.3) inset; }

blockqoute with first-letter in css3

This CSS3 tutorial will show you how to create Blockqoute with first-letter. First apply open quote background on Blockquote then apply close quote background to the first-letter. Cras vestibulum ante vel tellus feugiat in convallis purus iaculis. Donec eu auctor felis. Nullam gravida libero vitae dui varius id pretium felis vulputate. 1. CSS <style type="text/css"> blockquote.qoute { font: 14px/28px arial; width: 400px; background: url(close-quote.gif) no-repeat right bottom; text-indent: -18px; } blockquote.qoute:first-letter { background: url(open-quote.gif) no-repeat left top; padding-left: 18px; } </style> 2. HTML <blockquote class="qoute"> Cras vestibulum ante vel tellus feugiat in convallis purus iaculis. Donec eu auctor felis. Nullam gravida libero vitae dui varius id pretium felis vulputate.</blockquote>

CSS Resources

W3Schools offers a comprehensive CSS3 reference: http://w3schools.com/css3/default.asp CSS3.Info contains tons of great articles on the newest CSS3 stuff: http://www.css3.info/ Pixel2Life offers a ton of tutorials: http://www.pixel2life.com/tutorials/css_stylesheets/ Check out Good-Tutorials for more CSS tutorials: http://www.good-tutorials.com/tutorials/css NetTuts+ has a lot of great articles and tutorials on CSS3: http://net.tutsplus.com/?s=css3

Change Text Selection highlight Color in Css3

::selection { background: #ffb7b7; /* Safari */ } ::-moz-selection { background: #ffb7b7; /* Firefox */ }

Rounded Corners in CSS3

Supporting Browsers: Apple Safari 3, Firefox 1, Google Chrome 1 CSS3 Mozilla WebKit border- top-right-radius -moz-border- radius-topright -webkit-border- top-right-radius border- bottom-right-radius -moz-border- radius-bottomright -webkit-border- bottom-right-radius border- bottom-left-radius -moz-border- radius-bottomleft -webkit-border- bottom-left-radius border- top-left-radius -moz-border- radius-topleft -webkit-border- top-left-radius border- radius -moz-border- radius -webkit-border- radius Here is example for Rounded Corner in CSS3 <div class="content-box"> <h2>Four Corners</h2> <p>This box has all corners rounded.</p> </div> <style type="text/css"> .content-box { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #AFAFAF; border-radius: 5px 5px 5px 5px; height: 200px; margin: 10px auto 0; width: 600px; } </style>

Multiple Backgrounds with CSS3

CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list. Browser support for multiple backgrounds is relatively widespread with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature. Here’s a basic example: This box has two background images, the first a balloon (aligned to the top and center) and the second a grass and sky background (aligned to the top-left corner). <div class="examplemultiplebackgrounds"> <p>This box has two background images, the first a balloon (aligned to the top and center) and the second a grass and sky background (aligned to the top-left corner).</p> </div> <style type="text/css"> div.examplemultiplebackgrounds { width: 446px; height: 395px; background-image: url(images/balloon-orange.png), url(images/landscape.jpg); background-position:

Google Apps supports the following browsers

Beginning August 1, 2011, we’ll support the current and previous major releases of Chrome, Firefox, Internet Explorer and Safari on a rolling basis. Each time a new version is released, we’ll begin supporting that version and stop supporting the third-oldest version. Learn more about supported browsers for Google Apps in the Google blog post .  

How To Add Animated Favicon In Blogger?

Image
Favicon is actually the icon that appears next to your Website URL in the browser address bar. A favicon is usually your blog logo. There are many free services that help to create favicons for you but most of these services use still images. I have used an animated favicon for my blog as you can see in your address bar. It actually consists of a logo and then my blog title as text. The image and text together makes a more beautiful combination. So lets jump at the tutorial and create an attractive cute favicon for your blog, Go To favicongenerator And just at the bottom of the page upload your blog logo or any icon you wish to make as your favicon and also add your blog title as the scrolling text. You will find all the help at favicongenerator     3.  Hit the Generate Favicon Button and you will be taken to this page, Here you will see many images just right click the animated one and save it to your computer.      4. Now upload the image to your Picasa album by reading