You are currently browsing the archives for the Web Design / Dev category.
22Apr2010

Magento installation looping error fix

I’ve recently started learning Magento part of the installation gave me some trouble so I thought I’d share my fix. On the database config page there is a base URL text field, generally this will be prefilled with your current location. On submitting this page if you are seeing the following error…

"Unable to read response, or response is empty"

…the general advice seems to be uncheck the “Skip Base URL validation” checkbox. Doing caused a never-ending loop for me that would halt my installation in it’s tracks. I think this is being caused by something in the sample data sql. Running the install without the sample database and unchecking “Skip Base URL validation” bypasses the looping error. Of course this does leave you with a completely empty shop.

Filed under: Web Design / Dev — Di @ 3:07 pm
06Oct2009

An EM Font Calculator

I’ve just cobbled together a little jQuery powered form to help when calculating (or recalculating) font sizes in EMs. I’ve stuck it up here in case it’s useful to anyone else.

Filed under: Web Design / Dev — Di @ 5:39 pm
29Jan2009

Cubecart – some things to consider

After building a website using the Cubecart software I have made the following observations.

On the front end:

  • The search results page doesn’t have any text for when your search turns up no results.
  • When you add an item to the basket there is no obvious visual clue that the item was added successfully.
  • Longer product options in the dropdowns are cut off.
  • The thumbnail images randomly disappear.

In the admin area:

  • When editing a product or it’s options clicking submit takes you back to the main product list, this makes editing very long winded.
  • Tidying orphaned thumbnails deletes any thumbnails whose larger image is contained in a subfolder.
  • Adding extra images to products involves searching through all of your uploaded images.
  • The setting for maximum file size for uploaded images is apparently ignored.
  • Image file names are not tidied, i.e spaces converted to underscores, etc.
  • There is no facility for adding alt tags to the uploaded images.
  • The stock level works on a whole product, not on specific options with that product.
Filed under: Web Design / Dev — Tags: — Di @ 2:52 pm
13Jan2009

Installing Perl and the Lighttpd webserver on an iPhone

This guide assumes that you have jailbroken your iPhone with firmware 2.2 and have Cydia and MobileTerminal installed.

Installing Lighttpd and Perl

Open Cydia, go to the search tab and search for ‘lighttpd’. Click on the resulting listing and install Lighttpd.

To install Perl you need to add the CoreDev repository to Cydia. Open MobileTerminal and type the following:

(¬ denotes a wrapped line.)

iPod:~ mobile$ wget http://coredev.nl/cydia/coredev.pub
iPod:~ mobile$ apt-key add coredev.pub
iPod:~ mobile$ echo 'deb http://coredev.nl/cydia iphone main' > /etc¬
/apt/sources.list.d/coredev.nl.list

Now when you run Cydia you should see the CoreDev repository in the sources list, look for an entry called something like Perl 5.x.x-x and install it.

Configuring Lighttpd and Perl

Lighttpd will install without a config file or a place to put your website HTML files so you now need to create these. Open MobileTerminal, you should find yourself at /var/mobile. If not, go there by typing the following and creating a folder called Sites:

iPod:~ mobile$ cd /var/mobile
iPod:~ mobile$ mkdir Sites

Next you need to create the Lighttpd config file. Navigate to the /usr/etc folder and create the file lighttpd.conf:

iPod:~ mobile$ cd /usr/etc
iPod:~ mobile$ nano lighttpd.conf

This will open the nano text editor. Type the following into your file:

server.document-root = "/var/mobile/Sites/"
server.port = 80
mimetype.assign = (
    ".html" => "text/html",
    ".txt" => "text/plain",
    ".jpg" => "image/jpeg",
    ".gif" => "image/gif"
)
server.modules += ( "mod_cgi" )
cgi.assign = (
    ".pl" => "/usr/bin/perl"
)
index-file.names = (
    "index.html",
    "index.pl"
)

This is the minimum you need in your config file to run Lighttpd. This config sets the location of the folder that houses your HTML files that you created earlier, sets the port, assigns a few basic file types and tells Lighttpd where to find Perl.

Now save the file by swiping diagonally down and to the right onscreen until the cursor goes red, then press the letter O. To quit nano swipe diagonally down and to the right again and press X.

You can check the syntax of the config file by typing the following:

iPod:~ mobile$ lighttpd -t -f lighttpd.conf

Testing the webserver

In order to test the webserver you need to create a test HTML file and save it to your /var/mobile/Sites folder as index.html.

Get the IP address of your iPhone in the network settings panel and make a note of it. Go back into MobileTerminal on your iPhone and type the following to temporarily activate Lighttpd:

iPod:~ mobile$ lighttpd -D -f lighttpd.conf

Now try and load the iPhone’s IP address in a browser on your computer, you should see your test index.html file.

Starting up Lighttpd automatically

Open MobileTerminal, navigate to /usr/bin and create a shell script containing the previous start up command:

iPod:~ mobile$ cd /usr/bin
iPod:~ mobile$ nano lighttpd-startup

Then inside nano:

#! /bin/sh
lighttpd -D -f /usr/bin/lighttpd.conf

Save the file then and quit nano. This file needs to have its permissions altered to enable it to run:

iPod:~ mobile$ chmod 755 lighttpd-startup

Now for the code to make the lighttpd-startup script run on start up:

iPod:~ mobile$ cd /System/Library/LaunchDaemons
iPod:~ mobile$ nano com.lighttpd.startup

Again, inside nano type the following:

(¬ denotes a wrapped line.)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" ¬
"http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>Label</key>
<string>com.lighttpd.startup</string>
<key>ProgramArguments</key>
<array>
<string>/usr/bin/lighttpd-startup</string>
</array>
<key>RunAtLoad</key>
<true/>
</dict>
</plist>

Save the file and close nano. Now the next time you restart your iPhone Lighttpd should automatically start up.

Filed under: Tech, Web Design / Dev — Tags: , , , — Di @ 10:00 pm
21Oct2008

Removing the 3 pixel gap in Hotmail email for Firefox

A while back I wrote a post about removing the 3 pixel gap in Hotmail. While that provided a solution for IE I’ve since discovered another fix that works in Firefox. It’s the same problem as before; a 3 pixel gap is added beneath images, particular to images inside table cells. The problem seems to stem from the font size settings, obviously this shouldn’t affect a table cell that does not contain text. Chalk it up to yet another That Shouldn’t Make Any Difference But It Does™ This time the fix is to add style="line-height: 50%" to the TD tag. You should then end up with the following:

<td style="line-height: 50%">
	<img src="image.gif" width="300" height="50" alt="" />
</td>
Filed under: Web Design / Dev — Tags: , — admin @ 3:35 pm
08Oct2008

How to setup SEO friendly URLs for WordPress on Zeus

UPDATE: Namesco now have a help page for dealing with rewrite.scripts with more up to date info than is contained in this blog post.

Up until a year ago I’d only ever used Apache to host websites. At Oxeye Daisy we host on Zeus webservers. After a lot of fruitless searching on the internet for guides on how to setup SEO friendly permalinks for WordPress hosted on Zeus I stumbled upon the relevant code. I’ve finally got around to tweaking and commenting it. I thought I’d post it here in case anyone else is having the same trouble.

First you need to go to your WordPress admin page and set up the permalink structure in Options > Permalinks. I’ve set mine to /%year%/%monthnum%/%day%/%postname%/ but you may want something different.

The notes in the script assume the requested URL to be http://www.domain.co.uk/blog/2007/10/31/an-example-post/?color=red I’ve added the GET queries so you can see how they are handled, they’re not used in WordPress. This URL is then translated into http://www.domain.co.uk/blog/index.php/2007/10/31/an-example-post/?color=red. Notice the index.php in the middle? That’s the key bit to making all this work.

Save the following code in a file called rewrite.script and upload it to your web space. Note that you will need to uncomment some parts of the script depending on whether your blog is in a sub directory or the top level of your site.

The code is currently set to work with a sub directory of blog. It has only been tested on Namesco servers and it’s set to ignore their specific hosting folders like webmail, controlpanel and tech_support.

RULE_0_START:
# Get the document root path and put value into the SCRATCH array.
# This is the server path not the web URL.
# e.g. /content/DesignerPlus/i/n/domain.co.uk/web/
map path into SCRATCH:DOCROOT from /

# Get the URL without the domain.
# e.g. /test&colour=red
# e.g. /blog/2007/10/31/an-example-post/?color=red
set SCRATCH:ORIG_URL = %{URL}
set SCRATCH:REQUEST_URI = %{URL}

# See if there are any queries in our URL.
match URL into $ with ^(.*)\?(.*)$
# If there are...
if matched then
	# Set a var to path without the domain part.
	# e.g. /blog/2007/10/31/an-example-post
	set SCRATCH:REQUEST_URI = $1
	# Set a var to the passed queries.
	# e.g. colour=red
	set SCRATCH:QUERY_STRING = $2
endif
RULE_0_END:

RULE_1_START:
# This is setting a var to the server path and sub folders.
# e.g. /content/DesignerPlus/i/n/domain.co.uk/web//blog/2007/10/31/an-example-post
set SCRATCH:REQUEST_FILENAME = %{SCRATCH:DOCROOT}
set SCRATCH:REQUEST_FILENAME . %{SCRATCH:REQUEST_URI}

# Check to see if the file exists.
look for file at %{SCRATCH:REQUEST_FILENAME}
if not exists then
	# The file wasn't found so is it a folder?
	look for dir at %{SCRATCH:REQUEST_FILENAME}
	if not exists then
		# No folder either. So now check the URL for special hosting folders.
		match SCRATCH:ORIG_URL into % with ^/webmail|^/tech_support|^/controlpanel
		if matched then
			# If a special folder was requested end the script.
			goto END
		else
			# There were no files, folders or special folders so set the new URL.

# -- Sub directory -------------------------------------------------------------
			# If the blog is in a sub directory...
			# e.g. /blog/index.php/2007/10/31/an-example-post
			match SCRATCH:REQUEST_URI into $ with ^/blog(.*)
			if matched then
				set URL = /blog/index.php$1
# -- Top level -----------------------------------------------------------------
			# If the blog is in the top level of the site...
			# e.g. /index.php/2007/10/31/an-example-post
			else
				set URL = /index.php%{SCRATCH:REQUEST_URI}
				# If there is only a top level blog you can remove the
				# match and surrounding if statements.
			endif
# -- ---------------------------------------------------------------------------

			# Go to the next rule.
			goto RULE_2_START
		endif
	endif
endif
# If files or folders were found end the rewrite script.
goto END
RULE_1_END:

RULE_2_START:
# Check for queries in the requested URL.
match SCRATCH:ORIG_URL into % with \?(.*)$
if matched then
	# If queries were found add them to the new URL.
	# e.g. /index.php/2007/10/31/an-example-post/&colour=red
	set URL = %{URL}&%{SCRATCH:QUERY_STRING}
endif

# -- Sub directory -------------------------------------------------------------
# If you only want to rewrite the sub directory uncomment this bit.
match SCRATCH:ORIG_URL into % with ^/blog
if matched then
# -- Sub directory ends --------------------------------------------------------

	# End the script.
	goto END

# -- Sub directory -------------------------------------------------------------
endif
# -- Sub directory ends --------------------------------------------------------
RULE_2_END:
Filed under: Web Design / Dev — Tags: , , , — admin @ 10:38 pm
10Jul2008

Running XP on a Mac

I’ve been designing and building websites for 10 years now and in all that time I’ve used a Mac as my working machine along with a PC to test on for IE. Having a spare copy of Windows XP about I bought a copy of the Parallels virtualisation software. I installed Parallels along with XP on an iMac with 1Gb of RAM, it does run on 1Gb but it is fairly slow. I immediately upgraded my iMac to the maximum 3Gb (I really didn’t need much in the way of persuasion). With 3Gb available I set the ‘PC’ to use 1Gb of this, it made massive difference in the speed, it’s every bit as fast as the actual PC I had been using for testing.

I now have a ‘PC’ with XP SP2 and IE6 as well as a ‘PC’ with XP SP3 and IE7 along with the multiple IE hack running. I also threw on Firefox 3 for good measure. The great thing about using Parallels is the ability to copy the entire PC thus avoiding any cockups with rogue software. I’ll probably set up a software testing PC that won’t matter if I screw it up. XP uses my existing Mac internet connection so I didn’t even have to bother with setting up any of the networking.

I had a go at installing Xubuntu, it did install but so far has no net connection. I will have to look at this further, it would be great to be able to test Linux browser compatibility too.

Finally I can design, build and test websites on one machine.

Filed under: Web Design / Dev — Tags: , , , , , — admin @ 10:04 pm
12Jun2008

A fix for phpMyDirectory’s category listing

Over the past few weeks I’ve been working on a directory website built using phpMyDirectory. Being unfamiliar with the software I’ve been converting the default theme over to the new design, swapping out the many nested tables for divs in the process. I’ve managed to remove most of the tables from the theme templates but some remain in the form of generated lists. As I don’t want to start fiddling around with the core application files I created this function to tidy up the home page category listings.

My fix will strip out the table and the unecessary ul tags that surround each list element and display the categories as a simple unordered list with the class of category-listing for easy styling.

In the template folder open the index.php and look for the following line:

echo $category_table;

Comment this line out and then paste in the code below.

function category_table_tidy($category_table) {
	$remove = array (
		'<table border="0" cellpadding="0" cellspacing="0" align="center" width="90%"><tr>',
		'<td valign="top" width="33%"><ul class="category_ul">',
		'<span class="text_large_bold">',
		'<span class="text_large_bold_grey">',
		'&nbsp;',
		'</span>',
		'</ul>',
		'<td>&nbsp;</td></tr></table>'
	);
	$category_table_tidy = str_replace($remove, "", $category_table);
	$category_table_tidy = eregi_replace("\([0-9]\)", " <span>\\0</span>", $category_table_tidy);
	echo '<ul class="category-listing">'.$category_table_tidy.'</ul>';
}
category_table_tidy($category_table);
Filed under: Web Design / Dev — Tags: , , , — admin @ 8:03 pm
08Jun2008

diturner.co.uk redesign

I was getting bored with the previous design so I thought whilst upgrading to the latest WordPress I should give the place a new lick of paint. This time I’ve gone for a typographic style, making more use of spacing and stripping things back. I’m still working out the IE bugs and I haven’t even looked at it on a mobile browser yet so it should be considered to be in beta mode.

Filed under: Web Design / Dev — admin @ 7:15 pm
06Jun2008

CMS standards

At Oxeye Daisy we often build small websites (10ish pages). For a website of this size we may use WordPress and bend it into a CMS. While not ideal it does work quite well for our customers who want the convenience of being able to update their site without shelling out a lot of money for something bespoke.

Recently we’ve had to make some updates to a couple of CMS websites that were built by other agencies. Both times this involved learning each CMS and their idiosyncrasies. This is when using something ’standard’ would have been helpful. The only problem is I’ve tried Plone, Drupal and various others and found them to be way over complicated. I mean, if I can’t figure our how to add a page to a section of a website how can I expect customers to use it? A good CMS should be something that someone just ‘gets’, clear, intuitive, simple.

I think we’re getting near the point of having to build our own small scale CMS, which of course leads back to my previous problem with non-standard CMSes. I’ll be creating the same problem for someone else in the future. Unless I can find a straight forward off the shelf CMS this is what I can see my next in-house project being.

Filed under: Web Design / Dev — Tags: , , , , — admin @ 3:12 pm
Older Posts »