Problems viewing in different browsers

I had the most  disheartening evening a few days ago after I had been to an internet cafe in town to check my site on a different computer and operating system.

I use an iMac with Firefox and its all updated and in perfect health. The internet cafe uses old pcs with Internet Explorer version 6 and Firefox version 2.

The difference in the way these different browsers view the site is amazing! I was prepared that it might not be the same but I wasn’t prepared that it would look shit!

Below is a list of some of the problems I encountered and how I solved them –

UGLY FONT – I had chosen a serif font for some reason. Well I did it coz I thought it looked good. But the thing is that it only looked good on the first font of the list (in the css there is a list of fonts to use and the browser just goes thru the list till it finds one that it is able to use – I found that out in a book I read) and then rubbish on all other fonts in the list. My first font was Baskerville so its not really a common one. I’m totally changing to arial now!! Now I know why almost all websites use this font!

MASSIVE TEXT – Yeh, for some reason the text was huge! I think this is also to do with the serif font selection that I chose. Because Baskerville looks real small for its point size I had the font set pretty big and when viewed in another font it looked completely stupid. I have obviously changed that now and the font is about the size of this text here.

PNG FILES HAVE NO TRANSPARENCY – This was something I was not prepared for. The png file which I had used for my logo in the title banner looked actually total crap! It wasn’t a nice white logo on a black background, it was a white logo on a sort of opaque grey square that was just laid over the top of my website. Yuck!

PNG or GIF? – This was the issue I was faced with. Do I place a gif file in there instead, which has a much larger file size and would be bad for ppl with a slow connection (ie – a lot of New Zealand) but keep the transparency. Or do I still use a png but I have to recreate it with the exact colour of the background, meaning that I would have to re-make the png file if I were ever to change the colour of my header. Its not ideal either way but I decided to go with the png because of the file size and also because gif files are real old now and png is the way to go really. Its just the older browsers that couldn’t read them properly. If it was up to me everyone would have an up to date version of firefox! But I understand why its not like that 🙂

CHECKOUT NOT WORKING – Now this one is something that I can do less about without a greater knowledge of what I am doing. Basically in IE6 the shopping experience isn’t as good as it is in my browser. There is some text that is bigger than it should be and its just not ‘nice’ like I want it to be. So 😦  More worringly for me tho was that in the firefox version 2 that I tried I could not get thru the checkout as it did not give me a box to fill in for country but it required this to be filled in. How can I fil in a box that doesn’t exist? Stupid thing!

So to solve this problem I haven’t solved it at all, I have just put a note in the FAQs saying that the site has been developed for latest versions of firefox, chrome, safari and internet explorer. I hope that no one will be offended that my site doesn’t work on their browser and I basically told them to get with it and download a new one. ooh well.

I’m going to go check it again later so I hope it now works well enough so that I am not embarrassed of my site!!

I’m totally in love with firebug!

Wow -css is awesome!

I have been able to style my whole website in new colours without affecting anything else. I haven’t ruined anything! I have just coloured the site in line with the colours of the brand. Its sooooooo exciting!

My two most useful tools have been a book called Head First HTML with CSS & XHTML
and firebug.

Why I found an old-fashioned book to be useful –

I’ll talk about the book first – it has been really great for a few reasons. One is that I could read it while my boyfriend was on the computer, meaning that it was more useful than a website or a blog. I was able to read it while outside tanning on the balcony!

The other reason is that it is written in a style called Metacognition, which basically means that it is easy for the brain to pick up and remember. And I think it really works personally. Well it seems to have worked for me!  And its also not boring and I could just read it like any normal book.

And finally it has just been really good to have the whole HTML thing explained from basic principles as I had no knowledge of it at all until now. I really understand CSS better now that I have begun to understand what came before it and I am really keen to know more and more and more now!!!

Why I love firebug –

Wow – its amazing! I never knew that websites could be so fun! With firebug there is hours of fun to be had and nothing bad can happen, so that makes it even more fun!

Basically it allows you to see what will happen when you alter the css. But it doesn’t actually change anything so, as I said before, nothing can go wrong. Its a great way to test things out before actually implementing them and also its good to show you which line of css to alter. that was what I found extremely useful.

Here you can see what happens when you hover over an element on the page. (In this example I am hovering over the footer element)

At the bottom of the browser window firebug lists the html on the left and the css on the right. So then you can go into the css on the right and make changes and then look at the screen above to see what those changes will affect. Its so awesome!!

I could change the whole appearance of my site without ruining anything and totally go wild with the colours and styling. It was a great education for me just to play with it. Playing after all is supposed to be one of the greatest ways of learning things.

So I would really recommend trying firebug if you haven’t already. Its just an addon for firefox and it takes no time to install and its really easy to use. And actually while adding the link to this page I saw that firebug has an option for Safari, Opera and IE, which is called firebug lite – so thats cool!

Here is a screen shot of my new colours, do you like them?

Images not showing up in Ubercart site – Problem solved!

So I have fixed the problem that the images would not appear in my store, which I have built using Ubercart – which is awesome! So easy to use!

Anyway – the solution was soooo simple.

All I had to do was to go into module preferences and turn off ‘imagemagick’ in ‘Image API’

This is all it took. Basically it was looking for Imagemagick when it could have been using the built in image viewer instead. It is now doing that and everything works perfectly!

The site is going really well at the moment and I really think it could actually be used as a shopping site in the future  🙂   I am also going to take a look at my parents website soon too, since they are the real reason I am learning all this stuff! I am grateful to them for that. I would never have got myself to learn these things if it weren’t for them. Don’t you just love family 😀

My Tips for Uploading Drupal Site From Local Computer to Internet

I actually had a few problems getting the website transferred from the local host (my computer) to the internet.

Here’s what I did –

I use the free FTP (File Transfer Protocol) called Filezilla, this works on Mac and PC and its real easy to use. There are instructions to explain exactly what to do. They are really clear I think, but I also think that if someone had used another FTP then they could probably work out how to use Filezilla without instructions.

Uploading the files is just a case of highlighting the files on the left side of the filezilla interface, and right-clicking (or control click with a Mac) and uploading to the right-side, where the destination file has been chosen.

By the way- the destination file will be called something like ‘public.html’ and your web hosting company will tell you what this is. My web-hosting company just told me that info in an email where they also outlined the password and username to use. I use the Kiwi Webhosting Company because I am in New Zealand and wanted to use a local company. I bought my domain name from GoDaddy.com and I could have got web-hosting thru them as well but I decided to go with the Kiwi Webhosting company because I am new to all this and they have really good customer help, I am sure GoDaddy would be fine for hosting tho, I am just a bit old-skool sometimes and like to keep it local.

Uploading to the web – Points to remember

Computers are unforgiving – you have to upload the files in the correct folder!

The first mistake I made was to upload the whole ‘drupal’ file from within MAMP. This was wrong because in the top level of the public.html folder there has to be something called index.html. What happens is that the website looks for a default page to upload first and this index file is is the one it is looking for, or at least thats how I understand it and I am sure that is close enough to what happens.

So really how that affects me is that the top level was just one file called drupal and there was nothing for the website to find as a default page.

The solution was to delete the files and start again, which isn’t so bad.

Upload a new settings file to point to your new database.

When you choose your webhosting provider one of the things you have to look out for is to make sure that they have MySQL (which seems to be pronounced my sequel) and PHP, both version 5 or above. Now I don’t really know what these are but I do know that MySQL is to do with the database and that the database stores all the information for my website. I also know that this database was once stored in MAMP and has now been transferred over to my webhosting provider. This was fairly easy after a video tutorial at Learn By The Drop.

Because of the change in location I now have to make a new ‘settings.php’ file to replace the existing one, the purpose of is so that it will point to the correct database and the website will work  😀

This settings file is stored in the defaults foder, inside the sites folder which is inside the drupal folder.

I made a copy of the file and opened it using Text Wrangler (a free programme for writing html and css and php files) and then I found the line that needed changed and I changed it and saved it. I then uploaded it into the correct location on the right side of the Filezilla screen and I was going to be looking at a site on the actual internet!

It should have been so easy….

But even tho I had followed instructions from a few different sources on the internet I just could not get the combination of the name and the password correct. I was upset about it for days. I just could not work out what to do. When it suddenly occured to me…

Ask for help if you need it!

All I needed to do was to email the webhosting company and ask their advice. It wasn’t even difficult. They were really quick to respond and asked me to send the settings.php file as well as to tell me where this file was saved in the file tree.

And then they told me what I had done wrong.

Here is the text I was changing (line 92 in my file) – $db_url = ‘mysqli://username:password@localhost/databasename’;

So I changed username to my username as it is for the webhosting company, the same one that I use to log in to my cpanel. The same with the password. I then put my site name as the localhost and the database name is the one which I created when I copied the database from MAMP to my webhosting provider.

What I did to correct this is that I just changed the localhost back to that word and no longer tried to use the website name. Not sure how that works but it totally does and I am VERY happy with the results!

My site is online and I can work out if this image thing has anything to do with that at all.  Better get back to it…

Aquia Prosper Theme – Visual

Just wanted to record the appearance of my theme at this point…

Header – As you can see, I have an image across the top and the primary links are below this. I like the simplicity of this.

Sidebars – To the left, in the ‘left sidebar’ I have the items available to buy in the store displayed in a list so visible on every page. (yes I know there are only 4 so far – need to create some more designs!)

Under the list of items is the shopping cart – this is only visible on pages which are directly related to the store.

There is no right sidebar at present, keeps it simple…

Main Content – This page is a store page and is displaying one of the designs. You can see that I have not been able to get the image of the t-shirt to show up. The image has been inserted using Ubercart and the theme. It is supported with the ImageCache module and the Views module. I really have to get my site online to see if that will fix it….

Had friends staying for the past week and have ignored my site completely – tut tut!  Better go do it now!!

Choosing a Theme in Drupal

So like I said in the last blog post I have now added Ubercart to my Site and I have started to get real excited coz I can see it in my mind and I can imagine how good it will be once it is finished. Its going to be a shop for hot-rod inspired t-shirt designs- it will be so awesome!

The only problem has been that I think I set myself too big a challenge with the theming.

I think that really there are so many themes out there made by people who know what they are doing that I would be a fool not to start by using one of these and making a site that way. As they are customiseable I wouldn’t have a site that looked like someone else’s, I could make it unique.

So I went for another theme hunt and I tried out a few and came up with Aquia Prosper as my favourite. Its set up for Ubercart already so it will work real well for what I want and also the colours are perfect as I would like to have a theme of black (or grey), white and red. Also its clean and clear and it seems to be really flexible.  It is based on the Fusion theme so I had to download that as well and also the module called Skinr as this is what is used for some of the flexibility with the appearance.

So far it is all going really well and I am super pleased with how it looks and works and I have even managed to get the banner (is that the correct term or is it just header?) at the top to look how I want it to by turning off the title and letting my image stand out. I uploaded a png image for this as it has no background and so I was able to use the grey background within the theme, by getting it to show thru. Its really cool to be able to do that and I am really happy with the result.

The problem I am having at the moment is that the images aren’t working as they should. I am not sure if this is because I have two image modules downloaded or if its something I have done. Thats the problem with not really knowing what I am doing – it is so great when its going well but when a problem comes along I can spend hours and hours trying to solve it and not knowing what to do. It has certainly used up a lot of time!!

What is happening is that the images I am adding in for the products are not showing anywhere. They do not show in the product description, or in the catalog or the cart. This is all set up and should work straight off with this theme so I am a bit confused as to why it isn’t. Its quite frustrating!

I have been looking on the internet and the problem appears like it may be something that a lot of people have and that many ppl can only get around it by having the site on a remote server (ie – on the actual internet) and not the local host (ie – on my computer at home) so I am going to upload, or at least I thought I would “just upload” but its proving to be more difficult than that…
—–

Thats me just back to add this note – all I needed to do was to ask the web hosting service for an upgrade to their premium service so I can get 100MB of disk space rather than just 10MB.

Ah so easy!!