• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!
  • 2026 staff recruitment is open! Check it out and consider applying!

[ModernACC] Easy webdesign

JoccE

CopyLeft (ɔ)
Joined
Aug 26, 2007
Messages
3,418
Solutions
1
Reaction score
93
Location
Sweden, Stockholm
So :p
I've seen a lot of "tracked" layouts for modernACC so i desided to make a simple layout where you can change the style/color after your needs and likes :)

Here's 2 examples i've made
layout1qm.png

layout2a.png


To Edit the layout here's how:
To change background, go inte the index.tpl and look for:
HTML:
body {
	background-image:url('{$path}/templates/work/images/bg.JPG');
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position: center;
}

Change:
HTML:
background-image:url('{$path}/templates/work/images/bg.JPG');
To the name of your image ;)

To change the colors of the window, we got 3 main divs:

HTML:
#content {
	width: 700px;
	background-color: #111111;
	margin-left: 300px;
	margin-top: 10px;
	border:5px solid gray;
	-moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
	opacity:0.7;
}
HTML:
#footer {
	height: 30px;
	width: 700px;
	background-color: #111111;
	margin-left: 300px;
	margin-top: 10px;
	border:5px solid gray;
	-moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
	opacity:0.7;
}
and
HTML:
#menu {
	height: 50px;
	width: 700px;
	background-color: #111111;
	margin-left: 300px;
	margin-top: 70px;	
	border:5px solid gray;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	-khtml-border-radius: 20px;
	border-radius: 20px;
	opacity:0.7;
	color: white;	
}

There you can change.
Color
Opacity rate
What kind of border you want
margin-left: = the place you want the window to be ;)

I will only include the first one ;) because i'm currently using the second for the Harry Potter Online

If you don't know HTML/CSS i'm willing to help :) just ask in the thread.

Download LINK: work rar
Live preview: Harry Potter Online.
 
Back
Top