Save Complete HTML Pages with Pure PHP

screenshot

In order to save complete pages along with all resources such as images, styles and scripts, you could use your browsers, however browsers also save accompanying files in separate folder. For example if you wanted to save some page called sample, browser would save the complete page along with folder named sample_files. Browsers also have their proprietary formats such as MHTML (Mime HTML) for Internet Explorer or MAFF (Mozilla Archive Format) for Firefox but with these you are limited to opening these files in these browsers only which isn’t good or always ideal.

It would be good if one could save all resources of an html page in a single file which can be opened by all browsers which is the html format itself. In order to achieve that, I have created a class that helps you save entire page in a single HTML file along with all its resources, no side folder created, all images, CSS and scripts reside in that single html file which of course can be opened in any browser.

This allows really cool possibilities such as creating your own app allowing to save complete html pages like evernote, creating browser extensions for the same purpose or saving your favorite pages to cloud and more you can put the class to your best use and needs :)

Download Class at PHPClasses

Don’t forget to rate the class :p

Free Twitter Bootstrap Admin Template

Previously I had shared an admin template which was custom-made. Today I share an admin template based on popular Twitter’s Bootstrap CSS framework. It has a lot of benefits such as responsive design, response images, a host of ready-made styles and icons that you can use.  Take a look at some of the images in below given gallery, click to see in full view:

Go ahead and download it here and have fun :)

Download

Free Admin Template

While working on a website or your custom CMS, you need to have an admin template and if you are already provided with one by designer or anyone, that’s good but sometimes you don’t have that option or you want to work on your personal project for which you need the admin template but designer isn’t available or you don’t want to buy an admin template or hire a designer. I often come across this requirement where I need an admin template which should have these features:

  • Easy to customize
  • Slick and nice looking interface
  • Can be modified to as many links as needed, suitable for small to big websites
  • Nice button and form styles
  • Nice looking info messages
  • Can be used as admin for any kind of website

Today I share with you guys an admin template that I created for my personal use. That’s free, you can use it for personal or commercial use.

Screenshots:

This slideshow requires JavaScript.

Download

Vertical Text with CSS

First of all, I wish you a very happy new year, a year that brings a lot of happy moments to your life and makes you prosperous in all respects.

For the first post of new year, I will discuss on how to create vertical text with CSS (the post doesn’t necessarily discuss something new like a new year ! ) that works in all browsers including IE6.  You might have seen the solution to this problem in terms of images or even javascript  but let’s see how we can achieve the same effect with just CSS or CSS2. Before we move any further, you might want to check out the simple demo first:

Demo 1: Vertical Text With CSS

After seeing the demo above, you might have already guessed the trick. Anyways, the trick is that you should apply a width of 1em and text-transform set to uppercase to the element you want to make the text of vertical something like this:

 width:1em;
 text-transform:uppercase;
 

There is one more step. The text that you want to appear vertically should be separated by an space or more specifically each letter should be separated by an space character, that is exactly where a width of 1em plays. Here is an example:

H E L L O

Now you might have seen the vertical text often on blogs posts (or other places) where the date information is shown vertically. I have also created a demo page you can check out:

Demo 2: Vertical Text With CSS

So that is all there is to creating vertical text with CSS. I hope you came to know about something useful.

Flag of Pakistan with pure CSS

With no much work on the first day in new company I have joined, a sudden thought of creating Pakistan’s flag with pure CSS came into my mind. So I started off with that and came up with the desired result using CSS only.

See the Flag of Pakistan

Creating orange stick, white and green rectangles with specified background color was easiest part. As for moon, naturally I used the border-radius CSS3 property. Basically I created two divs with border-radius value set to 90px to create perfect round shape (360/4 = 90). I gave the background color of white and green to these divs and used absolute positioning and z-index to put green round shape over the white round shape but at little distance so that the white div looks like a moon. I would suggest you to know this very useful  CSS trick, something I knew about and used throughout the creation of the flag.

Absolute Positioning Inside Relative Positioning

You know CSS3 isn’t supported in IE<=8, so I used CSS3Pie to get the support for border-radius CSS3 property in IE including IE6.

The trickiest part was creating the star shape but then again once you know how to create CSS triangles, things become easier. To get the star working correctly in buggy as always IE, I used the CSS conditional comments. The star looks slightly bigger in IE but still not bad the effort.

The flag was tested working fine in FF 3.6, IE 6 and above, Chrome and Safari.

Download Source

StyleTable jQuery Plugin

While working on a project few days back, I came upon a requirement to make html tables look pretty and for that I created a function in jQuery to style a table by calling that function on a given table. Later I thought of converting that function into more usable piece of code – a jQuery plugin and I introduce the StyleTable jQuery plugin.

.

.

.

Using the plugin is as  simple as this one line of code:

  $('table').styleTable();

Off course,  you can also apply the StyleTable plugin based on table classes or ids or even their attributes. See the plugin documentation for more information and examples.

See the plugin in action along with documentation

Download TableStyle Plugin With Examples

.

CSS: Attribute Selectors

In CSS, we are mostly accustomed to targeting elements based on either IDs or Classes. Another way what is know is Attribute Selectors can also be used for the same purpose. They turn out to be extremely handy in some situations too.  In fact it is worth having a know about them because they add a lot to your web design or development arsenal.

.

.

.

Consider this html markup:

<a href="www.example.com" rel="link" id="myid" class="myclass">I'm a link !!</a>

Normally, you would style the link like this using its id or class like this:

a.myclass
{
  background-color:#ff0000;
}

 /* or */

a#myid
{
  background-color:#ff0000;
}

However, you can style that link using its “rel” attribute too using this attribute selector:

a[rel="link"]
{
  background-color:#ff0000;
}

There is a lot more to attribute selectors discussed below with different situations.

Attributes With Exact Value

In the above example, we targeted hyperlink having exact value “link” for its “rel” attribute. Now consider following html markup:

<a href="www.example.com">I'm a link !!</a>
<a href="www.secondexample.com">I'm a link !!</a>
<a href="www.thirdexample.com">I'm a link !!</a>

Suppose, you wanted to style each of the above link differently, you can do so by specifying exact value for href attribute:


a[href="www.example.com"]
{
  background-color:#ff0000;
}

a[href="www.secondexample.com"]
{
  background-color:#00ff00;
}

a[href="www.thirdexample.com"]
{
  background-color:#0000ff;
}

Further, you can even use that to style form elements like this:


input[type=text]
{
  background-color:#0000ff;
}

input[type=checkbox]
{
  background-color:#0000ff;
}

input[type=radio]
{
  background-color:#0000ff;
}

Attributes Beginning With Certain Value

Sample html markup:


<a href="sample-page.html">I'm a link !!</a>

To style the link, we use this attribute selector using “^=” which targets element attribute beginning with specified value:


a[href^="sample"]
{
  background-color:#0000ff;
}

Attributes Ending With Certain Value

Sample html markup:


<a href="sample-page.html">I'm a link !!</a>

To style the link, we use this attribute selector using “$=” which targets element attribute ending with specified value:


a[href$=".html"]
{
  background-color:#0000ff;
}

Attributes Containing Certain Value

Sample html markup:


<a href="sample-cool-page.html">I'm a link !!</a>

To style the link, we use this attribute selector using “*=” which targets element attribute containing a certain value at any place in it.


a[href*="cool"]
{
  background-color:#0000ff;
}

Attributes Containing Spaces

Sample html markup:


<h1 rel="lorem ipsum">I'm a heading !!</h1

To style the link, we use this attribute selector using “~=” which targets element attribute containing a value separated by space.


h1[rel~="lorem"]
{
  background-color:#0000ff;
}

Attributes Containing Dashes

Sample html markup:


<h1 rel="lorem-ipsum-dolor-sit-amet">I'm a heading !!</h1

To style the link, we use this attribute selector using “|=” which targets element attribute containing a value separated by dash.


h1[rel|="lorem"]
{
  background-color:#0000ff;
}

Matching Multiple Attributes

It’s interesting to know that you can also use multiple attribute selectors in the same selector which matches all specified. Consider this html markup:


<h1 rel="heading" title="Hello There">I'm a heading !!</h1

h1[rel=heading][title*=Hello]
{
  background-color:#0000ff;
}

Matching Specific Attributes

If you wanted to style all links that have “title” attribute set, you do so this way:


a[title]
{
  background-color:#0000ff;
}

Browser Support Information

These attribute selector can work in all modern browsers. They will work in IE7 too but not IE6.