Page 1 of 1

Cafeind Website

Posted: Fri Jul 20, 2007 2:25 am
by FantomCircuit
I recently completed a CMSMS site for work for a company that sells coffee.

http://cafeind.com.au

Uses the following modules:
Comments (blog)
Form Builder (order form)
News (blog)
Testimonials
Company Directory (store locator)

Total development time was about 12 hours, with client changes taking about another 2.

All in all I was very happy with the result, espescially considering the time. The design isn't that great, but I think the sifr helped lift it up a bit. I spent a bit of extra time getting the type to look good, and I think it's paid off. Normally website typography sucks, so it's nice when you make something that's a little bit better :)

Re: Cafeind Website

Posted: Fri Jul 20, 2007 10:59 pm
by Sub_Kovert
Hey this is a great looking site, but what is the flash doing?

Edit : Sorry I see sifr, with firefox adblock there are bulk 'block''s

Re: Cafeind Website

Posted: Fri Jul 20, 2007 11:42 pm
by FantomCircuit
Hmm, I thought the latest version of sifr was supposed to not do that anymore...weird.

Anyway, thanks a lot for the tip - I'll look into it :)

Re: Cafeind Website

Posted: Sat Jul 21, 2007 7:14 am
by JoeGrinD
Nice site. ;D

Re: Cafeind Website

Posted: Sat Jul 21, 2007 10:35 am
by designhut
It's a lovely site!

Just one constructive criticism if I may - I'm on IE7 and it's very tight at the bottom, the links are sitting on the edge of the browser - looks cramped.

Re: Cafeind Website

Posted: Sun Jul 22, 2007 12:42 am
by FantomCircuit
wow, glad you guys like it :)

thanks for the tip designhut - it should look fine now (though with double the spacing on standards compliant browsers -  but i'm not to fussed about it)

Re: Cafeind Website

Posted: Tue Jul 24, 2007 5:24 pm
by EMR53
How did you manage to style that form. ??? for the mailing list.

the label classes i mean. ??? Is there anyway you can edit directly in the code??

Very nice website.

Greetings Eric

Re: Cafeind Website

Posted: Tue Jul 24, 2007 11:06 pm
by FantomCircuit
ebbe,

Just a quick note, in my HTML, the labels aren't actually set up correctly, as they should either wrap around the whole input element like so:

Code: Select all

<label>Username<input type="text" name="username"></label>
OR, it should include the 'for' attribute, like so:

Code: Select all

<label for="username">Username</label><input type="text" name="username">
As you can see, I've done neither, so the browser doesn't know which label belogns to which element.

Code: Select all

<div><label class="real">Name</label><input type="text" name="m3username" id="m3username" value="" size="30" maxlength="150" />
</div>
<div><label class="real">Email</label><input type="text" name="m3email" id="m3email" value="" size="30" maxlength="150" />
</div>
I might fix this up in the future if I get bored/annoyed enough.

Back to your actual question  :D
I'm not 100% sure what you're asking, so I'll just cover everything :)
As for the css, this is the only css that is used for the mailing list signup form:

Code: Select all

#joinmailing div {
margin-top: 5px;
}

#joinmailing label {
display:none;
}

#joinmailing input {
width: 155px;
font-size: 10px;
}

#joinmailing input.submit {
width: auto;
}

#joinmailing label.real {
display:block;
float:left;
width: 50px;
line-height: 16px;
}

#joinmailing form {
margin-bottom: 30px;
}
As you can see, I set all labels to display: none; , and then only show the 'real' labels that I actually want using the 5th rule block above.

To actually get this output, this is the Newsletter Made Simple signup form template, configured in the NMS control panel in the 'Subscribe' tab:

Code: Select all

{if $message ne ""}
<p id="subscribe_message">{$message}</p>
{/if}

{$formstart}
{$formhidden}


<div><label class="real">{$prompt_username}</label>{$username}</div>
<div><label class="real">Email</label>{$email}</div>

{foreach from=$listids item=curr_id}
{$curr_id}<br/>
{/foreach}

<div><label class="real"> </label><input type="submit" value="Sign Up" class="submit"></div>
{$formend}
ps. the only reason I have used a blank label for the submit button is to get it to line up with the other form elements.
pps. I have now fixed the incorrect label usage. I'm still going to leave the notes above though, as I don't think many people are using labels properly, or know that there are two different menthods that can be used.

Re: Cafeind Website

Posted: Thu Aug 02, 2007 7:42 pm
by EMR53
@ FantomCircuit

Thanks man! you really solved all my NMS trouble. ;D

Sorry for the late reply , holiday season  8)

Greetings Eric

Re: Cafeind Website

Posted: Thu Aug 02, 2007 11:20 pm
by FantomCircuit
No worries - glad I could help you out :)

Re: Cafeind Website

Posted: Fri Aug 03, 2007 3:48 pm
by Dr.CSS
The headers are flash?... Y... just curious...

Re: Cafeind Website

Posted: Sat Aug 04, 2007 1:46 am
by FantomCircuit
mark wrote: The headers are flash?... Y... just curious...
sIFR - http://www.mikeindustries.com/blog/archive/2004/08/sifr

An unobtrusive JavaScript and Flash text replacement routine.

Not sure why you wouldn't have heard of it before - it has been quite popular among the standards-based crowd since it's release.

Basically, I have told it to replace any instances of with a very small flash movie. The JavaScript reads the contents of the element and passes it to swf file, which renders the type in the font you have instructed it to. The JavaScript then replaces the element with the flash file. Viola! A nice, readable, search-engine friendly, accessible, beautiful heading. :)

You should give it a shot - it takes a little bit of setting up, but once you do one or two you'll be able to whip them up in no time. There are also a few web-based tools you can use the create the swf file if you don't have the inclination to pay for Flash.

Re: Cafeind Website

Posted: Sat Aug 04, 2007 6:42 pm
by Dr.CSS
I was always under the impression that flash was for moving/animated type things...

No money for flash software...  ;)

It seems like you could put an image there instead of a flash that doesn't have any moving content, like flipping to another image or morphing to another image etc. ...

Re: Cafeind Website

Posted: Sun Aug 05, 2007 12:37 am
by FantomCircuit
Yes, but putting an image there doesnt help if the site is content managed. so if the client changed the title of a page, a new image would need to be created. As sIFR reads the content of the h1 (or whatever) element, it reflects any changes straight away. It also means you can change the font face, colour, size etc just as easily as if you could with css - not possible with image based headings.

Plus, I'm extremly lazy, and it's a pain in the arse to make title images :P

Re: Cafeind Website

Posted: Mon Aug 06, 2007 8:46 pm
by Zoorlat
sIFR makes my wonderful "Ad Block Plus" (a FF plugin) unhappy  :-[

And I agree with Mark, why use flash when you want static content?

I recalled an ALA-article on this subject some time ago. Found it and quickly browsed through it.
http://www.alistapart.com/articles/dynatext

There PHP and Javascript is used to "on-the-fly" create images that does the same thing as sIFR, it appears.

Has anyone of you tried this technique?