Login Screen

TruPain

Hello and thanks for reading this and helping me out a little bit if you can.

Is there any way that I can add an image to the login screen where people enter thier name and password so it is not just 2 boxes and a submit button, but rather than image that covers the boxes and has the boxes cut through the image?

Also, is there a program of any kind that I could use to view and edit the php files? I think this would also work for me but I am not 100% sure.

Again, thanks for the answers wether they are good or bad for me to hear.

:EDIT:
I know html very well, but my problem lies in the fact that I know next to nothing about php.

lordfrikk

Not sure what do u mean by that "add image" thing. Explain further, please.

Tools for viewing and editing PHP are many... I personally after trying many of them sticked to PHP Designer 2007 Pro. Others are for example PSPad, Notepad++ etc. In fact almost every web editor supports php.

jabapyth

so you want an image, and on top of that, you want input boxes? Thats html.
use "position=absolute" in a div style, and set the "top" and "left" attributes of the input boxes so they "float" over the image.

Marston

Or you could create a div with the your picture as the background... (much simpler than anything else suggested in this topic).

bukaida

PHP Designer Pro ver 7.0 is the best PHP editor I have encountered so far.
This is free to try for 30 days. It has an integrated localhost environment and Multiple browser test functionality. Alternatively you can use the HOMESITE by macromedia which has an excelent support for HTML and supports other scriptings too.

As for image problem, marston's solution is the best unless you want to set the image as your entire background.For that you have to set it to
your body tag(U already know that).

TruPain

Ok, sorry for not making this entirely clear...

This is what I would like to do:

This is the original login screen:

This is what I would like for the login screen:

So is there a way to make the login screen basically look like this:

Sorry for the bad pics... I just wanted to get these up here quickly...

I just tried php designer pro, but when I go to preview, I can't adjust anything which is to be expected... is there anything that may have a design mode (like frontpage) so I can position things easier on the screen?

And like I said, I know next to nothing about php... so if someone could tell me a good way to go about doing this, or if it is at all possible, I would be very grateful...

And I am sure just searching these forums there are a ton of links that will answer this next question, but are there any nooby sites that will explain how to do this?

Thanks in advance!

bukaida

Seeing your screen, I can say that you should cut the images in different pieces and go for the table solution.

As for PHP designer pro--Go to localhost, Select a perticular browser (eg. IE)and preview it.

An excellent site of PHP to start with--

http://www.w3schools.com/php/

Hope this helps you.

TruPain

Rhysige

tables = yuck...

Simple CSS positioning of the image will do it fine..

garionw

I use php Designer 2005, its free-ware rather than the new stuff and IMHO, works better.

I would provide a link, but I am unsure who still has the files, I might even upload it tomorrow

the zephyrus

I'd say cut up the image and use tables. The reason being that's how I've most often seen it. CSS has a funny way of coming up in ways other than how you intended. Tables on the other hand are defined, you say this goes on this side of that... etc. If you use Mozilla Firefox, my example would be the start page default, where the fox surrounds the Google box; it works by chopping the fox up and placing his pieces in a table. (bad imagery, sorry) And what's more, doing it with tables makes it easy for you to make the 'O' and 'X' on your picture into a 'Submit' and a 'Reset' button, which is what I think you were going for.