Snowfalls

Archive for the ‘Tips and Tricks’ Category

Sometimes a normal-horizontal text isn’t enough, we need the text rotate into some angle we want them to be.

To do this we could add a few lines of codes in our text css-selector. For example:

In your HTML:

<div class=”container”>

<span>It Works</span>

</div>

Inside the css file you should add:

.container span{

-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
transform: rotate(-12deg);

}

But unfortunately this won’t work in IE.. To have it works you should add more lines of codes like I shown below:

position: absolute;
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

The absolute position is very important here because if you put another position options like relative or static, the filter wouldn’t work.. And for rotation value, the number means:

0 = not rotated

1 = 90 degrees

2 = 180 degrees

3 = 270 degrees

So our CSS selector become:

.container span{

-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
transform: rotate(-12deg);
position: absolute;
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

}

Until I write this post,

I haven’t found a method to make text-rotation in IE rotate with custom degrees,

so if you have some ways to do it, I would appreciate a lot  if you share it by commenting below my post 🙂

Advertisements
Tags: , , ,

For example you have this class:

<div class=”rounded”>… Text Here …</div>

In your CSS code you could add these line to implement the rounded-corner box:

.rounded{

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

}

In which:

moz-border-radius gives you compatibility with older firefox browser

-webkit-border-radius gives you compatibility with older webkit browsers, such as Safari

border-radius is a CSS3 tag that works with modern browsers, such as Safari 5, Firefox 3.5.x, Internet Explorer 9, and Google Chrome 4

But, unfortunately these styles are not working in IE6, 7, and 8

Briefly we could say that

Printed Web Layout is a design when the page is printed or in a print preview

And Print Stylesheet itself is a stylesheet which is used to this special purpose.

To implement this you could just simply put the stylesheet link on the header (like the usual stylesheets), but in addition to that you should set the media parameter to print, for example:

<link href=”/stylesheets/print.css media=”print” rel=”stylesheet” type=”text/css” />

And inside the print stylesheet there are some points to consider, which are:

1. The unwanted elements, you should hide this for good, for example:

#sidebar{

display: none !important;

}

2. The Showing Content, for example you could extend the width and remove margins and the floating elements style:

#main-content{

width: 100%;

margin: 0;

float: none !important;

}

Please see this example:

<h2><a href=”#”>This is a link</a></h2>

And this one:

<a href=”#”><h2>This is a link</h2></a>

If we see the result of those html codes, both of the examples would give same result if you test it on modern browsers.

Unfortunately, if you are still using IE6 as your browser then you will have a problem.

Fox example you have this CSS code:

a{ text-decoration: underline; }

a:hover{ text-decoration: none; }

If you follow the second example (which is the invalid html) the anchor hover state would not working in IE6 because of the headings element.

So to avoid that and make your code valid you should refer to http://validator.w3.org for checking

When I am trying to export my data from localhost I get these errors:

Warning: strip_tags() expects parameter 1 to be string, array given in C:\xampplite\htdocs\wordpress-3.0\wordpress\wp-includes\formatting.php on line 2773

Warning: Cannot modify header information – headers already sent by (output started at C:\xampplite\htdocs\wordpress-3.0\wordpress\wp-includes\formatting.php:2773) in C:\xampplite\htdocs\wordpress-3.0\wordpress\wp-admin\includes\export.php on line 44

Warning: Cannot modify header information – headers already sent by (output started at C:\xampplite\htdocs\wordpress-3.0\wordpress\wp-includes\formatting.php:2773) in C:\xampplite\htdocs\wordpress-3.0\wordpress\wp-admin\includes\export.php on line 45

Warning: Cannot modify header information – headers already sent by (output started at C:\xampplite\htdocs\wordpress-3.0\wordpress\wp-includes\formatting.php:2773)

After doing some research about the problems, I found that the export.php must be changed (upgraded) into this one:

http://core.trac.wordpress.org/browser/branches/3.0/wp-admin/export.php

After finished download the file, you should put it in your local wp-admin directory, and replace your old existing file, and try to do the export again.