Rockstar template http://rockstartemplate.com Library Of Templates Wed, 31 Dec 2014 20:35:19 +0000 en-US hourly 1 http://wordpress.org/?v=4.1.7 Happy New Year Folkshttp://rockstartemplate.com/misc/happy-new-year-folks/ http://rockstartemplate.com/misc/happy-new-year-folks/#comments Wed, 31 Dec 2014 20:16:50 +0000 http://rockstartemplate.com/?p=2529 A very warm Happy new year wish to all of our readers out there. Happy New year Folks.

 

Happy New Year 2015

]]>
http://rockstartemplate.com/misc/happy-new-year-folks/feed/ 2
Must Do Image Optimization techniques for your Sitehttp://rockstartemplate.com/tutorial/websites/image-optimization-technique/ http://rockstartemplate.com/tutorial/websites/image-optimization-technique/#comments Mon, 29 Sep 2014 23:21:44 +0000 http://rockstartemplate.com/?p=2416 Its very important to increase your blog/site page performance. Your Site performance plays a vital role in your Google page rank, Google search results and obviously visitor engagement.

We need to identify performance best practices for images, which will increase your overall site performance drastically. Lets see some of the techniques used by site moderators to improve their site performance.


1]  Compress the Image :


Compressing the image is a must for a high traffic site.
You can do this in various ways.
If you have Adobe Photoshop, Follow the below Steps,

STEP 1] Open or Create your Image in Photoshop.

STEP 2] After opening image in Photoshop, Click File-> Save for Web & Devices.

Image_optimization_Technique

A pop up window will appear. Select your image quality as “Very High” (Quality – 80). You can see your image got optimized in the panel at left side. Original image size is 626 KB and the new optimized image size is 69.15 KB. Almost 90% of your image is reduced, but still your image retains very high quality.

img_optimize

 


2]  ALT Text and Caption for an Image :


Alternative Text is used by search engine to know more about the image. For Example,

<img src="img1.jpg" alt="Men Hair Style" />

So When search engine reads it, then it knows that this image is about men hairstyle. If you dont specify the ALT Text , then uploading image becomes useless.

Caption is another important criteria for an image. Lets not confuse Alt text with Caption. ALT text is an alternative for an image. For eg : In a Text based Browser or Browser where image options are disabled, ALT Text will be shown instead of the actual image. Caption describes what the image is about like a description about the image.

Image Optimization techniques

Image Optimization

 


3] Re-size it and do not Shrink it:


Your browser will take time to render your re-sized image. So we should avoid resizing it.

Lets say you are resizing an image twittericon.jpg whose original size is 980 * 780 Pixels and if you are resizing the width of image from 980 to 40 pixels and height from 780 to 40.

<img src=”twittericon.jpg”  width=”40″ height=”40″ alt=”Twitter Icon”>

then,

the original image has to be downloaded by the browser before it can display it in the screen with smaller pixels.Your Browser will use more bandwidth and your webpage takes longer to load. This can be easily reduced by cropping/resizing your image. Trust me it wont take much time. We have lots and lots of tools to crop the image these days. One good example is Photoshop.


4] Manage Your Image Sitemap :



You can use a sitemap to provide search engines with metadata about specific types of content on your images.If your site is really large, sitemap is the what search engines will use to filter your website data.

According to Google, ” A sitemap image entry can include the image subject matter, type, and license. ”

you can generate one sitemap for images from online sitemap generators.


5] No Data in your Image :



Another important aspect to get more search result is not to embed data, specific to your post, inside the image.

Below Image is a very good example of a bad image,

badexample

 

 

 

These are very basic 5 steps one must follow to optimize the site images.

Last but not least, read the image optimization suggestions from Google : https://support.google.com/webmasters/answer/114016

]]>
http://rockstartemplate.com/tutorial/websites/image-optimization-technique/feed/ 2
WordPress 3.8 Releasedhttp://rockstartemplate.com/misc/wordpress-3-8-released/ http://rockstartemplate.com/misc/wordpress-3-8-released/#comments Fri, 13 Dec 2013 16:20:48 +0000 http://rockstartemplate.com/?p=2460 Whoa! WordPress 3.8 Parker now has some nice features and stunning look and feel. Its been 3 months they released 3.7Version. We installed this new version Yesterday and its looking great. We already started using the features and did some tests and guess what we didn’t face any issues till now.

For more features visit WordPress Website.

Have a look at the new Design,


wordpress38

We strongly recommend you guys to try this update from WordPress.

]]>
http://rockstartemplate.com/misc/wordpress-3-8-released/feed/ 4
How/Steps to host a Java Application using Google App Enginehttp://rockstartemplate.com/tutorial/websites/java-application-hosting-free/ http://rockstartemplate.com/tutorial/websites/java-application-hosting-free/#comments Sun, 01 Dec 2013 05:57:35 +0000 http://rockstartemplate.com/?p=2389 Are you wondering how to host a Java web application for no cost ? We do have lots of premium hosting services like go-daddy to host java/jsp web pages. But in this post you can find how to host your applications in Java run-time for free using Google. Yes we are going to see Google app Engine.

Steps to host your application :

1] Download Eclipse (in my case Juno).

2] Install the Google Plugin for Eclipse (https://dl.google.com/eclipse/plugin/4.2).

Install Reference : https://developers.google.com/eclipse/docs/install-eclipse-4.2

3] Create a Sample project.
CreateNewProject_GoogleAppEngine

 

4] Enter your App Id that you have created in Google App Engine.
Project_GoogleAppEngine

Note: Check for project folders.
3 Folder will be create.

    1. Client – All your UI Related Stuffs goes here. Eg – Java program that adds Components to your HTML.
    2. Server – All Server side validations, business functions goes here.
    3. Shared – Stuffs like objects that you share with your server goes here.

ProjectsGoogleAppEngine

 

5] Design and develop your Code. Finally Right Click on the project -> deploy and test.

Deploy_GoogleAppEngine

 

Let us know if you face any issues hosting your application.

]]>
http://rockstartemplate.com/tutorial/websites/java-application-hosting-free/feed/ 4
Google Web Designer Review – Bring ideas to lifehttp://rockstartemplate.com/tutorial/designer-tool/google-web-designer-reviews/ http://rockstartemplate.com/tutorial/designer-tool/google-web-designer-reviews/#comments Fri, 08 Nov 2013 16:23:06 +0000 http://rockstartemplate.com/?p=2280 Google is the latest, greatest Innovation company, and it’s got something very special: A Web Designing Tool that is Simple and Powerful.

Are you a Designers who had a crush on Google ? Its your time now. Google launched the Beta version of Google Web Designer. The design is distinctly Google, and we liked the Black Background. Trust me designers like black background in their design tools :)

This Web Designer Software inherits characteristics of other members of the Web Designer Tools family, with a Layout that looks and feels premium. But one thing that distinguish this software is its “Performance”, it’s amazing.

We do have other designing tools like Dreamweaver, Fireworks, Visual Web Developer, Expression Blend which are good for creating a complete websites with motion graphics, but after using Google web designer software we feel that it is more simpler and engaging than any other web designer tools.

Lets see some of the features listed in Google Web designer website:

1] One Idea, Any screen –

Creating a design for desktop, tablet or mobile can be achieved on all the web designer tools out there. Even though Google does it better, we are little skeptical that this can be one of there ways to promote Chrome browser, like how Microsoft does it for promoting IE.

2] Design and Code View -

We have seen this one too in other design tools. But we personally feel Google is faster than others. We can flip between code and design and we can test our design instantly.

webdesigner_google

#Thanks mainly to reduced the design time.

3] Creating timeline animations –

We can create Flash-like timeline animations. Web designer has 2 modes: Quick Mode, we dont need to worry about the frames in between. all we need to do is create the on screen animation tool to create a scene. In Advanced Mode, We have the full control of the animation frame by frame. This is also one of the common features provided by almost all design tools.

4] Ad Designing –

This tool gives us a custom Layouts for AdSense Advertising banner designing. Intend of this is likely to promote AdWords service. We can also use these custom layout to make some widgets.
AdFormats_google_Webdesigner
5] 3-D tools -

Plenty of scope to create 3D animations using 3D translation and rotation tools. Limited 3D tools when compared to other giant 3D tools. But we can understand that this tool is just in the Beta version.

6]  Preview and Publish -

The one thing we love about Google is the integration. Google makes our easier by integrating all in one place. We can preview your design and publish them instantly.

7] Design -

No words. #simply stunning.

One last word: Its just the beginning, still lot of software versions and updates are on our way. Try it out. You will never regret it. Its worth a try.

Let us know what you think about Google Web Designer.

 

]]>
http://rockstartemplate.com/tutorial/designer-tool/google-web-designer-reviews/feed/ 6
10 More Header Banner Designhttp://rockstartemplate.com/blog-resources/10-header-banner-design-background/ http://rockstartemplate.com/blog-resources/10-header-banner-design-background/#comments Mon, 21 Oct 2013 02:38:08 +0000 http://rockstartemplate.com/?p=2063 After a positive response for our posts, ” 20 Beautiful Header Banner Design ” and ” Blog Header Design Background/Banner “, we are here again to give you another elegant set of header banner designs. This time we came up with header banner designs from different categories like weeding theme, simple glossy effect, Gaming theme etc. Hope you like this post too. Click on the images to enlarge.

Black Banner Design


Glossy Blue Banner Design


Simple Blue Banner Design


Gaming Header banner Design


White Header Banner Design


Wedding Couple Banner Design


Modern Art Banner Design


Wedding Rose Banner Design


Women Header Banner Design


Women Header Banner Design

Comment your views and Concerns. We are happy to hear from you.

]]>
http://rockstartemplate.com/blog-resources/10-header-banner-design-background/feed/ 3
Ways to Test Your Web Applicationshttp://rockstartemplate.com/tutorial/designer-tool/test-your-web-applications/ http://rockstartemplate.com/tutorial/designer-tool/test-your-web-applications/#comments Thu, 17 Oct 2013 22:43:02 +0000 http://rockstartemplate.com/?p=1892 Lets discuss here about some of the ways that can be used to test a web application. First, we need to know what components/functions are mandatory for testing.

Types of testing in a Web application :

1] Navigation Testing.

2] Browser compatibility Testing.

3] Usability Testing.

Navigation Test is very important in web application, which we all know how to do. For Browser Test, all we need to do is to install all browsers, make our desktop loaded with bunch of Browser icons and test our application. Check below the List of Browsers people use these days.

Chrome 17-23, Firefox 10-17, Internet Explorer 10, Opera 12, Safari 6 – Almost 80% of Web Users use these Browsers.

For Full List of Web browsers, GO HERE.

Xampp from Apache Friends will get you the best environment locally to test. XAMPP has Apache, MySQL, PHP + PEAR, Perl, mod_php, mod_perl, mod_ssl, OpenSSL, phpMyAdmin, Webalizer, Mercury Mail Transport System for Win32 and NetWare Systems v3.32, Ming, FileZilla FTP Server, mcrypt, eAccelerator, SQLite, and lot more than you need to run your website.

Today, I want to highlight a browser automation framework, that will make Designer’s Life easier. There are many advantages of test automation. It gives long term efficient way to test particular software processes.

The product i am talking here is none other than Selenium Automation Framework.

 

Some of the Advantages of Selenium are ::

  • Frequent Testing of similar scenarios.
  • Much faster way to test robustness of system.
  • Helpful for developers.
  • Supports all the development methodologies, like Agile.
  • N numbers of iterations are available
  • Systematic way to document, run and log the defect for testers in minimal testing.

 

Lets see how to install Selenium Framework ?

1)      Download the driver Client and install  the JARs of selenium.

Link to Download

Are you a Eclipse Guys ? Then we have a good news for you. We can get eclipse plugin too.

2)      Install Firefox firebug plug in to get xpath.

http://www.wikihow.com/Find-XPath-Using-Firebug

3)     Find the sample Java Class.

 

Sample Java Class ::

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
import java.io.IOException;

import java.util.concurrent.TimeUnit;

import com.openqa.selenium.*;

import com.seleniumBase;

public class helloWorld extends seleniumBase {
public void initialize(String ButtonName) throws Exception {

WebDriver driver = null;

// Choose Our Appropriate Browser
switch (browser) {
case "chrome":
driver = new ChromeDriver();
case "firefox":
driver = new FirefoxDriver();
case "InternetExplorer":
driver = new InternetExplorerDriver();
}

// Get Our Application URL
driver.get("http://rockstartemplate.com?q=test");

// Set Our Application Elements to Whatever name we Want
WebElement query = driver.findElement(By.name("ButtonID")); // Option 1
WebElement query = driver.findElements(By.xpath("//td[@class='gssb_a gbqfsf']")); // Option 2 - Get XPATH from FIREBUG

//Set the Values
query.sendKeys(ButtonName);
}
}

 

We are all set to Test now. Please comment with your comment / concerns and suggestions. Happie Testing !!

 

]]>
http://rockstartemplate.com/tutorial/designer-tool/test-your-web-applications/feed/ 3
Natural Photographyhttp://rockstartemplate.com/photography/natural-photography-wallpapers/ http://rockstartemplate.com/photography/natural-photography-wallpapers/#comments Sat, 07 Sep 2013 12:20:18 +0000 http://rockstartemplate.com/?p=536 We present you another nice collection of natural photography. This collection has some awesome photography taken from different part of the world , capturing the real world beauty. The collection has random natural images took by professional photographers.

]]>
http://rockstartemplate.com/photography/natural-photography-wallpapers/feed/ 2
Install and Configure SOLR in Mac OS Xhttp://rockstartemplate.com/tutorial/install-configure-solr-mac/ http://rockstartemplate.com/tutorial/install-configure-solr-mac/#comments Mon, 12 Aug 2013 11:56:19 +0000 http://rockstartemplate.com/?p=1247 Recently i have worked on Search engine project using the Open Source Lucene and Solr distributions from the Apache project. Solr search is faster than any other search engine especially for larger sites. This post is to share our experience on SOLR . If you want to install, run and maintain Lucene and Solr yourself and if you are a MAC user, then this post is for you.

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
<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
<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.

 

How to Start Solr as a Service without using Tomcat:

Download Solr (as mentioned in previous steps).

Open “Terminal”. Goto the “example” folder inside Solr folder.

For Eg:   cd Desktop/Solr/example

To Start the solr Server :  start the start.jar file.

1
Command : java -jar start.jar

Now Solr will run in Port 8983. You can check it at [ localhost:8983/solr ].
solr_admin

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

]]>
http://rockstartemplate.com/tutorial/install-configure-solr-mac/feed/ 9
Graphic Tattoo designshttp://rockstartemplate.com/photography/graphic-tattoo-designs-backgrounds/ http://rockstartemplate.com/photography/graphic-tattoo-designs-backgrounds/#comments Sat, 22 Jun 2013 08:34:30 +0000 http://rockstartemplate.com/?p=1215 Today, we offer you guys a creative collection of tattoo designs. The Collection contains more than 100 creative and stylish tattoo designs that you can use as a template to create your own tattoos. You can search Google for Tattoo designs but most of the time you never seem to get enough. Here you can get hundreds of tattoo designs that gives you a kick start of designing tattoos of your choice.

Tattoo Samples ::

Tattoo Designs tattoo stylish tattoo arts tattoo background tattoo samples tattoo beautiful art Tattoos Tattoo Designs free Tattoo Designs template Tattoo Designs Tattoo Design Background

 

 

 

Please comment your thoughts / concerns.

 

]]>
http://rockstartemplate.com/photography/graphic-tattoo-designs-backgrounds/feed/ 7
Silverlight – Create StoryBoard to move elementshttp://rockstartemplate.com/tutorial/silverlight-tutorial/storyboard-move-effect/ http://rockstartemplate.com/tutorial/silverlight-tutorial/storyboard-move-effect/#comments Mon, 27 May 2013 00:08:51 +0000 http://rockstartemplate.com/?p=1413 In this tutorial, we will show you how to create a Story Board in Silverlight to move the elements from one position to another. Silverlight gives designers the ability to create some move effects, which can be accomplished just by few lines of code. Follow the steps in order to accomplish the task.

We can discuss about creating a Move effect via  C# program OR creating a Story Board in XAML file.

How to Create Move Effect via C# Program:

Step 1] Create Some UI Elements that you want to Move. In this Case we are creating a Rectangle with an Image.

1
2
3
4
Rectangle r1 = new Rectangle();
ImageBrush imageBrush = new ImageBrush();
imageBrush.ImageSource = new BitmapImage(new Uri("images/1.jpg", UriKind.Relative));
r1.Fill = imageBrush;

Step 2] Create a Canvas and Add the Created element to it.

1
canvas2.Children.Add(r1);

Step 3] You can create a storyboard dynamically using the following
code. Storyboard control is used to animate properties of an
object.

1
Storyboard sb1 = new Storyboard();

Step 4] Now its time to create a Double Animation. Before that, we can see some of the properties of DoubleAnimation.

  • Storyboard.TargetProperty – The element property that you wish to animate.
  • Storyboard.TargetName- The object you want to animate
  • Duration – how long the animation should take.
  • From/To – The start and end values you want the property to be set to. Default value is 1.0.
  • AutoReverse -reverse animation course once it’s completed.

Now to create a double animation,

1
2
3
4
5
6
DoubleAnimation da1 = new DoubleAnimation(); DoubleAnimation da2 = new DoubleAnimation();
//For X Axis
da1.To = 200; // The element will move from his place (0) to (200).
Storyboard.SetTarget(da1, r1); Storyboard.SetTargetProperty(da1, new PropertyPath("(Canvas.Left)"));
//For Y Axis Storyboard.SetTarget(da2, r1);
Storyboard.SetTargetProperty(da2, new PropertyPath("(Canvas.Top)"));

Step 5] Finally, add both the double animations to the Story board and then add the story board to the main Layout Grid.

1
2
sb1.Children.Add(da1); sb1.Children.Add(da2);
LayoutRoot.Resources.Add("sb1", sb1);

Step 6] Start the Storyboard.

1
sb1.Begin();

How to Create Move Effect in XAML file:

We can also define the storyboard and double animation in the storyboard.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<UserControl x:Class="jump_try1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignHeight="637" d:DesignWidth="793"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk
">

<UserControl.Resources> <Storyboard x:Name="move1">
<DoubleAnimation x:Name="goX1" Storyboard.TargetName="none"
Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:1"/>
<DoubleAnimation x:Name="goY1" Storyboard.TargetName="none"
Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:1"/>
</Storyboard> </UserControl.Resources>
//Add your Grid Layout Root here. </UserControl>

Now you can call the Storyboard by just move1.begin();

Write your comments/concerns about this post.

]]>
http://rockstartemplate.com/tutorial/silverlight-tutorial/storyboard-move-effect/feed/ 2
CSS3 Stylish Search Box with Folded Corner Effecthttp://rockstartemplate.com/featured/stylish-searchbox-foldedeffect/ http://rockstartemplate.com/featured/stylish-searchbox-foldedeffect/#comments Sun, 10 Mar 2013 08:23:22 +0000 http://rockstartemplate.com/?p=1115 This tutorial shows you how to create a Folded corner effect without images. Just like the one mentioned below..,

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
.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
.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.

]]>
http://rockstartemplate.com/featured/stylish-searchbox-foldedeffect/feed/ 1
Merry Christmas!http://rockstartemplate.com/misc/merry-christmas/ http://rockstartemplate.com/misc/merry-christmas/#comments Sat, 17 Dec 2011 19:30:48 +0000 http://rockstartemplate.com/?p=1294 Hi Folks,

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

Happy-Christmas

]]>
http://rockstartemplate.com/misc/merry-christmas/feed/ 0
Magic Blue WordPress Themehttp://rockstartemplate.com/themes/wordpress-theme/magic-blue-wordpress-theme/ http://rockstartemplate.com/themes/wordpress-theme/magic-blue-wordpress-theme/#comments Thu, 23 Jun 2011 14:55:10 +0000 http://rockstartemplate.com/?p=1234 We came up today with all new free WordPress template called “Magic Blue WordPress template”.  This theme supports widget, threaded-comments and search engine friendly pages. Also including page-navigation, advertising box, widgetized sidebar and a good looking search box. This template is very well designed and has a dark blue header and a dark blue body.

This theme is ideal for photographers and designers who wants to showcase their pictures/photos. You can upload and customize your post thumbnails via the back end. All you need to do is to add an thumbnail to your post custom fields with field name “postimage”. You can use this 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 .

]]>
http://rockstartemplate.com/themes/wordpress-theme/magic-blue-wordpress-theme/feed/ 0
Designers Hand – Dynamic Stylesheethttp://rockstartemplate.com/tutorial/designers-dynamic-stylesheet/ http://rockstartemplate.com/tutorial/designers-dynamic-stylesheet/#comments Sat, 02 Apr 2011 08:02:49 +0000 http://rockstartemplate.com/?p=1193 Hi folks !! Today i am going to speak about the greatest problem we all face in CSS. It’s none other than writing your CSS code from scratch.

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
.banner{
border-radius: 2em;
box-shadow: #f2f2f2 0 0 5px;
}

You can get this,

1
2
3
4
5
6
7
8
.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 :)

]]>
http://rockstartemplate.com/tutorial/designers-dynamic-stylesheet/feed/ 0
Change your Skin Tone in Photoshophttp://rockstartemplate.com/tutorial/photoshop/change-skin-tone-photoshop/ http://rockstartemplate.com/tutorial/photoshop/change-skin-tone-photoshop/#comments Sun, 20 Mar 2011 12:21:51 +0000 http://rockstartemplate.com/?p=1164 Why does your face look pale in the photograph you have taken ? Why does your tone fade in the pictures ? There may be several reasons behind this.

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 !!

]]>
http://rockstartemplate.com/tutorial/photoshop/change-skin-tone-photoshop/feed/ 2
Meta Tag Demystifiedhttp://rockstartemplate.com/blog-resources/blog-tips-and-tricks/what-is-meta-tag-optimization/ http://rockstartemplate.com/blog-resources/blog-tips-and-tricks/what-is-meta-tag-optimization/#comments Wed, 09 Mar 2011 23:43:33 +0000 http://rockstartemplate.com/?p=1149 What is a Meta-Tag ?
It is indeed a good question to ask in the beginning of the post. There are number of ways that I can answer this question.

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
<HEAD>


<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.">


//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/">


<META name="Author" content="Add the Author Information here">


//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">


//You can specify the level of distribution in the below Tag.
//You can use Global/Local/IU(Internal Use)
<META name="Distribution" content="Global">


//The below tag is used to defines the language your webpage uses.
<META HTTP-EQUIV="Content-Language" content="EN">


<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">


//Inform Searchengine that your site is for General/Restricted/Adult audiences.
<META name= “Rating” content= “General”>


</HEAD>

 

Sample Metatag in Google :

 
Metatags
 

 

]]>
http://rockstartemplate.com/blog-resources/blog-tips-and-tricks/what-is-meta-tag-optimization/feed/ 3
Css 3/Html 5 Logo from W3Chttp://rockstartemplate.com/blog-resources/icons/logos-icons/css3_html5_logo/ http://rockstartemplate.com/blog-resources/icons/logos-icons/css3_html5_logo/#comments Sat, 05 Mar 2011 06:02:48 +0000 http://rockstartemplate.com/?p=1123 ” Take Control – Your Web and Your Logo ” is the caption for the HTML 5 logo, quoted by W3c. This Jan, W3C unveiled a logo and brand identity for HTML5. As a part of brand identity campaign, W3C released the new CSS 3 Logo.

Have a look at it below,

CSS3 Logo

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/blog-resources/icons/logos-icons/css3_html5_logo/feed/ 3
Happy New Year 2011http://rockstartemplate.com/misc/happy-new-year-2011/ http://rockstartemplate.com/misc/happy-new-year-2011/#comments Fri, 31 Dec 2010 19:13:46 +0000 http://rockstartemplate.com/?p=1116 For all our readers out there, Thanks a lot for your support in 2010.  Your support makes our mission a reality. We hope that you will support us in 2011 too. HAPPY NEW YEAR 2011 FOLKS :)

]]> http://rockstartemplate.com/misc/happy-new-year-2011/feed/ 1 Desktop Wallpapers for Christmashttp://rockstartemplate.com/photography/wallpapers/christmas-wallpapers/ http://rockstartemplate.com/photography/wallpapers/christmas-wallpapers/#comments Sat, 18 Dec 2010 17:55:39 +0000 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.

]]> http://rockstartemplate.com/photography/wallpapers/christmas-wallpapers/feed/ 11 High Resolution Banner Backgroundhttp://rockstartemplate.com/blog-resources/high-resolution-banner-background/ http://rockstartemplate.com/blog-resources/high-resolution-banner-background/#comments Wed, 08 Dec 2010 14:45:52 +0000 http://rockstartemplate.com/?p=1090 Holidays are approaching and its time for you to think what you can do to make this occasion grander. Here we came up with a banner background, which you can use it for preparing a huge banner for all kind of celebrations. The banner size is 240 inches X 48 inches [20 X 4 Foot].

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

Preview :

Banner Background Picture High resolution

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

]]>
http://rockstartemplate.com/blog-resources/high-resolution-banner-background/feed/ 2
The chronicles of Narnia – Part 3 Wallpapershttp://rockstartemplate.com/photography/the-chronicles-of-narnia-part-3-wallpapers/ http://rockstartemplate.com/photography/the-chronicles-of-narnia-part-3-wallpapers/#comments Sun, 05 Dec 2010 07:34:50 +0000 http://rockstartemplate.com/?p=1084 The Chronicles of Narnia is a series of fantasy novel for children written by C. S. Lewis. The Voyage of the Dawn Treader is the third part released this December 10th.

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

]]>
http://rockstartemplate.com/photography/the-chronicles-of-narnia-part-3-wallpapers/feed/ 0
Multiple Backgrounds in CSS3http://rockstartemplate.com/tutorial/multiple-backgrounds-in-css3/ http://rockstartemplate.com/tutorial/multiple-backgrounds-in-css3/#comments Sat, 04 Dec 2010 20:18:11 +0000 http://rockstartemplate.com/?p=1065 One of the biggest problem with CSS2 is its inability to add more background images to a particular division(<div>). This inability is solved in CSS3. CSS3 – Backgrounds and Borders Module has lots of new features.

Adding multiple backgrounds using CSS3 is simple. It is still possible in CSS2 where we can specify a Div above another Div 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 ‘N’ 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
#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
#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.,

This is an Example for Multiple
Backgrounds, using CSS 3!!

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 at the top. The second image is placed behind the first one 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
My Business Css themehttp://rockstartemplate.com/themes/css-templates/my-business-css-template/ http://rockstartemplate.com/themes/css-templates/my-business-css-template/#comments Fri, 03 Dec 2010 14:23:57 +0000 http://rockstartemplate.com/?p=1060 My Business Template is a free HTML/CSS Template from Rockstartemplate.com. 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

 

This CSS Theme can be used for any type of personal use. All we need is a link back to our site at the bottom of the Template.

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

]]>
http://rockstartemplate.com/themes/css-templates/my-business-css-template/feed/ 0
Shrek Movie postershttp://rockstartemplate.com/photography/shrek-movie-posters/ http://rockstartemplate.com/photography/shrek-movie-posters/#comments Thu, 25 Nov 2010 18:07:36 +0000 http://rockstartemplate.com/?p=994 Shrek movie is an animated comedy film, based on fairy tale picture book, Shrek. This movie is directed by Andrew Adamson and Vicky Jenson.

We came up with quite a few pictures from Shrek movie. Find some of the movie posters below,

]]>
http://rockstartemplate.com/photography/shrek-movie-posters/feed/ 1
Simple Trick to increase your Alexa Rankhttp://rockstartemplate.com/blog-resources/blog-tips-and-tricks/increase-your-alexa-rank/ http://rockstartemplate.com/blog-resources/blog-tips-and-tricks/increase-your-alexa-rank/#comments Sun, 24 Oct 2010 15:13:29 +0000 http://rockstartemplate.com/?p=1034 Hello Peeps, we are not here to list down a set of Tips/Tricks to increase your Alexa ranking ;) But we are here to tell you guys a simple trick that will eventually increase your Alexa rank.

Before 2 months our admins thought of renovating the design of the website. We posted contents frequently at-least once in every two days. We published posts on sites like Stumble Upon, Twitter, Digg and tried building a strong blogger network. While doing these stuffs, we found that Rockstartemplate.com attains its best Alexa Ranking, below 40,000th Rank.

After a month, I was bit busy with my other design related stuffs 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 100,000. My rank gradually reduced drastically. Yep, I found it hard to digest my rank..!

So the concept is simple. KEEP YOUR SERVERS TICKING., make the most out of the hosting services 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 increasing gradually. Keep posting and keep your Rank intact.

Happy Blogging !

]]>
http://rockstartemplate.com/blog-resources/blog-tips-and-tricks/increase-your-alexa-rank/feed/ 10
Create a Custom Alert Box in Javascript using ShowModalDialoghttp://rockstartemplate.com/tutorial/javascript-tutorial/custom-alert-box/ http://rockstartemplate.com/tutorial/javascript-tutorial/custom-alert-box/#comments Sun, 24 Oct 2010 06:31:17 +0000 http://rockstartemplate.com/?p=1013 This tutorial is about creating a Custom Alert Box in JavaScript. This tutorial will explain how to create a custom alert box in JavaScript using showModalDialog()/Open() function.

js_alertbox

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 otherwise we can 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
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
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>

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.

]]>
http://rockstartemplate.com/tutorial/javascript-tutorial/custom-alert-box/feed/ 5
25+ Button Collection – Free Downloadhttp://rockstartemplate.com/blog-resources/icons/buttons-collection-download/ http://rockstartemplate.com/blog-resources/icons/buttons-collection-download/#comments Sat, 21 Aug 2010 18:51:43 +0000 http://rockstartemplate.com/?p=998 Here we go.! More than 25 Buttons, all in one Package. I’m sure that you can really make a huge difference with these buttons. So Go ahead and grab these button designs.

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.

]]>
http://rockstartemplate.com/blog-resources/icons/buttons-collection-download/feed/ 5
Clean Art CSS Templatehttp://rockstartemplate.com/themes/css-templates/clean-art-html-css-design/ http://rockstartemplate.com/themes/css-templates/clean-art-html-css-design/#comments Sun, 06 Jun 2010 08:37:14 +0000 http://rockstartemplate.com/?p=984 Clean Art Template is a free HTML/CSS Template from Rockstartemplate.com. This CSS Theme can be used for FREE under the Creative Commons license. Speciality of this template is that it is made with creative art pictures. It’s a 2 column theme with fixed width columns and also compatible with Web 2.0.

You can use this template for any type of personal use,  but with a link back to our website in any ways. This Css template can also be modified 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 :

Clean Art Theme Screeshot
Preview this Template | Download this Template

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

]]>
http://rockstartemplate.com/themes/css-templates/clean-art-html-css-design/feed/ 0
Movie – Voyage of the Dawn Treader Pictureshttp://rockstartemplate.com/photography/voyage-dawn-treader-images/ http://rockstartemplate.com/photography/voyage-dawn-treader-images/#comments Wed, 14 Apr 2010 06:33:40 +0000 http://rockstartemplate.com/?p=974 The Chronicles of Narnia – The Voyage of the Dawn Treader is one of the most expecting movie in 2010. This is a latest upcoming adventurous film based on the novel, The Chronicles of Narnia. New change in this movie will be distribution which is done by 20th Century fox. Distribution of previous version of the series, Prince Caspian was distributed by Walt Disney Pictures. This film will be released on December, 2010.

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

]]>
http://rockstartemplate.com/photography/voyage-dawn-treader-images/feed/ 8