On behalf of Rockstartemplate.com, we wish you a Merry Christmas and a Happy New Year!

The below sample is a simple search box without a folded corner. Our tutorial shows you how to make this search box with folded effect.

Step 1] Create a simple Search Box with Gradient and shadow effect.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

.searchbox {
position:relative;
width:400px;
margin:0px auto;
color:#f2f2f2;
background:#97C02F;
overflow:hidden;
border: solid 0px #d2d2d2;
padding:1em 1.5em;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: -webkit-gradient(linear, left top, left bottom, from(#C7FD3F), to(#638903));
background: -moz-linear-gradient(top,  #C7FD3F,  #638903);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#C7FD3F', endColorstr='#638903');
-ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#C7FD3F', endColorstr='#638903');
}

Here i have used a simple gradient effect with Css3. This effect is compatible with all the browsers. Make this div position relative, such that we can place our corner effect. You can modify the color of the gradient by modifying the start and end color string.

Step 2] Add the folded corner effect into the above div element.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

.searchbox:before {
content:"";
position:absolute;
top:0;right:0;
border-width:0 16px 16px 0;
border-style:solid;
border-color:#fff #fff #658E15 #658E15;
background:#638903;
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
display:block; width:0;
}

This is the best part. We make the Top and Right position to ’0′ and position to be absolute. You can also change the corner of your box by changing the values to bottom:0; and left:0;

If you want to slope the shape the other way modify the border-width:0 16px 16px 0; to border-width:16px 16px 0 0; By doing this we can change the slope of the folded corner.

Now our final search box looks like,

Check out the demo and create your own stylish buttons.

To know more bout CSS3, Click here.

Follow the below steps to install Solr.

Step 1] Download the latest build (http://www.apache.org/dyn/closer.cgi).

Step 2] Stop your Servlet Container.

Step 3] Unzip the Solr files and move the files into Tomcat WEBAPPS Directory.

Then Goto apache-solr-3.1.tar.gz/dist/ directroy
and move the apache-solr.war file into the tomcat webapps directoy.

In Terminal,

1
2
3

<code>cd apache-solr-3.1/dist/
cp apache-solr-3.1/dist/apache-solr-3.1.war Library/Tomcat/webapps/solr.war</code>

Step 4] Also move the solr/conf files to the tomcat directory.
We need to move the /solr/ directory in apache-solr-3.1/example/ into some location(in this case /Library/Tomcat/).

1

<code>cp apache-solr-3.1/example/solr Library/Tomcat/</code>

Step 5] Create solr.xml in /Library/Tomcat/conf/Catalina/localhost
We need to create a solr.xml to specify the path for solr home.

1
2
3
4
5

<code><Context docBase="/Library/tomcat6/webapps/solr.war" debug="0" crossContext="true">
<Environment name="solr/home" type="java.lang.String" value="/Library/tomcat6/solr" override="true"/>
</Context></code>

Step 6] Now set path for Data Directory.

In Library/Tomcat/solr/conf directory edit the Schema.xml file.
and change the path for dataDir

1

<code>  <dataDir>/Library/tomcat6/solr/data</dataDir></code>

Note: If you dont have the folder data in Tomcat/solr, create a empty folder.

Step 7] Start our Tomcat server and goto http://localhost:8080/solr.

If you see the below page.., your install is successful.

If you have any query/comments regarding the Solr installation, please post it here.

This theme is ideal for photographers and designers who wants to showcase their pictures/photos. You can upload and select your post thumbnails, all from the backend of WordPress. All you need to do is to add an thumbnail to your post custom fields with field name “postimage”. Doing so you will get a nice
You can use the templates for your personal website. Use them on your blog, modify them however you like.

Features of this Theme :

• SEO friendly
• 100% Widget support
• Premium Like WordPress Template.
• Ad Optimised for 125 adspot.
• CSS 3 and HTML 5 support.
• Easy Editable Code.
• Stylish Search box

Screenshot :

Preview this Template | Download This Template

We would like to hear from you about this template , and If you like this post subscribe to our Feed .

This collection can be used for free and commercial use. Click here to Download tattoo designs.

Hate writing vendor prefixes for all browsers ? Hate organizing your CSS files ? Hate hard coding the same values every time in the properties field?

Here comes the solution for you guys.

Just by typing this,

1
2
3
4
5
6
7

.banner{
border-radius: 2em;
box-shadow: #f2f2f2 0 0 5px;
}

You can get this,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.banner {
-moz-border-radius: 2em;
-moz-box-shadow: #f2f2f2 0 0 5px;
-webkit-box-shadow: #f2f2f2 0 0 5px;
-webkit-border-radius: 2em;
border-radius: 2em;
box-shadow: #f2f2f2 0 0 5px
}

But HOW ? CSSPrefixer does it for you!

CSS Prefixer turns your ‘Simple code’ into ‘Cross browser supported’ code. This Python Framework will include all the vendor prefixes for all browsers. See an example below,

Want to create a Dynamic Stylesheet with reusable values?
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. Less is a well known CSS Preprocessor application created in PHP. LESS will allow you to specify widely used values in a single place. It’s cool isn’t it ! Lets see some examples below.,

{Courtesy LESSCSS.Org}

You can check the Less code in the above Screen shot. It declares a new reusable color variable, so that, whenever we need to change the color, we can go ahead and change the color value in single place. It makes life easy Lets see another example.,

You can find the list of CSS Preprocessors @ Speed up development time.

Stay tuned for more “Make your life easy” kind of posts

This post might be helpful for a person,
Who is looking for the ways to increase the tone of their skin in the pictures ( to create a display picture for Facebook/Orkut etc.,)

{Or}

Who finds their tone decreases in the picture and wants to maintain their tone in the picture too.

{Or}

Who wants to match their tones with the person near them.
This Paleness might be because of the general hue. May be due to your camera’s flash, which is really bright or really low. It also depends on what makeup you are using.You can switch off your flash, but the picture will become a bit blurry however you will not look pale.

In Photoshop, we have an option to change the tone of the body. Open your picture in Photoshop.

Unlock your picture. Click Open -> Adjustment -> Hue/Saturation.

Change the setting like the below Screen shot,

(The Hue value can be from -4 to -6 and saturation can be from +13 to +17)

See the original picture in the left side and the toned image on the right side,

.

For more Photoshop Tutorial, Click Here !!

MetaTag is a Information about information.., very general definition.

Meta elements are HTML or XHTML elements used to provide structured metadata about a Web page. Such elements must be placed as tags in the head section of an HTML or XHTML document.
Source: en.wikipedia.org/wiki/Metatag

Meta-tags are HTML tags that can be used to identify the below details about the web page you are viewing,

Title
Description
Keywords
Author
Content Language
Refresh
Robots
Distribution and
Revisit

Among the above listed things, few are optional. Let me first put the code and explain. That sounds good right.,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<HEAD>
<br/>
<TITLE>Title of the webpage</TITLE>
<META name="description" content="Describe about your webpage here.">
<META name="keywords" content="Keyword phrases that describe your webpage keywords.">
<br/>
//Add the below tags if you want to Refresh your page after 60sec/redirect to other website after 60 sec.
//<META http-equiv="refresh" content="60">
//<META http-equiv="refresh" content="60;url=http://www.rockstartemplate.com/">
<br/>
<META name="Author" content="Add the Author Information here">
<br/>
//In the below Tag you can specify whether search engines should Index your page or Follow the links in this webpage.
//You can also use NoIndex and Follow.
<META name="robots" content="index,nofollow">
<br/>
//You can specify the level of distribution in the below Tag.
//You can use Global/Local/IU(Internal Use)
<META name="Distribution" content="Global">
<br/>
//The below tag is used to defines the language your webpage uses.
<META HTTP-EQUIV="Content-Language" content="EN">
<br/>
<META name="Revisit-After" content="No of Days after which Search engines needs to revisit your site">
<META name="Abstract" content="Abstract - Overview of your entire webpage goes here">
<META name="Copyright" content="Put your Copyright Statement here">
<META name="Expires" content="Mon, 08 May 2011 10:23:00 GMT">
<br/>
//Inform Searchengine that your site is for General/Restricted/Adult audiences.
<META name= “Rating” content= “General”>
<br/>
</HEAD>

Have a look at it below,

It may look like an Chinese Film title but the actually meaning of this symbol is, “‘The Web Platform’“. Weird isn’t it. W3C also updated the documentation supporting the logo as below,

WHAT DOES THE LOGO REPRESENT?
This logo represents HTML5, the cornerstone for modern Web applications.

The logo is available under a Creative Commons 3.0 license. Hope you have already seen the HTML 5 logos and stickers. If not check the sticker (Inspired me a lot) below.

To visit the logo branding page, click here. You can create your own stunning, customized badge for your blog/site from W3C website. Pick your stickers right now and experience the new power of internet.

What do you think about the new CSS3/HTML5 Logo ??  Share your thoughts.,

]]> http://rockstartemplate.com/misc/happy-new-year-2011/feed/ 1 http://rockstartemplate.com/misc/happy-new-year-2011/ http://feedproxy.google.com/~r/RockstarTemplate/~3/2f9AGiGYBN0/ http://rockstartemplate.com/photography/wallpapers/christmas-wallpapers/#comments Sat, 18 Dec 2010 17:55:39 +0000 Rockstar http://rockstartemplate.com/?p=1106 It’s Christmas time Folks ..! Check out some of the cool wallpapers to decorate your Desktop. Wishing You, Happiness, This Christmas !

Find the desktop wallpapers below. Click on the Picture to enlarge.

Check the preview below for low quality version of the banner background. To download the high resolution banner, CLICK HERE.

Preview :

Only few more days to GO . Enjoy Vacation, Enjoy Christmas !

We have posted few wallpapers of this movie few weeks back, check it here. This is an updated version of the same.

Adding multiple backgrounds is made simple using the multiple background image enhancement in CSS3. As for the CSS2, we specify a Div above another Div in order to get multiple backgrounds. But with the new rules in CSS3, we can easily add multiple backgrounds to a single division in HTML.

We can have any number of layers in CSS3. The number of layers is determined by the number of comma separated values in the  Background property.

For example.,

1
2
3
4
5
6
7
8
9
10
11
12
13

#Multiple
{
border: 2px solid #cccccc;
<strong>background:<span style="color: #993366;">url(image1.gif) center</span>, <span style="color: #000080;">url(image2.gif) center no-repeat</span>;</strong>
height: inherit;
width: inherit;
}

or we can also write like this,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#Multiple
{
border: 2px solid #cccccc;
<strong>background-image: url(image1.gif), url(image2.gif);
background-position: center , center;
background-origin: border-box, content-box;
background-repeat: no-repeat,no-repeat;</strong>
height: inherit;
width: inherit;
}

Refer to the Output below.,

If you look through the code, you can see several background images placed on top of each other.The first image is the one which is closest to the user. The second image is placed behind the first and so on.,

Browsers that support CSS3 multiple backgrounds are Firefox 3.6, Opera 10.5 and Google Chrome 3.5 version. IE uses filters to add multiple backgrounds!

]]> http://rockstartemplate.com/tutorial/multiple-backgrounds-in-css3/feed/ 1 http://rockstartemplate.com/tutorial/multiple-backgrounds-in-css3/ http://feedproxy.google.com/~r/RockstarTemplate/~3/nMUZ20jCA0A/ http://rockstartemplate.com/css-templates/my-business-css-template/#comments Fri, 03 Dec 2010 14:23:57 +0000 Rockstar http://rockstartemplate.com/?p=1060 My Business Template is a free CSS Template from Rockstartemplate.com. This CSS Theme has been released for FREE ! You can use this template for any type of personal or commercial use. All we need is a link back to our site at the bottom of the Template.

My Business template is a 3-column , cross-browser friendly template designed to suit your business needs. This template has been designed to meet WEB 2.0 requirements.

Let us see some of the features of this Template.

* W3C standards compliant.
* Light weighted.
* Professional Image Design.
* DIV tags. [ No Frames..!! ]
* High Clarity Images.
* Easily Editable.
* Free download and can be modified.

Screenshot:

Preview this Template | Download this Template

You can find more CSS themes at http://rockstartemplate.com/category/css-templates/.

Are you looking for a high quality Shrek movie Posters ? Then, you are at the right place. We came up with quite a few pictures from Shrek movie. Find the posters below.,

Before 2 months, I was blogging assiduously ! Rockstartemplate.com attains its best ever Alexa Ranking, 40,000th Rank. I have posted my contents frequently, at-least once or twice a day and develop high quality content, focus on sites like Stumble Upon,Twitter,Digg and building a strong blogger network… like how a normal Blogger will do.;)

After a month, I was bit busy with my design related stuffs, I was designing a template and hardly had time to look after my website. When I saw my site statistics, I was shocked to see my Alexa rank reduced to 150,000. My rank gradually reduced and i couldn’t believe it was my site… I was suffering from Digestive disease… Yep, very hard to digest my rank..!

So the concept is simple. KEEP YOUR SERVERS TICKING., make the most out of the hosting service you use and your Alexa Rank will automatically increase. Content is KING, Blog once or twice a day. Post interesting and relevant content and bookmark the post. Also don’t over post, 1-2 post per day will do. You can see your Alexa rank will increase gradually. Keep posting and keep your Rank intact.

Happy Blogging !!!!

Difference between ShowModalDialog() and window.open() Method:
Return type of Window.open() method is an Object, where as Window.showModalDialog() method return type is a value. If you want to get values in return from your alert box use ShowModalDialog() method and if you don’t want to return any value use window.open() method.

Please Refer to the code and Demo below..,

Sample CODE :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

1] <strong>SampleAlertBox.html :-</strong>

<html>
<title>Custom alert</title>
<script>
function hello(mymsg){

myArray = new Array(mymsg);
mywd=400;
myht=150;
myleft=(document.body.clientWidth - mywd)/2;
mytop=(document.body.clientHeight - myht)/2;

myOpt='scrollbar=no;toolbars=no;menubar=no;location=no;location:no;dialogTop:'+mytop+'px;dialogLeft:'+myleft+'px;dialogWidth:'+mywd+'px;dialogHeight:'+myht+'px;center:no;help:no;resizable:no;status:no';

var myObj = new Object();
myObj.mess = mymsg;
retVal = window.showModalDialog("customalert.html",myObj,myOpt);
document.getElementById("mytext").value = retVal;
}

</script>
<body>
<center>
<br/>
<input id ="mytext" type="text" value="Return Value from Show Dialog">
<br/><br/>
<input type ="button" value="Click Here" onclick="hello('This is a Sample Test Msg');"/>
</center>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

2] <strong>customalert.html :-</strong>

<html>
<head>
<title>Custom Alert in javascript</title>
<script>

function createalert(){

var obj = window.dialogArguments;
mymessage = obj.mess;
document.write("<div style='margin:0px auto;'>");
document.write("<div style='float:left;margin:0px auto;width:60px;padding:10px;'>");
document.write("<img src='icon.png'>");
document.write("</div><div style='margin:0px auto;padding-top:5px;padding-left:80px;padding-right:5px;'>");
document.write("<p>"+mymessage+"</p>");
document.write("</div></div>");
document.write("<div>");
document.write("<p><input style='float:right;width:85px;height:27px;' type='button' value='OK' onClick='window.returnValue=true;window.close();'><input style='float:right;width:85px;height:27px;' type='button' value='CANCEL' onClick='window.returnValue = false;window.close();'></p>");
document.write("</div>");
}

</script>
</head>
<body onload="createalert()"></body>
</html>

Click here to see the demo

If you don’t want to return a value from your alert box(like we did in the above example)., use window.open() method instead of window.showModalDialog() method.

Buttons are one of those visual elements, which will create an amazing look to ones website. We have hand-picked some of the most beautiful and attractive Buttons, one can use to bring amazing atmosphere for the website.

Let’s take a look at some great button designs below.,

Screenshot:

CLICK HERE to download the PSD version of the Buttons.

You can use this template for any type of personal or commercial use ,  but with a link back to our website in any ways. This Css template can be modified very easily. See the features below.,

Features of Clean Art Theme :
* W3C standards compliant.
* Beautiful Image Design.
* Light weighted.
* DIV tags.
* High Clarity Images.
* Easily Editable.
* Free download and can be modified.

Screenshot :

Preview this Template | Download this Template

You can find more Css themes at http://rockstartemplate.com/category/css-templates/. Stay tuned for more updates..,

Oops I’m giving too much of info about the movie . Find some snaps took in this movie. Click the pictures to enlarge.

So What is Social Bookmarking ?

Social Bookmarks is a service focuses on user generated content and the user base. Its something like a Super market where you ill get everything in one place.

The idea of social bookmarking is very much simple and it is totally free of charge and will help your sites conquer the search engines with ease!

Is social Bookmarking similar to Link Directories ?

Not Exactly !! But some thing similar to that kind. Social Bookmarking sites literally allow anyone to create a free account and allows the users to submit their favorite links. But the social bookmarking site will have the full control over what links were most popular and visible to everyone. The concept is Simple “share your favorite sites online”.

Now comes the big question, How to Make Traffic with these social Bookmarking websites ? or rather we can ask like, Which social bookmarking site will get you more traffic ? Find answers for all your questions below [One by One ].,

1] Twitter.Com :

Twitter may be a newbie, but it’s a Biggie..! Twitter is very simple. All we need to do is to create a new and attractive profile and find searching people from similar area of interest.

Twitter asks “what’s happening” and makes the answer spread across the globe to millions, immediately.

Here are some 5 ways to gain Popularity in Twitter,

• Create a attractive Profile : Everyone comes to your profile page by searching similar categories . So your Profile page must be attractive enough to kindle them to click your blog links.

• Be Active : When someone sends you a comment or a tweet, respond to them asap. The more you are active the more visitors you get.

• Gain more Followers : The following sites will help you in getting the same Twollow, Hummingbird or Tweet Adder.

• Find People who have same area of interest : It’s Simple, Form a Network at Twitter and grow your business.

• Dont Forget to display your RSS feed in Twitter page. Use Twitterfeed.com site for this purpose.

2] Digg.Com :

Digg is a yet another social bookmarking site made for people to discover and share contents online. Digg is similar to that of twitter where you can share your links and stories.

First we need to get cleared that the visitors from Digg wont come for the next time, they wont click your ads, they wont subscribe your site. All they will do is bring you traffic, they will read what they actually needed from your blog, and nothing else. Many of them won’t even stay there for 10  seconds.

All we have to do to bring traffic from Digg is to be active and give popular tags in Digg Topics. If these two things are good, you can expect some huge crowd to visit your site daily.

So how to get more traffic in diggs?

• Digg has cool feature called as ‘hot list’ on its homepage,and it’s all about how many people click or “Digg” the site. So the first thing you should remember is to get as many Diggs as possible.

• Put attractive captions.  Your caption should be in such a way that it should make Digg users to click on it.

• Search similar kind of blog and start forming a network. You Digg their site and vice versa. This will help your blog to gain more user visibility.

Continued.. Stay tuned for more updates…

Here we have compiled a huge list of some fascinating, outstanding and beautifully designed game Wallpapers[You can also call these as Game Posters ]. Rather you can see this collection as New and Fresh set of Gaming Wallpapers. Grab these wallpapers and decorate your Desktop with the same.

Click on the Pictures To Enlarge .. !!

So What can you find below ?
Wallpaper about nature or digital images ? or wallpaper about Creativity or Photography ? Let me tell you one thing that you can find every thing out here ..! Empower your desktop with the below wallpapers. Click on the Images to Enlarge.

Yet another contest from Rockstar Template. The theme is very simple, Comment , Participate and Win. Hammer your name in our Top Commentators spot and win 100$. This contest ends on April 15 2010 and the top commentator will get 75$ followed by 25$ for second place. You can see the Top commentator section in our homepage.

You can see the below Top commentator Plug-in in our Homepage.

Whats the Prize ?

1] For the First Place at the end of the contest, 75 $

2] For the Second Place at the end of the contest, 25$

[Payment will be done only in PayPal]

Contest Start Date : March’ 2010

Contest End Date : April 15′ 2010

So what are you waiting for ? Say you’re gonna start right now..!!

Stop using Photoshop  !!   Use CSS 3.0  !!

One of the most coolest feature in CSS 3.0 is the Box shadow property. This gives you an awesome look for all the borders you design. Let us see the syntax first.

Syntax :
{
box-shadow: <horizontal> <vertical> <blur> <color>
}

It looks simple but powerful. The first field in the property specifies the horizontal shadow, continued by the vertical shadow. The third field in the property specifies the blur ratio, followed by the color of the shadow.

Cross Browser Compatibility :

• Firefox 3.5 implements the feature as -moz-box-shadow.
• Safari Browser implementing the feature as -webkit-box-shadow.
• Microsoft Internet Explorer have DropShadow filter.
• Opera Browser users are unlucky to view this shadow property.

Let us see some of the examples of Box-Shadow property.

Sample 1: Without Blur Effect

Sample 2: With Blur Effect

Sample 3: With Heavy Blur Effect

Sample 4: With Inner Shadow Effect

Sample 5: With Rounded Border shadow Effect

You can see this feature working only in Safari 3+ and Firefox 3.1 Alpha. Other browser users wont see this feature.

So no more Jpeg/Gif/Png for Border Shadows from now. Start using CSS3.0.

Mia Wasikowska plays the role of Alice, along with Johnny Depp who acted as The Mad Hatter. This movie will be a visual treat for all fantasy lovers out there. This movie is scheduled for release on March 2010.

Below you can find the pictures/wallpapers from this fantasy movie.

Our designers designed this new template for our site . Comment about this new design.

1.Fill the background color as black[#000000].

2.create a circle and fill it with white color[#ffffff].

3.Select the circle using magic wand and select the transform to scale as small.

4.Now fill it with brown color radial gradient.

5. Now use the lasso tool to draw a small area to delete the background white color.

6.Use the filter – distort give polar to rectangle.

7. Now rotate the canvas – 90ccw.

8.Apply wind effect from right 2times.

9.Apply wind effect from left 2times.

10.Again rotate the canvas – 90cw.

11. Distort polar coordinates from rectangle to polar.

12. select center portion using magic wand give inverse selection.

13. Apply ripple filter effect.

The Sun Effect is ready now .Try this and share your comments.

Also FYI, a video game based on this film is gonna get released in April 2010 and it is developed by Sega. Here in this post you can some of Iron Man 2 Pictures. Click on the images to Enlarge.