Back To Competitions

CSS Competition #1: Ozzu Look and Feel

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post November 12th, 2007, 2:10 pm

righteous_trespasser wrote:
Okay here is another question ...
Am I allowed to put my own images in there then ... ? or how do you want it to be?


Nope, sorry. As far as the discussions the mods had, no images can be inserted. You're going to have to margin or pad off the left and use a background images. Or come up with some really creative solution. :)

That's really what this competition is all about - creative solutions.
- dM
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post November 12th, 2007, 2:10 pm

  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post November 12th, 2007, 6:09 pm

righteous_trespasser wrote:
Okay here is another question ... In the sample code you gave us there is the following:
Code: [ Select ]
<div id="forumIcons">
<ul>
<li><label>New posts</label></li>
<li><label>No new posts</label></li>
<li><label>Forum is locked</label></li>
</ul>
</div>
  1. <div id="forumIcons">
  2. <ul>
  3. <li><label>New posts</label></li>
  4. <li><label>No new posts</label></li>
  5. <li><label>Forum is locked</label></li>
  6. </ul>
  7. </div>

And at the same place in the real ozzu site there is the following:
Code: [ Select ]
<div id="forumIcons">
<ul>
<li><img src="templates/light/images/folder_new.gif" alt="New posts"><label>New posts</label></li>
<li><img src="templates/light/images/folder.gif" alt="No new posts"><label>No new posts</label></li>

<li><img src="templates/light/images/folder_lock.gif" alt="Forum is locked"><label>Forum is locked</label></li>
</ul>
</div>
  1. <div id="forumIcons">
  2. <ul>
  3. <li><img src="templates/light/images/folder_new.gif" alt="New posts"><label>New posts</label></li>
  4. <li><img src="templates/light/images/folder.gif" alt="No new posts"><label>No new posts</label></li>
  6. <li><img src="templates/light/images/folder_lock.gif" alt="Forum is locked"><label>Forum is locked</label></li>
  7. </ul>
  8. </div>

Am I allowed to put my own images in there then ... ? or how do you want it to be?


don't know... in the rules they said that we have to use the HTML provided... maybe they want to keep those images constant? After all, this IS a CSS competition.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post November 12th, 2007, 9:11 pm

For anyone wondering about images, it can be done without altering the HTML, as seen here.

The only major difference is that you'll be linking to actual image files in the CSS like this
Code: [ Select ]
div#headerNav a:link, div#headerNav a:active, div#headerNav a:visited {
  background-image: url("a-visited-background.png");
}
  1. div#headerNav a:link, div#headerNav a:active, div#headerNav a:visited {
  2.   background-image: url("a-visited-background.png");
  3. }


instead of using the "data:" protocol to embed the images directly into the stylesheet like this
Code: [ Select ]
div#headerNav a:link, div#headerNav a:active, div#headerNav a:visited {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAGCAYAAAAPDoR 2AAAAQElEQVR42k3MoQ1AUQhD0U6DQSAYA8Hib6f/U0RTcRMOJOAB3+4qNwg2M5cb3a0FZ zeqSuDs1tvMvNx3jAjl/gFO8kg6Ly7NFwAAAABJRU5ErkJggg==") !important;
}
  1. div#headerNav a:link, div#headerNav a:active, div#headerNav a:visited {
  2.   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAGCAYAAAAPDoR 2AAAAQElEQVR42k3MoQ1AUQhD0U6DQSAYA8Hib6f/U0RTcRMOJOAB3+4qNwg2M5cb3a0FZ zeqSuDs1tvMvNx3jAjl/gFO8kg6Ly7NFwAAAABJRU5ErkJggg==") !important;
  3. }

as I did in that example.
Internet Explorer doesn't support the "data:" protocol.

It's not a bad idea to take a look at that examples' CSS before you start on your own entry, & possibly during development if you get stuck.

Also in case anyone's wondering, I do not plan on entering that example, even tweeked to follow the contests rules, into this competition.
I'd feel like I cheated since I've technically had an extra 6 months to develop my entry.
Strong with this one, the sudo is.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post November 12th, 2007, 9:15 pm

joebert, you are a BAMF!
- dM
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23404
  • Loc: Woodbridge VA
  • Status: Offline

Post November 13th, 2007, 6:39 am

righteous_trespasser wrote:
Okay here is another question ... In the sample code you gave us there is the following:
Code: [ Select ]
<div id="forumIcons">
<ul>
<li><label>New posts</label></li>
<li><label>No new posts</label></li>
<li><label>Forum is locked</label></li>
</ul>
</div>
  1. <div id="forumIcons">
  2. <ul>
  3. <li><label>New posts</label></li>
  4. <li><label>No new posts</label></li>
  5. <li><label>Forum is locked</label></li>
  6. </ul>
  7. </div>

And at the same place in the real ozzu site there is the following:
Code: [ Select ]
<div id="forumIcons">
<ul>
<li><img src="templates/light/images/folder_new.gif" alt="New posts"><label>New posts</label></li>
<li><img src="templates/light/images/folder.gif" alt="No new posts"><label>No new posts</label></li>

<li><img src="templates/light/images/folder_lock.gif" alt="Forum is locked"><label>Forum is locked</label></li>
</ul>
</div>
  1. <div id="forumIcons">
  2. <ul>
  3. <li><img src="templates/light/images/folder_new.gif" alt="New posts"><label>New posts</label></li>
  4. <li><img src="templates/light/images/folder.gif" alt="No new posts"><label>No new posts</label></li>
  6. <li><img src="templates/light/images/folder_lock.gif" alt="Forum is locked"><label>Forum is locked</label></li>
  7. </ul>
  8. </div>

Am I allowed to put my own images in there then ... ? or how do you want it to be?


In this competition images are only permitted via CSS.
To win this competition you shouldn't even be looking at current OZZU code. The idea is to come up with something unique and different via style and style only.
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post November 13th, 2007, 10:57 pm

Okay coolio ... thanks guys ... Mine is coming along really nicely imo ... this competition is going to be awesome ... for a sample of what I have so long, check out this ...
Let's leave all our *plum* where it is and go live in the jungle ...
  • Breeze
  • Photographer
  • Guru
  • User avatar
  • Joined: Apr 22, 2007
  • Posts: 1029
  • Loc: Australia
  • Status: Offline

Post November 13th, 2007, 11:10 pm

righteous_trespasser wrote:
Okay coolio ... thanks guys ... Mine is coming along really nicely imo ... this competition is going to be awesome ... for a sample of what I have so long, check out this ...


Berry goosenecks Mr RT, sir ... love the colours :D By the way, do you notice the word 'category' behind the links at the top?
Photography Gallery | aaronmarc.id.au
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post November 13th, 2007, 11:24 pm

Okay, fixed ... I was so stressed about getting it to work in IE6 (Aaarggh!) that I forgot all about the rest ... Now I still have quite a bit to do, but the general concept is there ...
Let's leave all our *plum* where it is and go live in the jungle ...
  • Breeze
  • Photographer
  • Guru
  • User avatar
  • Joined: Apr 22, 2007
  • Posts: 1029
  • Loc: Australia
  • Status: Offline

Post November 13th, 2007, 11:33 pm

I want to take a fork and stab it into the face of IE6. In other news I am smitten with Firefox :D

I'm yet to start on mine. I have an idea for a colour sceme but I'm yet to decide which parts are gonna be that colour and those bits are gonna be the other colour.
Photography Gallery | aaronmarc.id.au
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post November 14th, 2007, 1:56 am

I realize that the mods on this forum didn't all have math at school ...
Quote:
In total there are 1300 users online :: 100 Registered, 10 Hidden and 1300 Guests.

100+10+1300 <> 1300
...
100+10+1300 = 1410
Let's leave all our *plum* where it is and go live in the jungle ...
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post November 14th, 2007, 3:49 am

Yes, r_t, you are correct. When I "ipsum"-ifyed the page, I also changed the numbers to dummy information. If you could please overlook my meaningless insertion of random values, I would consider it a personal favor.
:)
- dM
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post November 14th, 2007, 3:55 am

lol ... ofcourse ...
Let's leave all our *plum* where it is and go live in the jungle ...
  • Breeze
  • Photographer
  • Guru
  • User avatar
  • Joined: Apr 22, 2007
  • Posts: 1029
  • Loc: Australia
  • Status: Offline

Post November 14th, 2007, 4:22 am

righteous_trespasser wrote:
Okay, fixed ... I was so stressed about getting it to work in IE6 (Aaarggh!) that I forgot all about the rest ... Now I still have quite a bit to do, but the general concept is there ...


I'm gonna be a pain in the backside and tell you that it's fine in firefox and doesn't work in IE7 :D
Photography Gallery | aaronmarc.id.au
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post November 14th, 2007, 4:31 am

I'll check that when I'm at home ... it's tough working like this ... at work I've got IE6 and FF(local only) and at home I've got IE7 and FF ...
Let's leave all our *plum* where it is and go live in the jungle ...
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post November 14th, 2007, 4:52 am

Check Opera too.

Aside: Did you know that Opera was initially developed by the same guy (CTO of Opera) that was a huge part of developing CSS? ;)
- dM
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post November 14th, 2007, 4:52 am

1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13

Post Information

  • Total Posts in this topic: 193 posts
  • Users browsing this forum: No registered users and 48 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.