hydwebdesigner: May 2012

Thursday, May 31, 2012

Changing The Site URL

Changing the Site URL

There's four easy methods to change the Site URL manually. Any of these methods will work and perform much the same function.

Edit wp-config.php

It is possible to set the site URL manually in the wp-config.php file.

Add these two lines to your wp-config.php, where "example.com" is the correct location of your site.

define('WP_HOME','http://example.com');
define('WP_SITEURL','http://example.com');

This is not necessarily the best fix, it's just hardcoding the values into the site itself. You won't be able to edit them on the General settings page anymore when using this method.

Thursday, May 24, 2012

ARCHIVE: Increase PHP memory limit (4 methods)

Add this line in you drupal settings.php file, change the size if you want.

ini_set('memory_limit', '64M');

http://drupal.org/node/29268

Tuesday, May 22, 2012

Text in Vertical Align Center Using with DIV

<div style="display:table; height:400px; float:left; width:400px; overflow:hidden;">
<div style="width:400px; height:400px; background:#999999; color:#FFFFFF; text-align:center; vertical-align:middle; display:table-cell;">paramesh</div>
</div>

Code for Footer should be at bottom in all the cases

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
html, body{ height:100%; }
#main-wrapper{ min-height:100%; position:relative; }
#footer{ height:100px; background:#999999; position:absolute; bottom:0px; width:100%; }
</style>
</head>

<body style="padding:0px; margin:0px;">

<div id="main-wrapper">
<div style="height:100px;">h</div>
<div style="padding-bottom:100px;">Content</div>
<div id="footer"></div>
</div>
</body>
</html>

Thursday, May 17, 2012

Responsive Header Codes

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

<title>Hydwebdesigner.com - Welcome</title>
/head>

or
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

<title>Hydwebdesigner.com - Welcome</title></head>

CSS3 Media Queries

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

 --------------------------------

 Other Media Queries

/* if height is between 960 and 1024 */
@media screen and (max-width: 1280px) and (max-height:1024px){
#change ul{font-size:15pt; text-decoration:none; list-style-type:none; text-indent:300px; margin-top:150px;
background-color:yellow; height:100px; width:350px; text-indent:100px;}
}

/* if height is between 720 and 960 */
@media screen and (max-width: 1280px) and (max-height:960px){
#change ul{font-size:15pt; text-decoration:none; list-style-type:none; text-indent:300px; margin-top:150px;
background-color:green; height:100px; width:350px; text-indent:100px; color:yellow;}
}

/ if height is between 0 and 720 */
@media screen and (max-width: 1280px) and (max-height:720px){
#change ul{font-size:15pt; text-decoration:none; list-style-type:none; text-indent:300px; margin-top:150px;
background-color:pink; height:100px; width:350px; text-indent:100px; color:black;}
}

@media screen and (max-width: 800px) and (max-height:600px){
#change ul{font-size:15pt; text-decoration:none; list-style-type:none; text-indent:300px; margin-top:150px;
background-color:blue; height:100px; width:350px; text-indent:100px; color:white;}
}

 --------------------------------

Of course, you might not want all your responsive design styles inside one huge stylesheet. If that’s the case, you can serve alternative stylesheets using the same queries as attributes on your link elements.

<head>

<link rel="stylesheet" href="smartphone.css" 
media="only screen and (min-device-width : 320px) 
and (max-device-width : 480px)">

<link rel="stylesheet" href="smartphone-landscape.css" 
media="only screen and (min-width : 321px)">

<link rel="stylesheet" href="smartphone-portrait.css" 
media="only screen and (max-width : 320px)">

<link rel="stylesheet" href="ipad.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)">

<link rel="stylesheet" href="ipad-landscape.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)">

<link rel="stylesheet" href="ipad-portrait.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)">

<link rel="stylesheet" href="widescreen.css" 
media="only screen and (min-width : 1824px)">

<link rel="stylesheet" href="iphone4.css" 
media="only screen 
and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5)">

</head>

from: http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/

 -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0-

@media (min-width:768px) and (max-width:979px){}

@media (max-width:767px){}

@media (max-width:480px){}

 @media (min-width:1200px){}

@media (max-width:979px){}

@media (min-width:980px){}

  -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0-

Wednesday, May 16, 2012

CSS FONT-SIZE: EM VS. PX VS. PT VS. PERCENT

It’s easy to understand the difference between font-size units when you see them in action. Generally, 1em = 12pt = 16px = 100%. When using these font-sizes, let’s see what happens when you increase the base font size (using the body CSS selector) from 100% to 120%.

Font-sizes as they increase from 100% to 120%.

Font-sizes as they increase from 100% to 120%.

Font-size as the client changes the text size in their browser.

1em = 12pt = 16px = 100%--------------------------------------------------------------------------------------
<body style="font-family:Arial, Helvetica, sans-serif; font-size:12px;">
<div style="font-size:1em;">I am the web designer</div> /* here 1em=12px because body font-size is set to 12px. */
<div style="font-size:1.2em;">I am the web designer</div> /* here 1em=14px because body font-size is set to 12px. */
</body>
--------------------------------------------------------------------------------------

Make the Footer Stick to the Bottom of a Page through the CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>

</style>
</head>

<body style="padding:0px; margin:0px;">
<div id="main">
<div id="header">Header Section</div>
<div id="content">Container section</div>
<div id="footer">Footer Section</div>
</div>
</body>
</html>

Tuesday, May 15, 2012

block content from $node->field

<?php if (arg(0) == 'node' && is_numeric(arg(1)) ) { $node = node_load(arg(1)); if($node->type == 'article') { print $node->body['und'][0]['value']; } } ?>

URL: http://drupal.org/node/232474#comment-764060

Monday, May 14, 2012

Update your hosts file and point to the IP in hosts file

C:\Windows\System32\drivers\etc\hosts.txt

Friday, May 11, 2012

favicon not displayed by Firefox when used HTML5

This is my page head:

------------------------------------------------------------

<!doctype html>

<html>
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="/favicon.ico?" />
</head>

------------------------------------------------------------

As soon as I append at least the "?" after "ico" it works

Wednesday, May 2, 2012

Enable clean urls in windows 7

Find the below line on the wamp/Apache/httpd.conf file and remove the comment i.e # before the line.
"LoadModule rewrite_module modules/mod_rewrite.so"