Rather ugly looking login

funkyphantom · 22 Oct 2011 at 09:05

Hi guys, Im just testing out a few things and looking at swapping our rather static website to a more 'dynamic' one. Ive always hated the way we log into our website services which is where members of the golf club can see their latest results, other scores, manage competitions and their bar money etc etc.
it can be found here: please ignore the rest of the website as its not the final template and should look a lot better than this once ive finished. http://biggamidlandsection.co.uk/trentham/?page_id=28&preview=true
How could i get a decent looking login that goes with the rest of the site?
for example http://www.trenthamgolf.org/login

FabienO · 22 Oct 2011 at 15:02

Pinch from other sites.

http://www.queness.com/post/821/25-stylish-and-outstanding-login-forms

Also this...

"..or type at least the first three letters of your surname and click find by name..."

is a perfect excuse to use/learn a bit of AJAX

Hyburnate · 22 Oct 2011 at 16:19

Whats your db structure? It also depends how dynamic you want it, the example you gave was nice and clean.

funkyphantom · 22 Oct 2011 at 17:00

Hyburnate said:
Whats your db structure? It also depends how dynamic you want it, the example you gave was nice and clean.

I couldn't tell you what the db structure is to be honest. All it is is an 'iframe' from the company that we use to organise our competitions, membership details and bar accounts etc etc. I just think the 'front end' looks rather ugly, but im guessing it would be quite complicated to build a new 'login' page?

funkyphantom · 22 Oct 2011 at 17:01

FabienO said:
Pinch from other sites.

http://www.queness.com/post/821/25-stylish-and-outstanding-login-forms

Also this...

"..or type at least the first three letters of your surname and click find by name..."

is a perfect excuse to use/learn a bit of AJAX

Could you explain how i could use these examples with this login form?
Thanks

funkyphantom · 24 Oct 2011 at 19:17

anyone?

kingbal · 25 Oct 2011 at 13:29

Yes it's an external site displayed in an iFrame so the question is... do you have access to this 3rd parties code? I'm guessing not?

If you do have access to edit that login page, you can do whatever you like style/functionality wise.

funkyphantom · 25 Oct 2011 at 17:43

kingbal said:
Yes it's an external site displayed in an iFrame so the question is... do you have access to this 3rd parties code? I'm guessing not?

If you do have access to edit that login page, you can do whatever you like style/functionality wise.

The short answer to your question is I don't know. I'll be giving them a call in the morning. They obviously allow people to edit it because i know for sure that my example in my OP use the same company.
If i did get permission to edit it would it be hard to do? What sort of programming would i need to learn to make a decent job of it?
Thanks

kingbal · 26 Oct 2011 at 15:19

If you requirements are only to get a decent looking login then you can acheive this with some basic HTML with CSS and it will be fairly easy to transplant onto their page.

If you do want to mess around functionality wise, the page is written using ASP.NET (not sure if its vb.net, c# or otherwise).

Have a think about exactly what you want to do with it.

funkyphantom · 26 Oct 2011 at 17:02

I think Id rather a nice looking login, that integrates well with the website. I dont mind if it goes back to the way it looks now after logging in. I've just called the company and they said they will send me the API code and a default CSS that I can have a play about with.
Wait for the plethora of questions from me, as i haven't got a clue what to do with the API

Cheers

funkyphantom · 26 Oct 2011 at 17:51

Ok I have the API doc, and some instructions, but im stuck on the first part

which is:

4. Interface Details

The WS-function service is located at...

http://www.GCGoldWeb.com/MemberData.svc

The WSDL documentation (for use, usually, by automated client code building tools) is available at...

http://www.GCGoldWeb.com/MemberData.svc?WSDL

(Please note, for broadest understanding, the structures and functions below are expressed in pseudo ‘C’ – the actual client will be coded in the native language being used.)

NOTE: A certificated HTTPS service location can be provided if required.

Ive gone to http://www.GCGoldWeb.com/MemberData.svc and followed the first instruction, but it doesn't seem to do anything. ( i had to download svcutil.exe first )
also could anyone suggest an 'automated client code building tool'?

Dj_Jestar · 26 Oct 2011 at 19:13

Hyburnate said:
Whats your db structure? It also depends how dynamic you want it, the example you gave was nice and clean.

The OP is complaining about the aesthetics of his site... and you ask about DB structure?!

durbs · 30 Oct 2011 at 12:10

funkyphantom said:
Ive gone to http://www.GCGoldWeb.com/MemberData.svc and followed the first instruction, but it doesn't seem to do anything. ( i had to download svcutil.exe first )
also could anyone suggest an 'automated client code building tool'?

They use a WCF web service so depends on what kind of server side code your site is capable of executing to communicate with it, is it PHP, ASP, .NET?

If .NET, you'd add a service reference to the site within Visual Studio and it would generate the proxy classes for you to talk to the service. Svcutil does a similar thing but is a command line tool to generate the code.

Talking to a web service from .NET (or any platform really) is very simple once you know what you are doing, but if you don't, you have a VERY steep learning curve to get your head round how a web service works.

I'd guess though for a commercial service, they'd provide very comprehensive documentation on how to call the methods from PHP, .NET, Javascript etc.

funkyphantom · 30 Oct 2011 at 20:50

durbs said:
They use a WCF web service so depends on what kind of server side code your site is capable of executing to communicate with it, is it PHP, ASP, .NET?

If .NET, you'd add a service reference to the site within Visual Studio and it would generate the proxy classes for you to talk to the service. Svcutil does a similar thing but is a command line tool to generate the code.

Talking to a web service from .NET (or any platform really) is very simple once you know what you are doing, but if you don't, you have a VERY steep learning curve to get your head round how a web service works.

I'd guess though for a commercial service, they'd provide very comprehensive documentation on how to call the methods from PHP, .NET, Javascript etc.

Thanks for taking the time to try and make things a little more clearer for me. The website is made with wordpress (PHP?) are there any plugins, that you know of, that would help me at all?
Thanks again
Funky

funkyphantom · 31 Oct 2011 at 16:52

durbs said:
Talking to a web service from .NET (or any platform really) is very simple once you know what you are doing, but if you don't, you have a VERY steep learning curve to get your head round how a web service works.

What should I start to learn first, in your opinion?

md85 · 31 Oct 2011 at 17:12

WCF? Database structure? IFrames? What are you lot on about? Talk about over complicating things.

The ONLY thing you need to learn/edit/touch to change the look and feel is the CSS, and possibly the HTML if you want to change some elements.

If all you want to do is make a login form look a bit different there is absolutely no need to faff around with .NET, WCF or your database. Even if the site is a compiled ASP.NET application you can still edit the HTML without rebuilding or touching backend code, least of all WCF.

Just load up firebug in Firefox and select the element (the form is a column (td) inside a row (tr) inside a table (table), I looked), and edit the CSS elements/classes. For example the Login form header containing the text 'Login...' is currently light blue, .LoginHeader { background: red; } makes it red. I didn't touch .NET, the database or an iframe.

funkyphantom · 31 Oct 2011 at 17:18

Thanks md85, i thought it was all getting complicated. All i need to do is to make a nicer looking login page to go with my website. The company have sent me a .CSS file but i dont really know how to implement that into my wordpress site so i can edit it, and get it to look a little more like.

md85 · 31 Oct 2011 at 17:26

The Wordpress site will be set up to use a specific theme (should be pretty obvious inside the Wordpress administration backend), I'm pretty sure you can edit the css stylesheet for that theme inside Wordpress, otherwise it's just a file on the ftp that you can download/upload/replace to make changes.

From looking in firebug that page (the login form and the login options content) is inside a table element both on the same row. The login box is in one column (a td) and the login options (scrollable box) is in another column (another td). That isn't really ideal because tables are a pain to work with, but it's still editable easily with css.

You might need to add some classes to those td's (e.g. <td class="login-form"> for the login form, class="login-options" for the other) so that you can easily edit the elements under them.

If you can edit the HTML I'd either move the forms out into divs so you can complete control, or at least put each of them inside a row (tr) each, so that you can have the options below the form (for example, that entirely depends on the styling you're going for).

It's certainly no more complicated than a few css classes and maybe an edit to the HTML (which will probably be inside a 'template' in the theme).

md85 · 31 Oct 2011 at 17:35

Had a further look, it's actually quite complicated HTML.

The actual login form is a table inside a column of another table which makes it difficult.

It looks like this

Code:

<table>
   <tbody>
       <tr>
          <td>
              <table /> <---- login form
          </td>
          <td>
              <div /> <---- the scrollable login options box
          </td>
       </tr>
    </tbody>
</table>

Which is pretty difficult to edit as is

It could just be

Code:

<fieldset id="login-form">
   // the form input fields
</fieldset>

<div id="login-options">
   // the scrollable text
</div>

Which makes editing the styling MUCH easier because you have id's/classes on the root elements for each area.

md85 · 31 Oct 2011 at 17:58

Just to send you in the right direction...

HTML - http://pastebin.com/V0RhDJMd
CSS - http://pastebin.com/bHextRy1

I left the original id's on the form elements so it should still function, you also have complete control in the css over any element inside each id. You could change the <p> tags inside #login-form if you wanted for example.

To use that HTML you need to edit the template inside Wordpress for that login page. To do that just do a find (ctrl+f) inside the file for it, search for 'pnMain', that is the id of the div for that pages content. Inside that div there is a few <table> tags, only one of them has no other attributes (it is just <table>, and has two <br> tags below it). Just replace that <table> element (and everything inside it before the </table>) with the HTML from the pastebin above. Collapsing the elements might help you find it easier and replace the correct code. Backup first

You can of course just go with the CSS and the original HTML code, but neither of the root elements for the form or the scrollable content have an id, so you can't edit much without changing the HTML.

Note: I haven't tested either the HTML or CSS in a browser, but it should work. The CSS is obviously just random styles I added for a few of the elements.