Jump to content

WD&P Mega Topic


Dalpura

Recommended Posts

 

WD&P Mega Topic

 

Welcome to the Web Design & Programming Mega Topic. Below you will find some useful links to various WD&P related goodies. As well as the WD&P Rules. Any questions you may have about this topic, or about WD&P, please feel free to ask Toadyd, Johnno, or myself. As well as any feedback, errors, or additions you'd like to send to us.

 

Tutorials

Posted/Updated Feb 15th Edited by Toadyd
Link to comment
Share on other sites

GTAF Firefox Extension

By PatrickW - Original Topic

 

 

 

 

 

 

I made a firefox extension, based on the well-known BBcode firefox extension. It adds support for (almost) all message-tags to the background menu including the GTAforums specific ones.

 

 

user posted image

This extension is now officially released, and available at the firefox extensions update site.

It can be installed, rated and commented on its own page.

02-05-2005:Version 0.2.0 is now available at that site or you can select select update from the extensions window ( tools->extensions)

 

Install

• install GTAFcode from its home at update.mozilla.org

• restart firefox.

• rate and comment the extension at its home at update.mozilla.org

 

From now on you should see a gtaforum code menu entry in the background menu whenever you're in an editwindow.

 

How to use

Most of the entries should be self explaining, the only thing that might need some explanation is the support for the table/tableb tags.

You should just write the content of your table thereby seperating horizontal cels with a '|' character, and seperating the rows with a newline. To render a cel as a header, you should prefix is with a "*".

When your done typing, select the whole block and choose (bordered) table from the special submenu to convert it to proper tags.

e.g.

*cel1|*cel2

more cels|and yet another|last one

 

wil result in:

 

cel1 cel2
more cels and yet another last one
If no text was selected when you issued the table command, you will be prompted for content (use '|' and '*' to seperate fields and make headers) and you can stop by entering a empty row.

 

Technology

This extension (like any firefox extension) is written RDF (Resource Description Framework), XUL (XML UserInterface Language) and Java-Script. The only tools that are needed are a plain text-editor (even notepad will do) and winzip.

 

Known Issues sad.gif

• apply tags->Image inserts [image][/image] i.s.o.

 

Edit:

•changed text for release at its home at update.mozilla.org

•The mirrors are no longer needed, but thanks for supplying them sofar.

• updated for 0.2.0 release

 

For those that are less adventureous....

 

I've updated this extension, to be compatible with the latest FireFox version (1.5).

Sadly they won't host it on the official mozzila extension site anymore, as they consider it "promotional" now sad.gif..

 

Therefor you won't get an automatic update notice,

and you'll have to install the new version of gtafcode (v0.3.0) manually from my site.

 

New

Some minor bugs have been solved, and a nifty "break-quote" has been added.

Select a spot in a quote where you want to add some comment, than selection the special->break-quote, will insert a


pair, which enable you to put your comments in between.

 

I haven't included BBcode's Custom feature (yet)

 

BTW

Sorry for the long pause in posting on the forums, but I've been lurking in silence ph34r.gif

 

 

Link to comment
Share on other sites

GoDaddy.com domains for $5.19 USD

By Barbaneez - Original Topic

 

GoDaddy have clamped down on this, and it is no longer possible to get the domains so cheap.

Check the original topic for any updates or new ideas giving you tips on how to save a bit of money.

Edited by Toadyd
Link to comment
Share on other sites

Making Lists Useful

By Svip - Original Topic

 

 

 

 

 

 

Making lists useful

 

Some people have different ideas of how to create a menu, or any sort of data there just keep repeating down the line.

 

It's here lists come in, mainly known as <ul> ( unordered list ), but there is also <ol> ( ordered list ), but since we don't care about numbers, we us <ul>, each item has the tag <li> for "list item".

 

Let's write a list that is a menu we want to use.

 

HTML:

 

<ul><li>Item 1.</li><li>Item 2.</li><li>Item 3.</li><li>Item 4.</li></ul>

 

Click to view.

 

Okay. This doesn't look like much, but let's get into the CSS. First we want to remove those annoying circles, and remove the padding.

 

CSS:

 

ul {list-style-type: none;padding: 0;}

 

Click to view.

 

Okay. Let's make these items a bit more prettier. First lets add some borders on them.

 

CSS:

 

li {border:1px solid gray;}

 

Click to view.

 

Oh jeez, those lists became a little too long. So we are doomed to set a width of it. I think 30% is good number, you can use anything you want, in fact pixels instead of %.

 

CSS:

 

li {width: 30%;...}

 

Click to view.

 

Great, now let's add a background colour and some text colour to each of the list items.

 

CSS:

 

li {background-color: #ff3535;color: #0a3e6f;...}

 

Click to view.

 

Oh yeah, I didn't say this was suppose to be pretty. tounge.gif

 

Anyways, how about we add a background to left of each item?

 

CSS:

 

ul {width: 30%;background-color: #256db0;list-style-type: none;padding: 0 0 0 10%;}

 

Click to view.

 

Woops, those items got a bit small. Better fix that by removing the width of the list items.

 

Click to view.

 

Okay, anyways. Now this might seem boring enough, but what can you really use list tags for?

 

Let me show you. First we strip down our current CSS code, so we end up with;

 

CSS:

 

ul {list-style-type: none;padding: 0;}li {border:1px solid gray;}

 

 

Okay, we have seen this before, now to make this cool, we have to add some id tags to our list, so our list in HTML will look like this:

 

HTML:

 

<li id="left">Item 1.</li><li id="right">Item 2.</li><li id="left">Item 3.</li><li id="right">Item 4.</li>

 

 

Good, good. And first we start by letting the "left" items float to the left.

 

CSS:

 

li#left {float:left;}

 

Click to view.

 

Wow? Yeah. Okay, in order to make this work, we have to give the left items a width of 50% to give the same amount of space.

 

CSS:

 

li#left {width:50%;float:left;}

 

Click to view.

 

Okay, now let's say we are going to have a list of links, and they have to displayed on each side of the list ( as it looks like in the link ).

 

First we have to make the text of the right items be standing to the right.

 

CSS:

 

id#right {text-align:right;}

 

 

Then we have to add some links to our HTML code so we can see the sense.

 

HTML:

 

<li id="left"><a href="#">Item 1.</a></li><li id="right"><a href="#">Item 2.</a></li><li id="left"><a href="#">Item 3.</a></li><li id="right"><a href="#">Item 4.</a></li>

 

Click to view.

 

Uuuh, those links look ugly. We better fix that.

 

CSS:

 

li a:link, li a:visited {color: #bda176;text-decoration: none;}li a:hover, li a:active {text-decoration: underline;}

 

Click to view.

 

That's more like it. But to make it work even better, it would be cool if you could just hover within the borders and the link would be ready to press, right?

 

CSS:

 

li a:link, li a:visited {width: 100%;display: block;...}

 

Click to view.

 

Good, now we can make this look pretty good if we added a "hover" background for the links.

 

CSS:

 

li a:hover, li a:active {background-color: #f9e3bf;...}

 

Click to view.

 

Yup, that looks great. Lastly I will just add/remove some CSS to make it look cooler.

 

CSS:

Add:

 

body {background-color: #ffdfac;}ul {width: 30%;border: 1px solid #bda176;...}

 

 

Remove:

 

li {border: 1px solid gray;}

 

Click to view.

 

Now you might be wondering, what would happen if I added only one more list item? Not much but this;

 

Click to view.

 

That's why I would suggest you not to use borders on the <ul> tags, and rather on the item surrending the <ul> tag. But you get the idea.

 

I said I would make it. ¬¬

Link to comment
Share on other sites

From frames/tables to div tags

By Svip - Original Topic

 

 

 

 

 

 

From frames and tables to div tags

Notice: clicking the links throughout the guide will allow you to see how the site would look with the code we have made until now.

 

This guide is to tell you how to get from tables and frames to <div> tags.

 

Questions

Why go over to <div> tags? Tables and frames are very easy to use.

 

Yes, tables and frames are basically easy to use. But frames has a lot of problems, mostly it cause it can mess up any design, either by the user being allowed to move the borders or the wrong stuff opens in a frame. Also frames is not supported by many browsers, and it requires browsers to download a lot of useless stuff.

 

Secondly, tables is without doubt an better option than frames, but tables still have a lot of useless tags that you can have saved, and tables was originaly meant for data and not content.

 

So why is <div> tags so much better?

 

I can't even start to desribe how annoying making frames is, and tables has rows and cells and all sorts of stuff you need to take care of. While <div> tags only have their own <div> </div> tags to ensure the matter with, which means that each part of your content does not have to be in cells which are controlled by the table, while <div> tags can easily be set different towards each other, in fact none of the other <div> tags having some to say about the other tag.

 

The Guide

Let's first start out with something you might already know;

 

Tables;

 

<table><tr>	<td colspan="2">		Here is a logo.	</td></tr><tr>	<td>		A navigation list.	</td>	<td>		The content	</td></tr></table>

 

See how this page looks here.

 

While the exact same code could be resovled this way;

 

 

<div id="logo">Here is a logo.</div><div id="navi">A navigation list.</div><div id="main">The content</div>

 

See how this page looks here.

 

Now you may think that the page with the table tags looks better than the one with the div tags.

 

Perhaps, but we need CSS to make this work. Since we are not going to work with the tables again, this is the last time you see that code.

 

So let's start with the CSS code. First of all, we assume that the logo is hovering above both the navigation and the content, while the content and the navigation are side by side. So we make the navigation float left.

 

CSS:

 

div#navi {float: left;}

 

See the page now.

 

Much better aye?

 

Okay, let's move on, in order to give it a bit of sense, let's add a border to the logo, a border that is on either side and on the bottom, just not the top, just to make some graphical stuff.

 

CSS:

 

div#logo {border-width: 0px 1px 1px;border-style: none solid solid;border-color: #545454;}

 

See the page now.

 

Remember; if we were doing this with tables the size of the cell would not have been that width. But let's go on by adding borders to each of the bottom parts.

 

CSS:

 

div#navi {float: left;border-width: 0px 1px 1px 0px;border-style: none solid solid none;border-color: #545454;}div#main {border-bottom: 1px solid #545454;}

 

See the page now.

 

Not the world's most beautiful page, but at least we are getting somewhere. Now it could annoy someone that the div tags doesn't have any padding yet, so we'll add that for the looks.

 

CSS:

 

div {padding: 3px;}

 

See the page now.

 

Great, now we should make the whole site centred, so it only fills 90% of the screen, while it will always be kept centred. But because IE doesn't support you to do it with the body tag, I have to add a container div tag first.

 

HTML:

 

<div id="container">...</div>

 

 

CSS:

 

div#container {width: 90%;margin: 10px auto;padding: 0px;}

 

See the page now.

 

So let's add some background to the logo, like something gray, while we make the logo larger, in case an image should be added.

 

CSS:

 

div#logo {height: 10%;background-color: #B1B1B1;...}

 

See the page now.

 

In order to give a better sense of the content, we'll add a lot of it:

 

HTML:

 

<div id="main">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br /><br />Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

 

See the page now.

 

Okay, you will quickly notice that the navigation is now for it self, but remember, the larger the navigation gets, the more it will push the content text. But, we must be warned. Cause if we add too much it will just push the content to the right, and not just flip down as we want it to.

 

So we need to give it a width. 15% is good for a navigation.

 

CSS:

 

div#navi {width: 15%;...}

 

See the page now.

 

 

And there you have it. In a later tutorial, I will tell you how to make a navigation thingie. But now you should be able to do this by your own, right?

 

To all the hardcore webdesigners; please notice me if I have done something "wrong", which I assume I haven't.

Link to comment
Share on other sites

Winamp "Now Playing" Sig

By Jack_Knife - Original Topic

 

 

 

 

 

 

Well, after getting two requests in like, half an hour of having it as my sig, I figured I'd post the code. Just change the username to your Audioscrobbler one, and upload to your PHP-enabled web server, and that's it.

 

nowplaying.php:

 

<?// Set content type headerheader("Content-type: image/png");// Constants$charWidth = 7;$charWidthDisp = 6;$charHeight = 10;$chars = array("." => 11, ":" => 12, "(" => 13, ")" => 14, "-" => 15, "'" => 16, "!" => 17,      "_" => 18, "+" => 19, "\\" => 20, "/" => 21, "[" => 22, "]" => 23, "^" => 24,      "&" => 25, "%" => 26, "," => 27, "=" => 28, "$" => 29, "#" => 30);// Variables$username = "Jack_Knife"; // Change this to your Audioscrobbler username// Retrieve name of last song played and formatlist(,$song) = explode("\n", @file_get_contents("http://ws.audioscrobbler.com/txt/recent/".$username));if (!isset($song) || strlen($song) == 0) { $song = "Not playing anything";}$song = strtoupper($song);if (strlen($song) > 41) $song = substr($song, 0, 38)."...";// Load the background image and set transparency$image = imagecreatefrompng("background.png");$green = imagecolorallocate($image, 0, 255, 0);$trans = imagecolortransparent($image, $green);// Load the font image$fontImage = imagecreatefrompng("font.png");// Loop through string printing a character at a time$startX = 32;$startY = 31;for ($i=0; $i<strlen($song); $i++) { $char = $song[$i]; $asc = ord($char); switch ($asc) { 	case ($asc >= 65 && $asc <= 90): // Letters   imagecopy($image, $fontImage, $startX + $i * $charWidthDisp, $startY, ($asc - 65) * $charWidth, 0, $charWidth, $charHeight);   break; 	case ($asc >= 48 && $asc <= 57): // Numbers   imagecopy($image, $fontImage, $startX + $i * $charWidthDisp, $startY, ($asc - 48) * $charWidth, $charHeight, $charWidth, $charHeight);   break; 	case 34: // "   imagecopy($image, $fontImage, $startX + $i * $charWidthDisp, $startY, 26 * $charWidth, 0, $charWidth, $charHeight);   break; 	case 64: // @   imagecopy($image, $fontImage, $startX + $i * $charWidthDisp, $startY, 27 * $charWidth, 0, $charWidth, $charHeight);   break; 	default: // All other characters   if (isset($chars[$char])) imagecopy($image, $fontImage, $startX + $i * $charWidthDisp, $startY, $chars[$char] * $charWidth, $charHeight, $charWidth, $charHeight);   break; }}// Output image and clean upimagepng($image);imagedestroy($image);?>

 

 

You'll also need background.png and font.png

 

background.png:

user posted image

 

font.png:

user posted image

 

Upload the three files, and you're done. I know the code ain't too good, but it was kinda rushed, plus the stupid winamp font image doesn't have the characters in the same order as their ASCII numbers, which made it harder.

 

Enjoy, and post any questions you may have. smile.gif

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
  • 1 User Currently Viewing
    0 members, 0 Anonymous, 1 Guest

×
×
  • Create New...

Important Information

By using GTAForums.com, you agree to our Terms of Use and Privacy Policy.