Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

Geek Culture / AtomicWaffle.com is skinned!

Author
Message
BiggAdd
Retired Moderator
20
Years of Service
User Offline
Joined: 6th Aug 2004
Location: != null
Posted: 12th Sep 2010 15:23 Edited at: 12th Sep 2010 15:35
Link
This has been one of the most complicated websites I've skinned, but my god was it worth it. One less thing to do!

Few niggles with IE7 and major issues with IE 6 (obviously). Opera doesn't seem to like the side navigation, but these will be fixed.

Any comments/crit/errors then please let me know!

http://atomicwaffle.com/alpha/

EDIT: This is how it should look:
http://img.photobucket.com/albums/v369/BiggAdd/Atomicwaffle_skin.png

Cheers,
BiggAdd

Back to top
Profile PM
JLMoondog
Moderator
16
Years of Service
User Offline
Joined: 18th Jan 2009
Location: Paradox
Posted: 12th Sep 2010 16:07
Link
Works on Chrome, no issues. Though the site didn't recognize the language or try to translate. I know chrome will usually translate text on most foreign sites, but for some reason won't for this one.

Nice clean look. Good work.


JLMoondog's Turbo-Store
Back to top
Profile PM Email Website
MSon
20
Years of Service
User Offline
Joined: 13th Jul 2004
Location: Earth, (I Think).
Posted: 12th Sep 2010 16:29
Link
in using Safari and it looked exactly like the picture, A+

Everyone Be Cool, You, Be Cool
Life Isn't fair, Its Just fairer Than Death
Death is doing nothing, life is doing what others tell you
Back to top
Profile PM Email Website
BiggAdd
Retired Moderator
20
Years of Service
User Offline
Joined: 6th Aug 2004
Location: != null
Posted: 12th Sep 2010 16:49 Edited at: 12th Sep 2010 16:56
Link
Quote: "Works on Chrome, no issues. Though the site didn't recognize the language or try to translate. I know chrome will usually translate text on most foreign sites, but for some reason won't for this one.

Nice clean look. Good work.
"


Thanks for the feedback! Glad it works on chrome (don't have it installed myself, only used a web renderer to check it out). Maybe Chrome needs to update its Latin dictionary .

Quote: "in using Safari and it looked exactly like the picture, A+"


Thanks also for the feedback. Fortunately I think browser developers are following standards a bit more, so the whole cross browser thing is becoming less of an issue.




EDIT: Just noticed I left the "px" off one of my font sizes, so the side navigation text should look smaller now.

Back to top
Profile PM
KeithC
Senior Moderator
19
Years of Service
User Offline
Joined: 27th Oct 2005
Location: Michigan
Posted: 12th Sep 2010 16:58
Link
No issues in Firefox that I see.

-Keith

Back to top
Profile PM Email
Yodaman Jer
User Banned
Posted: 12th Sep 2010 19:07
Link
It looks and works fantastic on Chrome (latest version). Great job BiggAdd!

Click here to go to my blog!
Back to top
Profile
Melancholic
15
Years of Service
User Offline
Joined: 26th Nov 2009
Location:
Posted: 13th Sep 2010 09:24
Link
Its looks identical to the picture in opera, though why is the site in Latin and the login box in English?


I can count to banana...
Back to top
Profile PM Email
Neuro Fuzzy
17
Years of Service
User Offline
Joined: 11th Jun 2007
Location:
Posted: 13th Sep 2010 10:27
Link
Quote: "Its looks identical to the picture in opera, though why is the site in Latin and the login box in English?"

its test text

Very nice stuff bigAdd

Back to top
Profile PM Email
BiggAdd
Retired Moderator
20
Years of Service
User Offline
Joined: 6th Aug 2004
Location: != null
Posted: 13th Sep 2010 16:12
Link
Cheers for the feedback guys!

Quote: "Its looks identical to the picture in opera, though why is the site in Latin and the login box in English?"


The latin is filler text, but I'm in the process of filling that in with the template content, so I know what to output with php.

Back to top
Profile PM
Lemonade
16
Years of Service
User Offline
Joined: 10th Dec 2008
Location:
Posted: 13th Sep 2010 21:03
Link
Looks great in Chrome 6!

Back to top
Profile PM
Seppuku Arts
Moderator
20
Years of Service
User Offline
Joined: 18th Aug 2004
Location: Cambridgeshire, England
Posted: 14th Sep 2010 02:12 Edited at: 14th Sep 2010 02:14
Link
Quote: "though why is the site in Latin and the login box in English?"


Lorem Ipsum:

http://en.wikipedia.org/wiki/Lorem_ipsum

(It's not actually Latin, it's gibberish that comes from Latin)


Looks great in Firefox. My only crit would be that on higher resolutions, it's a bit wide for reading. So there's a lot of text before it hits the next line. My resolution is 1600x1024. I'm not sure if the content ought to have a fix width, but it's a personal preference.

Click!
Back to top
Profile PM Website
BiggAdd
Retired Moderator
20
Years of Service
User Offline
Joined: 6th Aug 2004
Location: != null
Posted: 14th Sep 2010 04:30 Edited at: 14th Sep 2010 04:30
Link
Quote: "Looks great in Firefox. My only crit would be that on higher resolutions, it's a bit wide for reading. So there's a lot of text before it hits the next line. My resolution is 1600x1024. I'm not sure if the content ought to have a fix width, but it's a personal preference. "


I think I'll increase the margin, or do something to eliminate that sort of issue. Although I'm not planning on having a lot of plain text on the site. Think more like YouTube etc.

But thanks for the crit! It will go into my considerations when I do get round to figuring out what the content will look like.
Also on a similar note, I need to make a wider banner, as even on my display it runs out!

Cheers,
BiggAdd

Back to top
Profile PM
JLMoondog
Moderator
16
Years of Service
User Offline
Joined: 18th Jan 2009
Location: Paradox
Posted: 14th Sep 2010 10:27
Link
Is this your personal site? Ah, and will the waffle give you super powers?


JLMoondog's Turbo-Store
Back to top
Profile PM Email Website
BiggAdd
Retired Moderator
20
Years of Service
User Offline
Joined: 6th Aug 2004
Location: != null
Posted: 16th Sep 2010 03:35
Link
Its my own project yes, and the waffle only gives me the power to slightly fly:
http://www.youtube.com/watch?v=eIgFIwKpNlE

Back to top
Profile PM
Lemonade
16
Years of Service
User Offline
Joined: 10th Dec 2008
Location:
Posted: 16th Sep 2010 09:37
Link
Looking good on IE9!

Back to top
Profile PM
BiggAdd
Retired Moderator
20
Years of Service
User Offline
Joined: 6th Aug 2004
Location: != null
Posted: 17th Sep 2010 18:32 Edited at: 17th Sep 2010 18:34
Link
Thanks very much!

Fixed all the issues with IE 7, but somehow managed to make it look worse in IE 6..... AAaahhhhhhhh .

I've also added more visual feedback to the navigation. Also added a home icon above the breadcrumb part (the left hand side of the side navigation).

If you can all let me know if it works correctly, that would be smashing.

http://atomicwaffle.com/alpha/

Back to top
Profile PM
Phaelax
DBPro Master
22
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 17th Sep 2010 23:12
Link
Looks like the picture for me, Safari 4.0.5 on Mac OS/X 10.4

It's a nice clean design, but it doesn't look that overly complicated. Why'd you have so much trouble with it? Or is this a drupal skin or something?


"Any sufficiently advanced technology is indistinguishable from magic" ~ Arthur C. Clarke
Back to top
Profile PM Email Website
BiggAdd
Retired Moderator
20
Years of Service
User Offline
Joined: 6th Aug 2004
Location: != null
Posted: 17th Sep 2010 23:17 Edited at: 17th Sep 2010 23:21
Link
Quote: "It's a nice clean design, but it doesn't look that overly complicated. Why'd you have so much trouble with it? Or is this a drupal skin or something?"


Most of the trouble came from getting the navigation to work, especially getting the side bar to expand with the main content and getting that into a fixed place.
Also the website decided at one point it would start to overflow in the x-direction, so I had to use a CSS 3.0 property "overflow-x" to set it right.

Wasn't massively complicated, just fiddly. Would have been easier if I used javascript, but I didn't want to go that route.

Think I still need to clean up the CSS, but I shall do that at a later stage.



Back to top
Profile PM
Phaelax
DBPro Master
22
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 17th Sep 2010 23:23
Link
Quote: "especially getting the side bar to expand with the main content and getting that into a fixed place."


Ok that I can understand, I've been fighting with the same issue recently too and just resorted to using a table.


"Any sufficiently advanced technology is indistinguishable from magic" ~ Arthur C. Clarke
Back to top
Profile PM Email Website
Libervurto
18
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 17th Sep 2010 23:29 Edited at: 17th Sep 2010 23:32
Link
Nice work BigAdd, I like how everything stays in line and in proportion when zooming in and out. Unlike some websites *ehem*.

Tiny thing I noticed. At some levels of zoom there's a black seem between the left side of the banner image and the solid banner colour.

Back to top
Profile PM Email
Blobby 101
18
Years of Service
User Offline
Joined: 17th Jun 2006
Location: England, UK
Posted: 17th Sep 2010 23:37
Link
looking nice, although when the window is quite small, the home button overlaps with the navigation buttons at the top. (on Chrome windows at least)

Back to top
Profile PM Email Website
Phaelax
DBPro Master
22
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 17th Sep 2010 23:48
Link
I think the zooming issues are related to how each browser handles it, I doubt it's anything he could fix. Like IE just enlarges all the dimensions and font sizes, while Opera actually zooms in.


"Any sufficiently advanced technology is indistinguishable from magic" ~ Arthur C. Clarke
Back to top
Profile PM Email Website
BiggAdd
Retired Moderator
20
Years of Service
User Offline
Joined: 6th Aug 2004
Location: != null
Posted: 17th Sep 2010 23:54 Edited at: 18th Sep 2010 00:07
Link
Quote: "Ok that I can understand, I've been fighting with the same issue recently too and just resorted to using a table."


I've found that you can position div's with margins, which is the solution I used for this.

For example:
http://atomicwaffle.com/alpha/test.html




Quote: "
Tiny thing I noticed. At some levels of zoom there's a black seem between the left side of the banner image and the solid banner colour."


Do you mind posting a picture of this? I'm not quite sure what you mean.


Quote: "looking nice, although when the window is quite small, the home button overlaps with the navigation buttons at the top. (on Chrome windows at least)"


Unfortunately that's one of the flaws of the site. Width can't be too small.
Although I looked up the browser stats recently, and apparently 1024x768 is the minimum resolution these days.


Cheers for the crit guys!

Back to top
Profile PM
Gencheff
14
Years of Service
User Offline
Joined: 12th Jun 2010
Location: UK by way of USSR
Posted: 18th Sep 2010 00:14 Edited at: 18th Sep 2010 00:15
Link
I personally HATE Internet Explorer , especially IE6

Always some transparency error...always margin and float issues...

I must say your skin is very clean and easy on the eye.I don't see a problem on Chrome.

Take it from an experienced designer,complex designs with a lot of "screaming" colors mess up and are unpleasant for the regular user 90% of the time.

See these are a real pain to code..You don't want to know how many things I broke near my PC lol :



Tip - Stay away from background images that are not seamless lol

http://www.youtube.com/watch?v=7exK75pReps&feature=related - Judge Judy FTW!
Back to top
Profile PM Email
Libervurto
18
Years of Service
User Offline
Joined: 30th Jun 2006
Location: On Toast
Posted: 18th Sep 2010 00:42 Edited at: 18th Sep 2010 00:51
Link
Quote: "Do you mind posting a picture of this? I'm not quite sure what you mean."

At some levels of zoom a black line appears between the left-hand block of blue and your banner image. I think this line is only one pixel thick and is a result of rounding off values after scaling the image (what is that called when you just chop of the decimal places instead of rounding?). It only happens on the left side.

The website doesn't look that blurry.

I am using Firefox on Linux.

[edit]
I just noticed the line above Nav, this also happens to the home icon on its right side and bottom but not at the same magnification. I think this is all the same problem.

Attachments

Login to view attachments
Back to top
Profile PM Email
BiggAdd
Retired Moderator
20
Years of Service
User Offline
Joined: 6th Aug 2004
Location: != null
Posted: 18th Sep 2010 03:50 Edited at: 18th Sep 2010 19:10
Link
Thanks for the pic Obese87. I don't really know what would be causing that, but it might have something to do with the way a .png is rendered on the browser.

Very odd.

EDIT: Increased the width of the banner to 3000px, so hopefully it should get rid of that line now, plus it should fill most monitors.

Quote: "I must say your skin is very clean and easy on the eye.I don't see a problem on Chrome."


Thanks! I spent a lot of time trying to get the design as clean and open as I possibly could, after many attempts, this is the one I came up with.

Quote: "
I personally HATE Internet Explorer , especially IE6 "


Surprisingly I've had no major problems with IE7, and no problems at all with IE8. IE6 however, as you can expect. Complete shambles. Might just make a separate design for IE6.

Quote: "Tip - Stay away from background images that are not seamless lol"


I learnt that lesson a long time ago.
Although CSS 3.0 with multiple background support should change this.

Cheers for the comments.

Back to top
Profile PM
Phaelax
DBPro Master
22
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 18th Sep 2010 22:05
Link
The design I'm doing for my new website uses a non-tiled background and a fair bit of layered transparency. IE6 was tricky, but I've worked with PNG files enough on IE6 to know several work arounds. But normally, I would just avoid it like anyone else. As long as you specify a doctype you shouldn't have too many major issues with the design, most things can be corrected by adjusting the dimensions to offset the padding and margins.


"Any sufficiently advanced technology is indistinguishable from magic" ~ Arthur C. Clarke
Back to top
Profile PM Email Website
BiggAdd
Retired Moderator
20
Years of Service
User Offline
Joined: 6th Aug 2004
Location: != null
Posted: 18th Sep 2010 22:35
Link
Quote: "The design I'm doing for my new website uses a non-tiled background and a fair bit of layered transparency. IE6 was tricky, but I've worked with PNG files enough on IE6 to know several work arounds. But normally, I would just avoid it like anyone else. As long as you specify a doctype you shouldn't have too many major issues with the design, most things can be corrected by adjusting the dimensions to offset the padding and margins."


Fortunately there is also the option to create an entirely new stylesheet for a specific IE (which is what I did for IE7 and what I will be doing for IE6).

Back to top
Profile PM
Phaelax
DBPro Master
22
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 18th Sep 2010 23:49
Link
I generally use the following to specify IE specific fixes:

*html .myclass{differences go here}


"Any sufficiently advanced technology is indistinguishable from magic" ~ Arthur C. Clarke
Back to top
Profile PM Email Website
budokaiman
FPSC Tool Maker
15
Years of Service
User Offline
Joined: 24th Jun 2009
Playing: Hard to get
Posted: 19th Sep 2010 22:10 Edited at: 19th Sep 2010 22:11
Link
I found a little bug in Safari:



It seems to fix, if I hit the "Forgot?" button, but if I refresh, it comes back.

Putting the fear back into sliced bread since 4th May 2010
Back to top
Profile PM Email Website
BiggAdd
Retired Moderator
20
Years of Service
User Offline
Joined: 6th Aug 2004
Location: != null
Posted: 20th Sep 2010 01:19
Link
Cheers for the heads up. It was happening in IE7 as well, but I will be redoing that form when I start on the serverside. I did a pretty poor job, and it was only meant to be a mockup.

Probably got something to do with the Login button hogging up all the space.

Back to top
Profile PM
Back to top

Login to post a reply

Server time is: 2025-05-23 06:08:28
Your offset time is: 2025-05-23 06:08:28