Toggle sidebar Toggle sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Build a web site like adium

E

ejk91

macrumors newbie
Original poster
I am building a new website, and I would like to know if it is possible to build a site with a design similar to the one adium has? if possible how can i do one like that? if you wanna check it out the url is http://www.adiumx.com/. Thanks
 
Of course you can. You can build a site to look like whatever you want. If you could be more specific about which feature(s) you particularly like and want to replicate, I could show you the code that does it.
 
mrogers said:
Of course you can. You can build a site to look like whatever you want. If you could be more specific about which feature(s) you particularly like and want to replicate, I could show you the code that does it.
Click to expand...

Ok thanks a lot. I would like to know how i can display any feature any where on the page. I would also like to know how i can put links into a button format like the one on the adium website; and how i can put logos or pictures that can link to another page.
 
ejk91 said:
Ok thanks a lot. I would like to know how i can display any feature any where on the page. I would also like to know how i can put links into a button format like the one on the adium website; and how i can put logos or pictures that can link to another page.
Click to expand...

OK, it sounds like you're really starting from basics. You need to go read a primer on HTML and in particular CSS. There's lots of good tutorials out there. Once you read one, start playing around with a file of your own and try to position things and modify the look and behavior of links. When you run into a specific problem, by all means ask here. We want to help, but your questions are incredibly broad and would not be served well by someone here just rewriting what has already been written thousands of times around the web -- what is CSS and how to use it. For us to help you, you really need to come in with at least a basic working knowledge and ideally have made an attempt.

I can answer your last question quite easily though: to make an image that links to another page, just put the regular link <a> tag around an image:

Code: 
<a href="http://somelink.com"><img src="/images/blah.jpg"></a>
 
I agree he is being pretty vague but i think what he meant is how did the guys from Adium code the whole "tab" on the top right with such shapes colors etc etc...
 
Cntrl+click on web page, select View Source will give you the code of the page.

As mentioned earlier, you'll need to (at least) learn html+css to figure out the code.
 
EJK and iWill, I got your PMs, I'll just respond to you here.

I want to help you guys, I really do. I love getting new people into the web design fold the right way. So please understand I'm not trying to be mean or unhelpful, it's just not in anyone's interest for me to give a sermon on CSS right here when it's so many other places on the web. As scokim mentioned, you can view the source of the Adium web site to see how they did it, but it's not going to mean anything to you unless you understand HTML and CSS. Without looking at their code, I can tell you how I would do the header portion:

Code: 
<html>
<head>
<style type="text/css">
body { margin: 0px; pdding: 0px; }

#header {
  display: block;
  background: #006699; /* some shade of blue */
  height: 70px;
  position: relative;
}

#logo {
  color: white;
  font-size: 30px;
  font-weight: bold;
  float: left;
  margin: 20px;
}

#navigation {
  position: absolute;
  bottom: 4px;
  right: 5px;
}

#navigation a {
  padding: 4px 10px;
  background: #bbb;
  text-decoration: none;
}

#navigation a.selected {
  background: white;	
}
</style>
</head>
</body>
<div id="header">
  <div id="logo">Your logo here</div>
  <div id="navigation">
    <a href="#" class="selected">Home</a>
    <a href="#">About</a>
    <a href="#">Contact us</a>
  </div>
</div>
</body>
</html>

That's a quick-and-dirty representation. Making it look nicer will require some additional CSS properties, and a background image for the tabs.
 
mrogers said:
OK, it sounds like you're really starting from basics. You need to go read a primer on HTML and in particular CSS. There's lots of good tutorials out there. Once you read one, start playing around with a file of your own and try to position things and modify the look and behavior of links. When you run into a specific problem, by all means ask here. We want to help, but your questions are incredibly broad and would not be served well by someone here just rewriting what has already been written thousands of times around the web -- what is CSS and how to use it. For us to help you, you really need to come in with at least a basic working knowledge and ideally have made an attempt.

I can answer your last question quite easily though: to make an image that links to another page, just put the regular link <a> tag around an image:

Code: 
<a href="http://somelink.com"><img src="/images/blah.jpg"></a>
Click to expand...

Actually, i know more than the basics on web, html, css ... but I just want to know how to emulate the exact same thing as the features shown on the adium site. I would like to create a css file that can create something like the one that they must have used to create the home page. I just want to be able to do that and then ill do the rest myself. Thx a lot for your help, I hope its precise enough, otherwise tell me what you dont understand so i can clarify.
 
Oh ok. I definitely got the impression you hadn't worked with this stuff before.

See my above code, that should get you started. The one additional thing they have going on in the tabs is background images. The way you do that is make yourself a slight gradient image -- and since we're going to be repeating this in the x-direction it only needs to be a few pixels wide -- and then apply it like so:

Code: 
#navigation a {
  padding: 4px 10px;
  text-decoration: none;
  background: #bbb url("path/to/image/relative/to/this/document.gif") top left repeat-x;
}

Let us know what beyond that isn't clear about their site. If you understand CSS and HTML though, you should be able to learn a lot from just looking at the source.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back