CSS Competition #1: Ozzu Look and Feel
- digitalMedia
- a.k.a. dM


- Joined: Dec 29, 2003
- Posts: 5169
- Loc: SC-USA
- Status: Offline
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


- Joined: 25 Feb 2008
- Posts: ?
- Loc: Ozzuland
- Status: Online
- Bogey
- Bogey


- Joined: Jul 14, 2005
- Posts: 8211
- Loc: USA
- Status: Offline
Okay here is another question ... In the sample code you gave us there is the following:
<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>
- <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>
And at the same place in the real ozzu site there is the following:
<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>
- <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>
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


- Joined: Feb 10, 2004
- Posts: 13455
- Loc: Florida
- Status: Offline
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
div#headerNav a:link, div#headerNav a:active, div#headerNav a:visited {
background-image: url("a-visited-background.png");
}
- div#headerNav a:link, div#headerNav a:active, div#headerNav a:visited {
- background-image: url("a-visited-background.png");
- }
instead of using the "data:" protocol to embed the images directly into the stylesheet like this
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;
}
- 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;
- }
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


- Joined: Dec 29, 2003
- Posts: 5169
- Loc: SC-USA
- Status: Offline
joebert, you are a BAMF!
- dM
- ATNO/TW
- Super Moderator


- Joined: May 28, 2003
- Posts: 23404
- Loc: Woodbridge VA
- Status: Offline
Okay here is another question ... In the sample code you gave us there is the following:
<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>
- <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>
And at the same place in the real ozzu site there is the following:
<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>
- <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>
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


- Joined: Mar 12, 2007
- Posts: 6228
- Loc: South-Africa
- Status: Offline
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


- Joined: Apr 22, 2007
- Posts: 1029
- Loc: Australia
- Status: Offline
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

By the way, do you notice the word 'category' behind the links at the top?
Photography Gallery | aaronmarc.id.au
- righteous_trespasser
- Scuffle


- Joined: Mar 12, 2007
- Posts: 6228
- Loc: South-Africa
- Status: Offline
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


- Joined: Apr 22, 2007
- Posts: 1029
- Loc: Australia
- Status: Offline
I want to take a fork and stab it into the face of IE6. In other news I am smitten with Firefox
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


- Joined: Mar 12, 2007
- Posts: 6228
- Loc: South-Africa
- Status: Offline
I realize that the mods on this forum didn't all have math at school ...
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


- Joined: Dec 29, 2003
- Posts: 5169
- Loc: SC-USA
- Status: Offline
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


- Joined: Mar 12, 2007
- Posts: 6228
- Loc: South-Africa
- Status: Offline
lol ... ofcourse ...
Let's leave all our *plum* where it is and go live in the jungle ...
- Breeze
- Photographer


- Joined: Apr 22, 2007
- Posts: 1029
- Loc: Australia
- Status: Offline
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

Photography Gallery | aaronmarc.id.au
- righteous_trespasser
- Scuffle


- Joined: Mar 12, 2007
- Posts: 6228
- Loc: South-Africa
- Status: Offline
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


- Joined: Dec 29, 2003
- Posts: 5169
- Loc: SC-USA
- Status: Offline
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


- Joined: 25 Feb 2008
- Posts: ?
- Loc: Ozzuland
- Status: Online
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
To Reply to this topic you need to LOGIN or REGISTER. It is free.
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