Over|View: HTML

Showing posts with label HTML. Show all posts

Wednesday, 30 December 2015

Compress css within PHP using PHP

COMPRESS CSS

Create a style.php file, not style.css.
paste this code.

<?php ob_start ("ob_gzhandler"); header("Content-type: text/css; charset: UTF-8"); header("Cache-Control: must-revalidate"); $offset = 60 * 60 ; $ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT"; header($ExpStr); ?> body { color: red; }
css goes here as always...

Then call this stylesheet with php file name, see below...thats it.

string ob_gzhandler ( string $buffer , int $mode )

ob_gzhandler() is intended to be used as a callback function for ob_start() to help facilitate sending gz-encoded data to web browsers that support compressed web pages. Before ob_gzhandler() actually sends compressed data, it determines what type of content encoding the browser will accept ("gzip", "deflate" or none at all) and will return its output accordingly. All browsers are supported since it's up to the browser to send the correct header saying that it accepts compressed web pages. If a browser doesn't support compressed pages this function returns `FALSE`.

Sunday, 28 December 2014

How to remove the width and height from img tag in wordpress posts and pages?

REMOVE WIDTH AND HEIGHT ATTRIBUTES.

It would be great for the images to be able to scale proportionally within their parent container in wordpress to make perfect responsive. This effect can be take place if you remove the width and height attributes from img tag in wordpress.

In order to remove width and height , here we use filter hooks.There are two hooks we will used here. one is post_thumbnail_html and other is image_send_to_editor

We will replace width and height attribute with NULL i.e. blank space using preg_replace() function of php.

place this code in functions.php file.

add_filter( 'post_thumbnail_html', 'remove_wps_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_wps_width_attribute', 10 );
 function remove_wps_width_attribute( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

Friday, 26 December 2014

Corner Ribbon Using CSS

CORNER RIBBON

HTML SOURCE

CSS SOURCE

.wrapper { margin: 50px auto; width: 280px; height: 370px; background: white; border-radius: 10px; -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); box-shadow: 0px 0px 8px rgba(0,0,0,0.3); position: relative; z-index: 90; } .ribbon-wrapper-green { width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; right: -3px; } .ribbon-green { font: bold 15px Sans-Serif; color: #333; text-align: center; text-shadow: rgba(255,255,255,0.5) 0px 1px 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); position: relative; padding: 7px 0; left: -5px; top: 15px; width: 120px; background-color: #BFDC7A; background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45); color: #6a6340; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); box-shadow: 0px 0px 3px rgba(0,0,0,0.3); } .ribbon-green:before, .ribbon-green:after { content: ""; border-top: 3px solid #6e8900; border-left: 3px solid transparent; border-right: 3px solid transparent; position:absolute; bottom: -3px; } .ribbon-green:before { left: 0; } .ribbon-green:after { right: 0; }

Wednesday, 16 July 2014

Best places to put the keywords for Search Engine Optimizarion!

How to increase your website rank? Through SEO?
Yes..But how to work with it?

SEO especially work with the words.
For that we should know our website relevent words and WHERE TO PUT IT.
So here are the text which indicate where to put your website relevent words.

Here is a list of places where you should try to use your main keywords.

Keywords in the <title> tag(s).
Keywords in the <meta name="description">
Keywords in the <meta name="keyword">
Keywords in <h1> or other headline tags.
Keywords in the <a href="http://yourcompany.com">keywords</a> link tags.
Keywords in the body copy.
Keywords in alt tags.
Keywords in <!-- insert comments here> comments tags.
Keywords contained in the URL or site address, e.g., http://www.keyword.com/keywordkeyword.htm.

Saturday, 5 July 2014

How to disable right click , F12 key and Direct link access?

Stop users from stealing your website images, copying content, or from inspecting the source.

In order to setup a security as above , the first is to disable right click ,disable F12 key and then disable direct link access.

Direct link access means that a user get full path of image by writing 'view-source:' before the domain name.
After getting the full path, user will type the full path of image in address bar to access images, So we have to avoid this attack also.

Use this code in your header file or where ever you required.

<body oncontextmenu="return false;">
Fires when the user clicks the right mouse button in the client area, opening the context menu.

<meta http-equiv="imagetoolbar" content="no" />
This turns off Internet Explorer's image toolbar that appears when you hover over an image.
Use this code within <head > tag.

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]
Write this code in your .htaccess file

Monday, 16 June 2014

How to style table using CSS?

No explanation needed for you buddy :)
This is as simple as you see here..

Table 1

Html code for Table 1

<table id="gradient-style" summary="Meeting Results">
<thead>
<tr>
<th scope="col">Employee</th>
<th scope="col">Division</th>
<th scope="col">Suggestions</th>
<th scope="col">Rating</th></tr>
</thead>

<tfoot>
<tr><td colspan="4">Give background color to the table cells to achieve seamless transition</td></tr>
</tfoot>

<tbody>
<tr><td>Stephen C. Cox</td><td>Marketing</td><td>Make discount offers</td><td>3/10</td></tr>
<tr><td>Josephin Tan</td><td>Advertising</td><td>Give bonuses</td><td>5/10</td></tr>
<tr><td>Joyce Ming</td><td>Marketing</td><td>New designs</td><td>8/10</td></tr>
<tr><td>James A. Pentel</td><td>Marketing</td><td>Better Packaging</td><td>8/10</td></tr>
</tbody>
</table>

CSS code for Table 1

Table 2

Html code for Table 2

<table id="pattern-style-a" summary="Meeting Results">
<thead>
<tr>
<th scope="col">Employee</th>
<th scope="col">Salary</th>
<th scope="col">Bonus</th>
<th scope="col">Supervisor</th></tr>
</thead>
<tbody>
<tr><td>Stephen C. Cox</td><td>$300</td><td>$50</td><td>Bob</td></tr>
<tr><td>Josephin Tan</td><td>$150</td><td>-</td><td>Annie</td></tr>
<tr><td>Joyce Ming</td><td>$200</td><td>$35</td><td>Andy</td></tr>
<tr><td>James A. Pentel</td><td>$175</td><td>$25</td><td>Annie</td></tr>
</tbody>
</table>

CSS code for Table 2

Table 3

Html code for Table 3

<table id="pattern-style-b" summary="Meeting Results">
<thead>
<tr>
<th scope="col">Nation</th>
<th scope="col">Capital</th>
<th scope="col">Language</th>
<th scope="col">Unique</th>
</tr>
</thead>
<tbody>
<tr><td>Japan</td><td>Tokyo</td><td>Japanese</td><td>Karate</td></tr>
<tr><td>South Korea</td><td>Seoul</td><td>Korean</td><td>Ginseng</td></tr>
<tr><td>China</td><td>Beijing</td><td>Mandarin</td><td>Kung-Fu</td></tr>
<tr><td>Indonesia</td><td>Jakarta</td><td>Indonesian</td><td>Batik</td></tr>
</tbody>
</table>

CSS code for Table 3

Menu bar