Category Archives: Web Design

Play f4v video file in JWPlayer on IIS web server

I use JWPlayer to play video online, and it plays well with all .flv files. But I got “Video Not Found or Access Denied” error message when I tried MP4 Flash Video format with .f4v file extension, even it worked on the local server. When I typed the video file URL directly in the address bar,  I got a 404 – File Not Found error message in the browser. That means the web server (IIS) has not registered f4v file type by default.

There is a quite easy fix, and all we have to do is to register f4v MIME type with IIS.  Here are how-tos. Continue reading

How to change the main folder of the main domain to a subfolder on JustHost server?

Recently a friend of mine moved all her web sites to JustHost provider web server, and she created each subfolder based on each domain name of web site under her main (home) folder /user/xxxx/public_html. For example, her main domain name is www.herdomain1.com and then she had a subfolder named /user/xxx/public_html/herdomain1/, and so on. There was nothing under the home folder of /user/xxx/public_html/ directly. Here came the problem, wherever the main domain http://www.herdomain1.com was called, the web page showed the directory index of /public_html/ home folder. There is nowhere in the JustHost cPanel to point the main domain to her subfolder of /public_html/herdomain1/.

Challenge:

On host provider server, a home folder is assigned to each user. And the main domain is pointed to the home folder by default. Some host companies, like 1 and 1, can allow you to change the home directory of the main domain points to. But some providers, like JustHost, do not have such feature in their cPanel interface.

Continue reading

How to add a stretchable background image on my web pages

Challenge: It has been a while for me to hand code the HTML for any web sites. Recently I got a task to design a web site for a new building based on the graphical design. In the graphic, there is a cloud background. I would like to set it as a Background Image in the Web Page, which is stretchable no matter what the width of browser is.

Simple Solution:

The simplest way to stretch an image to fit the background of a page is to use the CSS3 property: background-size:

body {
background: url(background-cloud.jpg) no-repeat;
background-size: 100%;
}

Well, not every browsers support the background-size property at this time. If you are using the latest versions of Firefox and Internet Explorer, it might work with it. Continue reading

Your updates can not be visible to everyone now due to the change on Facebook

Facebook has made a change which alters your news feed settings. Because of that, there’s a good chance now that those who you want to see the things you post may not see them at all. On a personal level, this is merely annoying. But on a business level where companies rely on a personal Facebook page as a social media venue for listening and reaching out — not to mention those who rely on it to make sales — this could be detrimental to a bottom line or customer happiness.

Basically, the “New Facebook” has a newsfeed setting that by default is automatically set to show ONLY posts from people who you’ve recently interacted with or interacted the most with . So in other words, for both business and personal pages, unless your friends/fans commented on one of your posts within those few weeks or vice versa – you are now invisible to them and they are invisible to you!! Continue reading

Use HTML tags in SharePoint survey question titles

It is not a good thing when you found out you can’t do anything about the SharePoint survey question titles. You can’t insert a line break, and any other HTML tags. Any formatting HTML tags (<font><i><br>) you put inside the question head, it will show exactly what you entered instead of formatting the question title.

But I need to display a group title on a SharePoint survey today, which should be in different font size and color and on the separate line to look distinguished. As I said above, you could not do so in the SharePoint out-of-box survey. Here is the how-to information after I did some research on the Internet. Hope it will be helpful for you as well.

Step one: insert your own special tag text in the question title.

As explained above, the SharePoint survey will take your HTML tags as the regular text. So you will have to create your own format syntax. For example, you can use “linebreak” as the HTML tag of “<br>”. So your original question is “Please select your business unit and this is the line 2”, and you should change to “Please select your business unit linebreak and this is the line 2”. Please be noted that I have added “linebreak” between “…unit” and “and this…”.

Save your changes and move to the next step.

Continue reading

Custom Site Theme for SharePoint 2007 (MOSS 2007) and WSS 3.0

The easiest and the fastest way to apply the same look and feel on any SharePoint site is creating a site theme. A SharePoint site theme basically consists of theme.inf, theme.css, and image files. Theme.inf file simply represents the title of the theme. Theme.css is a stylesheet file that defines colors, header images and layouts of a site and image files can be referenced here to display on the page. By creating a custom site theme, you can easily change the style but in fact, writing and editing the stylesheet can be somewhat chanllenging when you have more than a hundred of elements to deal with.

Here is a short procedure of creating a custom site theme named “Ghost”:

1. Copy any theme folder in “C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATETHEMES” folder and paste with its name replaced with “Ghost”. In this example, copy GRANITE folder.

2. In Ghost folder, rename GRANITE.INF file to GHOST.INF in upper case.

3. Open GHOST.INF file with notepad.

4. Change the value of title under [Info] to Ghost.

5. Replace every word, Granite, under [titles] with Ghost.

6. Open “C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATELAYOUTS1033SPTHEMES.XML” file with notepad.

7. Add the following lines under tag:

Ghost
Ghost
Ghost theme.
images/thghost.gif
images/thghost.gif

Notice that preview and thumbnail paths are images/thghost.gif. By default, MOSS 2007 and WSS 3.0 will not have such image files.

8. In order to display thumbnail and preview correctly, you will need to capture the screen and save the file in “C:Program FilesCommon FilesMicrosoft Sharedweb server extensions12TEMPLATEIMAGES” folder with thghost.gif name. You can change the .gif file name if you change the thumbnail and preview file names in tag.

9. Do an iisrest for the server to recognize the new theme.

Pretty simple procedure. Now you are ready to test your new theme. In Site Settings, you can now choose Ghost theme; however, the theme will not differ from Granite theme. Now, it is time for you to play with theme.css file!

How to pass InfoPath form fields to SharePoint workflow but hide from Document Library item properties

Challenge:

Create a form in InfoPath 2007 and implement a SharePoint Workflow to it for approval processes. In each step, a Status field in the InfoPat form should be updated automatically according to the change of workflow task status. So a different view in the InfoPath can be opened based on the Status field in the form.

But after the InfoPath was published to the SharePoint (MOSS 2007 with InfoPath Form Services turned on) as Document Library and Content type, the Status field could not be displayed when “Set Field value in Current item” action was selected in the workflow design. Even it was promoted to be available in the SharePoint document library.

Continue reading

How to get the web site style back in IE 8

image I did not know it was IE 8 made my website act weird till after I spent a lot of time on the code reviewing and testing on different browser. Well, to be honest, it was a trick issue. Since all of my web pages look great in IE 8 on the test web servers and development servers, and even on the production servers if we are using internal IP. But all of our website’s drop down menu items messed up in IE 8 if we access to the production servers with the external domain and IPs. Later on, when we accidently switch the IE 8 to Compatibility View mode and these style issues went away, we concluded that it was IE 8 upgrade caused the problem.

And we also learned from the IE 8’s Compatibility View Setting that all Intranet web sites are displayed in Compatibility View automatically. That was why our website problem could not be spotted internally until a complaint email from the customer outside.

Continue reading

Add Google Driving direction gadget to your webpage

Last week, I got an email from Google and was asked to test their new Google Driving Directions gadget on our newly re-design web site. If we like it and decide to use it on our web site, then they will mention our website as the feature user in this new gadget public release next month.

I went to their new gadget creator web site (link here), and found there are two basic setting categories. One for the Display setting, and the other is the Gadget Setting.

Continue reading

10 common Web design mistakes to watch out for

This article is from TechRepublic and the information is based on the article "10 ways to improve the design of your commercial Web site," by Chad Perrin.

tenthings_110x85 When you start designing a Web site, your options are wide open. Yet all that potential can lead to problems that may cause your Web site to fall short of your goals. The following list of design mistakes addresses the needs of commercial Web sites, but it can easily be applied to personal and hobby sites and to professional nonprofit sites as well.

1, Failing to provide information that describes your Web site

Continue reading

WordPress MU 1.3 finally here

WordPress MuFrom one blog of my blogroll links, I was happy to hear that there was a newer version of WordPress MU available now. Finally MU has been upgraded nearly a month after the WordPress was upgraded to 2.3 then 2.3.1.

I downloaded the zip file from the official website of WordPress MU and compared it with WordPress MU 1.25a within WinMerge. And I found that there were a lot of files changed, including the include/kses.php. Since I did something changes on kses.php, I had to merge my changes to the newer file then go ahead to upload the new version to my blog sites.

Continue reading

How to forward traffics from my blogger to the same post on my WordPress blog

Before I moved all my blogs to my own WordPress blog platform (http://eblog.lichao.net), I was using blogger (http://lichaonet.blogspot.com) to write articles. I like my wordpress blogs now, but I still want to keep posting new articles on the blogspot site. First, I can use it as my backup or mirror blog sites. Second, I personall think that the blogger is better on Google search than wordPress blogs. But it is very difficult to manage multiple blogs on the same topic. One of these challenges is to centralize all the comments on only one blog site.

Since the wordpress one is my main blog site, I try to collect all blog comments on this blog. What I need to do is to 1) disable all comments feature on other mirror blog sites; 2) create a link to forward all visitors on mirror sites to my main blog for commenting.

Continue reading

How to create a categories link sidebar in classic blogger

Thanks to the new upgrade, blogger finally gets Category option to its bloggers in its both newer and classic versions. I know there are a lot of new features, including this Category one, in the newer blogger, but I still like the classic version because of my FTP setup. So how to create a sidebar with Categories Links is a task of my own instead of waiting for blogger to upgrade its classic version again.

First of all, I really do not want to spend too much digging into the code to put dynamic category sidebar like the new version of blogger. Fortunately I do not have many changing categories for my blog. So a very dumb, simple but effective sidebar was created with the following steps.

Continue reading

How to use Javascript to create a simple text validation bar in your web form quickly

javascript_progRef.jpg I know there are a lot of good and working image validation scripts available now, and they have been used widely on the Internet already. But I just need a very simple and quick way to stop the SPAM robots from directly accessing to my web forms and then saving un-wanted information into the database or sending out emails from the web form.

Since I have ASP, ASP.NET and PHP web forms and I need to update them all with this new validation bar. A cross-programming language solution such as Javascript sounds pretty fit. So I decided to write my own Javascript to stop these bots on my web forms. As a result, a very simple, easy-to-implement validation bar solution was born for your free reference.

Continue reading