Search This Blog

Mind freaker Stuff

Please Visit my new blog http://www.mindfreakerstuff.com for new articles related to web and mobile designing.

Wednesday, December 5, 2012

Quick guide to CSS3 and CSS2 shorthand


Check out cool CSS3 and CSS2 shorthand guide 
CSS shorthand can really help you reduce and optimize CSS files. Instead of using multi-lines of properties, we can make it one liner. The following is the CSS3 and CSS2 shorthands properties:

Check out here :
http://www.mindfreakerstuff.com/2012/12/css3-and-css2-shorthand-guide/

cheers.... :)

Thursday, June 7, 2012

How to create Styles for Android Button, UI (android Custom Button)

Android : How to create Style for Button which we can be use multiple time like CSS Classes in HTML  : Eclipse




1) Create Android Project  - Suppose we are creating a button style which has default blue color and on press orange color as shown in above image.




2) Create one android XML and select values as per shown in figure

Resource Type : Drawable
Root Element : Selector






 Add Folowing Code in bluebutton.XML



     
     
        
             
            
            
            
        
    
    
     
    
        
            
            
            
            
        
    





3)Create one more Android XML for styles  styles.xml  or you can use default string.xml

Resource Type : Values
Root Element : Resources



Add following Code in "Style.XML "




    




4) Add one Button in "main.xml" 






main.xml - 

  <Button
        android:id="@+id/button1"
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:text="My Button" 
        style="@style/btnBlue"/>


Thats it !! 


Friday, June 1, 2012

Fullscreen Toggle Button Action Script 2.0 : Flash

Add Action Script in Flash 

btn = "Button Instance Name"

Flash Action Script
stop();
Stage.displayState = "normal";
Stage.scaleMode = "noScale";
function toggleFullScreen ()
{
    trace ("::::::::::::::::::::::::::::::::::::::::");
    if (Stage.displayState == "normal")
    {
        Stage.displayState = "fullScreen";
    }
    else
    {
        Stage.displayState = "normal";
    }// end else if
}
btn.onRelease=function()
{
toggleFullScreen () 
}

HTML  Code : Replace your Swf file path with "index.swf"

 

Thursday, May 3, 2012

Doctype Tag : HTML5


Using the HTML5 structural elements

1) What is <DOCTYPE> tag? 



HTML 5 Doctype Tag - <!DOCTYPE html>

No URLs that even the most prolific web authors need to cut and paste.

add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to render.

*Note -  http://remysharp.com/2009/01/07/html5-enabling-script/  To enable HTML 5 Elements on Older IE browser

Monday, April 30, 2012

Wrap Continues Text in Table :CSS , HTML


Add following properties to your Class in CSS

.ClassName{
         white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
         white-space: -pre-wrap;      /* Opera 4-6 */
         white-space: -o-pre-wrap;    /* Opera 7 */
         white-space: pre-wrap;       /* css-3 */
         word-wrap: break-word;       /* Internet Explorer 5.5+ */
         word-break: break-all;
         white-space: wrap; /* Internet Explorer 8 and other*
}

Thursday, April 12, 2012

How to Change My Cart Link Name : Magento (using CSV file)

To Change " My Cart "  Link Name  in   Magento using CSV file   or  To Add custom label name to "My Cart" Using translate.CSV


1) Open  translate.CSV  file  

    (If your using English translation)
   CSV Path =   app\design\frontend\default\Your_Theme_Name\locale\en_US\ translate.CSV


2) Add Following Lines 
"My Cart (%s item)", "Shopping Bag ( %s )"
"My Cart (%s items)", "Shopping Bag ( %s )"
"My Cart", "Shopping Bag"


3) Save File and Clear Magento Cache .
Login to the admin and refresh the cache by going to System->Cache Management.




Cheers...... :)

How to Add Custom Class to top links and footer links : Magento

To Add Custom Class to top links  in Magneto

1) Open XML files for Top links And Add following tag

<liParams/> 
<aParams>class="logged-out"</aParams>

Suppose you want to add custom class to logout link.

<customer_logged_out>
    <
reference name="top.links">
       
<!--Add 'Log In' link -->
        <
action method="addLink" translate="label title" module="customer">
            <
label>Log In</label>
            <
url helper="customer/getLoginUrl"/>
            <
title>Log In</title>
            <
prepare/>
            <
urlParams/>
            <
position>100</position>

            <liParams/>
            <aParams>class="logged-out"</aParams>

        </action>
    </
reference>
</
customer_logged_out>

    


Thats it your done :) ........


Where are the files for the links located


Top  Links XML Path =  app\design\frontend\default\your_Theme\layout 


  • The “My Account” link is found in the customer.xml file
  • The “My Wishlist” link is found in the wishlist.xml file
  • The “My Cart” and “Checkout” links are both found in the checkout.xml file these links have class by default 
  • The “Login” and “Log Out” links are found in the customer.xml file



Monday, February 27, 2012

How To used Custom Font/ Non-standard font, web font in website

1)  To Support All Browser / devices you need to convert your font to following format
  1. " .oet"   for-IE
  2.  " .ttf"  or ".otf" for webkit-browser
  3. ".woff" and ".svg" for other browser and devices 
2) Many online file converters are available To convert  your font. find some of file converters links below 
  1. http://www.kirsle.net/wizards/ttf2eot.cgi
  2. http://onlinefontconverter.com/myfonts.php
  3. http://www.fontsquirrel.com/fontface/generator
  4. http://www.freefontconverter.com/
  5. http://ttf2eot.sebastiankippe.com/
  6. http://code.google.com/p/ttf2eot/  ---- Command Line 
Note: Some times "ttf to eot " file conversion wont work properly, you will need to do some trial-and-error to find proper font converter

3) Add converted font files to your website and Add following CSS.  
Here I am using "interstate-boldcondensed.eot" font inside fonts folder

@font-face
font-family: 'interstate-bc';
src: url('fonts/interstate-boldcondensed.eot');
src: url('fonts/interstate-boldcondensed.eot?#iefix') format('embedded-opentype'),
      url('fonts/interstate-boldcondensed.woff') format('woff'),
      url('fonts/interstate-boldcondensed.ttf') format('truetype'),
      url('fonts/interstate-boldcondensed.svg#interstate-boldcondensed') format('svg');
}

how to use in CSS ?
- use @faont-face font-family name as follow.

h1 {font-family: 'interstate-bc';}



--- Cheers :)

Tested on : IE 8, Firebox 3.6 and above, Chrome and Safari



Thursday, January 19, 2012

How to set layout or activity full screen : Android App

There are two ways to  set layout or activity full screen  for android application

1) Add folowing code to your JAVA file
-Add Two line in red before "setContentView"


public class myFullScreen extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, 
                                WindowManager.LayoutParams.FLAG_FULLSCREEN);

        setContentView(R.layout.main);
    }
}

OR

2) Add  folowing code

android:theme="@android:style/Theme.NoTitleBar.Fullscreen"
to AndroidManifest.xml in your activity tag

Thursday, January 12, 2012

How to Add repeat or tile background image : Android App

To Add repeat or tile background to Android Application

1) Add your Image to - "res/drawable" folder in Your Project or create folder with "drawable" name inside "res" folder this will applied to all ( drawable-hdpi, drawable-mdpi & drawable-ldpi)







2) Create XML file for Repeated or Tile background  Using the BitmapDrawable class in same folder












To Create XML file -
  • Rightclick "drawable" folder >> New >> Android XML File >> Select Bitmap >>  Save
  • Replace bg1 in "android:src="@drawable/bg1"" with your icon file name add missing attribute and Save.
  XML Code :

    <?xml version="1.0" encoding="utf-8"?>
  <bitmap
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:src="@drawable/bg1"
      android:tileMode="repeat"
      android:dither="true" />

3) Add Folowing Line to Your Layout XML ie (main.XML or your any custom layout file where you want to add 
Repeated or Tile background
) 

android:background="@drawable/bg"

Thats it your Done !!!! :)
Note : if you want to add different resolution  images  to adrawable-hdpi, drawable-mdpi & drawable-ldpi, you'll need to add this bg.xml and bg.png file and the relevant images to each of these to allow this functionality in high, medium and low dpi  screen sizes. 
More Options

ConstantValueDescription
disabled-1Do not tile the bitmap. This is the default value.
clamp0Replicates the edge color.
repeat1Repeats the bitmap in both direction.
mirror2Repeats the shader's image horizontally and vertically, alternating mirror images so that adjacent images always seam.
This corresponds to the global attribute resource symbol tileMode.
For More  information Please 
visit
-Amey Raut

how to change Android App Icon



Following is the size for Icon and path used for Android apps using eclipse


1) Icon Path file name -  ic_launcher.png


Low density -- ldpi -- 36×36 px  

Medium density -- mdpi -- 48×48 px (correct size if only one drawable folder)

High density -- hdpi -- 72×72 px



2) Change In  AndroidManifest.xml file if you change the icon file name  (used on lowercase letters)


cheers......