Welcome!

Join our community of MMO enthusiasts and game developers! By registering, you'll gain access to discussions on the latest developments in MMO server files and collaborate with like-minded individuals. Join us today and unlock the potential of MMO server development!

Join Today!

New FlyFF Server Website Design

MC Web Designs
Joined
Oct 28, 2010
Messages
888
Reaction score
111
Hey guys, well, I havent released something for a while, I did at one point say I was quiting the section, but I aint so lucky you guys ;). So basically today i am releasing my design I have made for a flyff website. The website is 100% designed by me, and some coding is Stefan Pfeifer's so credit to him. The website is fully coded PHP / HTML / CSS so all you need to do is edit the config.inc.php.

I do have some thoughts for future updates such as a sidebar with the server information, server information etc. But that will come within time as I have school and such to divise my time too.

Okay so here is some images of the website:

Index.php:


Register.php:



Download.php:



Chat.php:


Staff.php:


Hope that is enough information for you guys.

Download:

If you could, could you please leave constructive critisism so I can improve more, thanks guys and have fun!
 
Last edited:
Newbie Spellweaver
Joined
Dec 20, 2011
Messages
33
Reaction score
8
Very appealing to my eyes. I think its pretty good but its kind of a small layout, other than that I love it.
 
MC Web Designs
Joined
Oct 28, 2010
Messages
888
Reaction score
111
Very appealing to my eyes. I think its pretty good but its kind of a small layout, other than that I love it.

Thanks, yea the layout it a tad small, thats why when I eventualy get round to updating it I will extend the lenghts and add a sidebar with all sorts of info.
 
Flyff Developer
Loyal Member
Joined
Apr 6, 2009
Messages
1,873
Reaction score
384
That looks pretty cool, but I can see the sharp corners of the rounded box edges and it sorta bugs me xD
 
Loyal Member
Joined
Aug 1, 2011
Messages
1,122
Reaction score
153
Your design are so good mate. I have nofthing to say. I can only tell you, nice website.
 
MC Web Designs
Joined
Oct 28, 2010
Messages
888
Reaction score
111
That looks pretty cool, but I can see the sharp corners of the rounded box edges and it sorta bugs me xD

Yea haha, I'm not sure what is causing that because the CSS doesnt have a background on that div tag, the image has enough room so the drop-shadow isnt causing it. Must just be a little bug I guess. Thanks mate ;)

Your design are so good mate. I have nofthing to say. I can only tell you, nice website.

Thanks haha :)
 
Elite Diviner
Joined
Feb 10, 2011
Messages
416
Reaction score
99
I think the website is pretty empty, you only make use of the middle content part. I think you should also use the left and right sides.
 
Loyal Member
Joined
Aug 1, 2011
Messages
1,122
Reaction score
153
i must agree with langstra, its empty, a good pserver needs a strong homepage at least, at u i see the modern desert.

I agree 2 with Langstra about the left & right side content. But is not ment to be empty? The server owner have to put updates&news/etc. And after he/she have put some updates/news the site won't look empty. :eek:tt1:
 
MC Web Designs
Joined
Oct 28, 2010
Messages
888
Reaction score
111
Thanks for the comments. As I did state at the thread description, in upcoming updates I will be adding siebars and things. But the index.php and things have tables, so you can just extend the width of the table for your news and events. Also, I didnt want to fill the gaps in, because I think it would have looked compacted and too pushed together. Again, thanks for the constructive comments :)
 
Junior Spellweaver
Joined
Apr 13, 2012
Messages
140
Reaction score
32
i love it. very nice. i will not use your design because i dont want to copy you. but i did DL the release to used some of the php code if you dont mind. my only suggestion would be to add a login for users. i think you will need one anyways if people are to donate.

again nice job its prefect to me.
 
Last edited:
MC Web Designs
Joined
Oct 28, 2010
Messages
888
Reaction score
111
Thanks guys haha, appreciate it. I did make a login, but I took it out. Hopefully in the other updates I will be adding it. I'll also be making a panel where you can view your characters stats etc.

Good as always, nuff said. ;3

You simply keep improving for each release you do.

N'aww you made me smile. Thanks <3 :D

UPDATE

I have now made the with of the website 970px wide. Now, if any well-experienced web-developer could assist me with some of the CSS i need to do. I want a sidebar at the left hand side, inside the main body of the website. I've tried doing it myself but the website keeps messing up. I've tried floating it, clearing all sides etc but the site just wont have it. So yea, if someone could add my MSN, its on my profile. Thanks!
 
• ♠️​ ♦️ ♣️ ​♥️ •
Joined
Mar 25, 2012
Messages
909
Reaction score
464
as first, if u just want to release a design, dont call the file extentions ".php".
infact, nobody will use your index.php like u do. programmers are setting up N-TIER models, so the index is rly just an index and doesnt hold information. (GUI, business (service) layer and data access layer are class groups).
So if you concentrade on designing a page, just use html and css files. a good coder starts with a huge conception instead of extending your php files.


secondly, if u want to use floating, its not hard to do so. there are many ways of doing it. as first u need a container that starts below the nav and stops before the footer. now u can make 3 divs in it.
Code:
<div id="content"><div id="left">left side</div><div id="center">center</div><div id="clear"></div></div>

now its important u understand that u should float every div to left in the content div, BUT the clear div. this only works if u have a fixed width (so its perfect here).
Code:
#content
{
  width: 970px;
}
#left, #center
{
  float: left;
}
#left
{
  width: 300px;
}
#center
{
  width: 670px;
}
by floating these elements to left u will have the problem the parent div wont increase the height by its content.
for that we got a final div in the container which makes sure, the height will increase of the parent div by simply clear the floats.
Code:
#clear
{
  clear: both;
}

other ways are u could just float the left div, and remove the center div, and simply give the parent #container div padding-left like the width of the left div, but i prefer this kind of way.

if u still got more questions, there is no need to add anybody, just google for container tutorials in css.
 
MC Web Designs
Joined
Oct 28, 2010
Messages
888
Reaction score
111
as first, if u just want to release a design, dont call the file extentions ".php".
infact, nobody will use your index.php like u do. programmers are setting up N-TIER models, so the index is rly just an index and doesnt hold information. (GUI, business (service) layer and data access layer are class groups).
So if you concentrade on designing a page, just use html and css files. a good coder starts with a huge conception instead of extending your php files.


secondly, if u want to use floating, its not hard to do so. there are many ways of doing it. as first u need a container that starts below the nav and stops before the footer. now u can make 3 divs in it.
Code:
<div id="content"><div id="left">left side</div><div id="center">center</div><div id="clear"></div></div>

now its important u understand that u should float every div to left in the content div, BUT the clear div. this only works if u have a fixed width (so its perfect here).
Code:
#content
{
  width: 970px;
}
#left, #center
{
  float: left;
}
#left
{
  width: 300px;
}
#center
{
  width: 670px;
}
by floating these elements to left u will have the problem the parent div wont increase the height by its content.
for that we got a final div in the container which makes sure, the height will increase of the parent div by simply clear the floats.
Code:
#clear
{
  clear: both;
}

other ways are u could just float the left div, and remove the center div, and simply give the parent #container div padding-left like the width of the left div, but i prefer this kind of way.

if u still got more questions, there is no need to add anybody, just google for container tutorials in css.

I have tried this many times before, and it does not work. I guess I'll try it again and see though. Also, I know about my PHP files, but I'm not making a perfect website and then releasing it, that would just be silly :8:
 
• ♠️​ ♦️ ♣️ ​♥️ •
Joined
Mar 25, 2012
Messages
909
Reaction score
464
I have tried this many times before, and it does not work. I guess I'll try it again and see though. Also, I know about my PHP files, but I'm not making a perfect website and then releasing it, that would just be silly :8:

lol, one php file per subsite isnt a solution too. mainly users should only run the index.php and it should work with GUI includes (content via address params, wraps like head/foot directly) and libs (business and data access layers) otherwise u code everything thousands of times and have sad fun if u must change / fix anything.
well, object oriented programming is my way i do it, and its much better and very organized.

and i dont believe u already tried the floats and clears on a right way, because it 100% works ^^
u should check the div container hierarchy and other css properties strictly.

if it still dont work, u should post more of your html/css.
 
Last edited:
MC Web Designs
Joined
Oct 28, 2010
Messages
888
Reaction score
111
lol, one php file per subsite isnt a solution too. mainly users should only run the index.php and it should work with GUI includes (content via address params, wraps like head/foot directly) and libs (business and data access layers) otherwise u code everything thousands of times and have sad fun if u must change / fix anything.
well, object oriented programming is my way i do it, and its much better and very organized.

and i dont believe u already tried the floats and clears on a right way, because it 100% works ^^
u should check the div container hierarchy and other css properties strictly.

if it still dont work, u should post more of your html/css.

Honestly, I have tried it. Maybe you could Teamview me and help me with it? Credits will be given.
 
• ♠️​ ♦️ ♣️ ​♥️ •
Joined
Mar 25, 2012
Messages
909
Reaction score
464
Honestly, I have tried it. Maybe you could Teamview me and help me with it? Credits will be given.

if u talk about the php part: this progress takes alot of time to implement but saves huge time on maintenance it, i prefer u get into PHP OOP and PHP N-TIER models (google it) instead of just getting my help.

if u talk about the html/css part: maybe i could help u via TV, but this is very annoying due the small screen, the connection delays and your risk to let me on your pc. ^^
i prefer u show me your html/css and let me see around, thats much easier and the least i can do.
however if u believe its not working, u can copy code this post below and save it into a html file and run it local. thats all i can do for now, i still got private projects im working on.

Code:
<html><head>
<style type="text/css">
<!--
html, body
{
  margin: 0;
  padding: 0;
}
#content
{
  margin: 0 auto;
  background-color: #000000;
  width: 970px;
}
#left, #center
{
  float: left;
}
#left
{
  background-color: #FFAAAA;
  width: 300px;
}
#center
{
  background-color: #FFFF99;
  width: 670px;
}
#clear
{
  clear: both;
}
-->
</style>
</head>
  <body>
  stuff above
  <div id="content">
    <div id="left">left side<br />left side<br />left side<br />left side<br />left side<br />left side<br />left side<br />left side<br /></div>
    <div id="center">center<br />center<br />center<br />center<br />center<br />center<br />center<br />center<br /></div>
    <div id="clear"></div>
  </div>
  stuff below
  </body>
</html>
 
MC Web Designs
Joined
Oct 28, 2010
Messages
888
Reaction score
111
if u talk about the php part: this progress takes alot of time to implement but saves huge time on maintenance it, i prefer u get into PHP OOP and PHP N-TIER models (google it) instead of just getting my help.

if u talk about the html/css part: maybe i could help u via TV, but this is very annoying due the small screen, the connection delays and your risk to let me on your pc. ^^
i prefer u show me your html/css and let me see around, thats much easier and the least i can do.
however if u believe its not working, u can copy code this post below and save it into a html file and run it local. thats all i can do for now, i still got private projects im working on.

Code:
<html><head>
<style type="text/css">
<!--
html, body
{
  margin: 0;
  padding: 0;
}
#content
{
  margin: 0 auto;
  background-color: #000000;
  width: 970px;
}
#left, #center
{
  float: left;
}
#left
{
  background-color: #FFAAAA;
  width: 300px;
}
#center
{
  background-color: #FFFF99;
  width: 670px;
}
#clear
{
  clear: both;
}
-->
</style>
</head>
  <body>
  stuff above
  <div id="content">
    <div id="left">left side<br />left side<br />left side<br />left side<br />left side<br />left side<br />left side<br />left side<br /></div>
    <div id="center">center<br />center<br />center<br />center<br />center<br />center<br />center<br />center<br /></div>
    <div id="clear"></div>
  </div>
  stuff below
  </body>
</html>

Index.php:
 
• ♠️​ ♦️ ♣️ ​♥️ •
Joined
Mar 25, 2012
Messages
909
Reaction score
464
what the duck, yesterday night i posted the solution for your problem with a big statement, why my post is removed -.-

i wont type the whole statement again, just u kno: your problem is that u didnt calculate the correct width for the boxes. u should add
Code:
* { padding: 0; margin: 0; }
at the top of your css to avoid the browser preseted auto padding and margin.
then u must learn the total width is: margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right.
u actually failed by making the divs to large when u tried to add the side-bar, so the 2nd floated div will wrap (like wordwrap).

so thats the solution:
Code:
<div class="wrapper">
  <div class="side-bar">side bar<br />side bar<br />side bar<br />side bar<br />side bar<br /></div>
  <div class="content">
    <p id="heading"><strong>News, Updates & Events!</strong></p>
...table...
    </div>
  <div style="clear: both;"></div>
</div>
Code:
.side-bar {
  float: left;
  width: 200px;
  background-color: #666666;
}
.content {
  float: left;
  width: 690px;
  padding-left: 0;
  padding-right: 0;
}
result:
Matt Clarke - New FlyFF Server Website Design - RaGEZONE Forums


now as last i want to tell u:
1. your program style is horrible, u guys will fail on big projects because the php coder just include any php file where dynamic content is needed, on complex produces it will be hard.
2. then, i see u use many css3 specifications, learn to work with png files.
3. then again, you should try to avoid tables for the design
4. im not a dude btw
5. and i didnt want the php file, i wanted just the html, did u never check only the html source in your browser by "view page source"?

sigh, who deleted my old post, thx, im mad on u, you stole my time.
 
Back
Top