[Tool/Web/Other] Basic SA:MP Website Template [CSS & HTML]
#1

Flake's Basic SA:MP UCP / Website


Information
Hello and welcome.. This is just a very basic and simple website design for a SA:MP community, it only took a few hours to put together and get running so I hope you all enjoy it.

UPDATE: Read the bottom of the post for updates, the UCP has now been added.

Screenshots
Demo: http://pds2k12.ml/Template/





(Sorry for the 800x600 res, I just shrunk it down a little to fit in in the forum post, but you get the picture.
Fetures
Like I said, it isn't much it's more of a project at the moment it'll be rocking the following:
  • Pop up tabs on the top left (When hover)
  • Copyright banner at the bottom (Easily editable)
  • A bunch of easy access defines to change the settings of the website
To edit the look/settings of the website just head over settings.php inside you'll see the following:
PHP Code:
        define('SVRNAME''Your Server Name');
    
define('OWNER''Your name'); 
    
define('SVRIP''192.168.1.1'); 
    
define('YEAR''2014'); 
I'll update this thread when I update the github project too.


Download

Github Download
Mirrors are welcome
Updates
  • Added a sliding animation to the tabs on the top left
  • Added all the UCP CSS/PHP
  • Edited the top banner along with adding the .psd file for it
  • Made a transparent copy of every weapon for the UCP
  • Added the database drop the the github
  • The UCP Grabs your skin/weapons and shows them VIA a image
  • Fixed the FavIcon, made it look a little better

Credits
  • Me - Making the template (CSS & HTML)
  • Twizted - His amazing panaramic redner user for the header His Profile
  • Patrick_ - Aligned tabs along with hosting the demo
Reply
#2

The whole thing looks subtle and matches the sublime pattern; but the navigation bar is not at the right place. I'd suggest to put it like horizontally near the main div box

Good job.
Reply
#3

Quote:
Originally Posted by Sublime
View Post
The whole thing looks subtle and matches the sublime pattern; but the navigation bar is not at the right place. I'd suggest to put it like horizontally near the main div box

Good job.
Cheers for the feedback, I'll play around with it a little and try get it looking a little more flush.
Reply
#4

ofc its awesome
Reply
#5

rocking the following fetures features* Sorry for the nazi stuff.

Good job with the template.
Reply
#6

Quote:
Originally Posted by iZN
View Post
rocking the following fetures features* Sorry for the nazi stuff.

Good job with the template.
haha, oops, didn't even notice I did that, cheers :P
Reply
#7

Hey nice Template, looks very simply but I like how you designed the navigation bar, anyways I pulled a fixed navigation bar on Github (Pull Request) as it is not aligned, overall well done.

Example Website: http://pds2k12.ml/Template/ - You can see the website live.
Reply
#8

Quote:
Originally Posted by Patrick_
View Post
Hey nice Template, looks very simply but I like how you designed the navigation bar, anyways I pulled a fixed navigation bar on Github (Pull Request) as it is not aligned, overall well done.

Example Website: http://pds2k12.ml/Template/ - You can see the website live.
Ah yeah! Cheers for that man, I'll chuck that demo link up on the main post.
Reply
#9

It looks a little bit strange on a 1080p display, obviously it's fine when I zoom in to 150% on chrome but yea: http://puu.sh/84xXe.jpg. Also when hovering over the first tab, there is a small gap between the header and navigation tab. I'm not a great fan of the simplicity of it, however I do love the pattern used on the background!
Reply
#10

Looks really good Nice work!
Reply
#11

Quote:
Originally Posted by Gus_Stone
Посмотреть сообщение
Looks really good Nice work!
Much appreciated.
Reply
#12

You don't mind if I fork the website with the navigation bar positioned elsewhere (and making use of real-time JS animation?)
Reply
#13

can you add Mediafire/4Shared/2Shared/Solidfiles ?
Reply
#14

Version 1.1 Update


Fetures
I'll keep this short and i'll update the main post too, pretty much I added a bunch more features to it and made it more like a UCP.

It uses whirlpool hash so you'll need to make sure your gamemode does that too or else you'll find yourself struggling to log in to your account..
I also made up a database drop that'll be in with the files on the github project, I tried to mirror most of the features of a RP server..

Updates
  • Added a sliding animation to the tabs on the top left
  • Added all the UCP CSS/PHP
  • Edited the top banner along with adding the .psd file for it
  • Made a transparent copy of every weapon for the UCP
  • Added the database drop the the github
  • The UCP Grabs your skin/weapons and shows them VIA a image
  • Fixed the FavIcon, made it look a little better
Download

Github Download V1.1



Screenshots




Side-Notes
Please.. Remember to update all the settings in settings.php (Yes! That does mean your mysql details) With out them it won't connect and you're going to have a bad day.
Reply
#15

I know that picture in the banner. That's a cool template though; however, you could've went for a better choice of fonts.
Reply
#16

Quote:
Originally Posted by Twizted
Посмотреть сообщение
I know that picture in the banner. That's a cool template though; however, you could've went for a better choice of fonts.
Yeh I credited you in the main post

I'm still messing around with the fonts, I went with pricedown to get the 'san andreas' kind of look to it, I might change it up a little later.
Reply
#17

Use Montserrat for body text. Simple yet very good looking font.
Reply
#18

great update
Reply
#19

AWESOME !!!
Reply
#20

http://sublimity.site90.com/

The new website demo if anybody needs it.

Your positions are all fucked, looks fucked in my monitor.
Reply


Forum Jump:


Users browsing this thread: 4 Guest(s)