next »

[AuthenticKaizen]

Hi everyone,

i'm working on the main site of Pixel Prospector which premise is pretty simple:
-only worthwhile freeware games
-every game comes with a gameplay video recorded by myself
-launch with 200 games
-every week 1 new game

but to launch the site this year i will need some help:
-i need some nice info boxes where i can put in some vital info about download,year,size,developer etc.
-the current solution doesn't look pretty good and also doesn't match the overall style of the site.
-i bought the theme and im not a programer so i cannot program the solution by myself (i know some basic css and html but thats all)
-is there anyone who is a programer or know someone who could help on that task?

i thought long about asking you here in the forums and tried to solve the problem by myself but i'm not satisfied with the current solution which is a wp-textbox plugin.
->not well formatted and also takes too much space...
(shown in the 2nd picture)

I would appreciate it very much if you could help me out here 

[AuthenticKaizen]

well i thought about the whole info box stuff and came to a better solution... 
i tried some stuff and scribbled the new design on a piece of paper today.

i will make the whole area more visually and user friendly:

there will be a nice download button + info of the size of the game.
below the download button: logos for win,mac,linux to see instantly which platform the game is available for.
a house icon with link to developer homepage.

the rest of useful information will be handled with tags...

well i think thats better than having so much lines of text... 

[AuthenticKaizen]

heres a little mockup that i made.
what do you think?

Higher Resolution (1024x768)
http://i34.tinypic.com/21l2yx1.png

[aeiowu]

Is this in Wordpress? If so, you shouldn't need much programming knowledge to make that work. Between all the plugins for wordpress and the simplicity of the theme templates you could probably tinker around and find a way to make whatever you wanted work. Also they offer some really straightforward documentation in their codex at http://codex.wordpress.org

As for the design, it looks like a much better solution already.  I think the only problem would be the extendability of the icons below the Download button. If you wanted to add Linux in there or some other button you'd have to change the size of all the icons. I'd either recommend making them smaller or using some kind of itemized list with custom image bullet points. Ala the windows icon, the apple icon and so on. That way you could have as many items in the list as you want. You can find standardized 8x8 icons for most things like that around the internet as most forums use them.

[AuthenticKaizen]

yes its wordpress...

well thats a good point with the smaller icons.
can you tell me what i have to do to have the buttons ordered on the right side and to give them some proper form.
(i inserted the buttons with "align right"...the "download button" followed my instructions but the other buttons... oh well they are rebellious!
albeit they are aligned at the right side they are still in front of the download button...crazy bunch of buttons)


if you dont know or dont have the time to explain can you please tell me where i have to look to get the answer without reading tons of stuff that i dont need...
that would be great!
thanks 

[aeiowu]

sure no problemo

this should help: http://www.w3schools.com/Css/pr_list-style-image.asp

Here's your HTML:

Code:

<ul class="mac">
<li>Mac compatible</li>
</ul>
<ul class="windows">
<li>Windows compatible</li>
</ul>

It'd be a lot easier if list-style-image was a part of the li property, but yea...

Here's your CSS:

Code:

ul.mac
{
     list-style-image: url("/images/icons/apple.gif");
     list-style-type: square;
}

ul.windows
{
     list-style-image: url("/images/icons/windows.gif");
     list-style-type: square;
}

You'll need to do some compensating for the ul giving more vertical padding than you probably want. Again it's not an elegant solution since you'll have to hard code each icon in there, but using an unordered list will definitely be better style wise. Of course the easiest would be to not worry about the icons and just dump it into a list. It'd be easier to automate that way since there would be no need for special cases.

If you need more help ping me on AIM or somethign.

[AuthenticKaizen]

thanks a lot! 

im gonna check it out tomorrow and will reply then.

[AuthenticKaizen]

damn...currently problems with connecting to the server via ftp.
have to check this at the weekend...not now.