GM-University1405241492
-
Content Count
27 -
Joined
-
Last visited
Everything posted by GM-University1405241492
-
Here is a little tutorial to make those small yellow-background boxes (tootltips) that pop-up for some links that describe them when you hover the mouse over them, it uses DHTML, CSS, HTML, and Javascript, so it gives us a much more wide range than my previous tutorials that just where on HTML. OK, so here we go... Put this right under <body> <div id="dhtmltooltip"></div><script type="text/javascript">var offsetxpoint=-60 //Customize x offset of tooltipvar offsetypoint=20 //Customize y offset of tooltipvar ie=document.allvar ns6=document.getElementById && !document.allvar enabletip=falseif (ie||ns6)var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""function ietruebody(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}function ddrivetip(thetext, thecolor, thewidth){if (ns6||ie){if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolortipobj.innerHTML=thetextenabletip=truereturn false}}function positiontip(e){if (enabletip){var curX=(ns6)?e.pageX : event.x+ietruebody().scrollLeft;var curY=(ns6)?e.pageY : event.y+ietruebody().scrollTop;//Find out how close the mouse is to the corner of the windowvar rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000//if the horizontal distance isn't enough to accomodate the width of the context menuif (rightedge<tipobj.offsetWidth)//move the horizontal position of the menu to the left by it's widthtipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"else if (curX<leftedge)tipobj.style.left="5px"else//position the horizontal position of the menu where the mouse is positionedtipobj.style.left=curX+offsetxpoint+"px"//same concept with the vertical positionif (bottomedge<tipobj.offsetHeight)tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"elsetipobj.style.top=curY+offsetypoint+"px"tipobj.style.visibility="visible"}}function hideddrivetip(){if (ns6||ie){enabletip=falsetipobj.style.visibility="hidden"tipobj.style.left="-1000px"tipobj.style.backgroundColor=''tipobj.style.width=''}}document.onmousemove=positiontip</script> Put this with your CSS <style> tag, or .css file. #dhtmltooltip {position: absolute;width: 150px;border: 1px solid #C1C1C1;padding: 2px;background-color: #EFEFEF;color: #000000;visibility: hidden;z-index: 100;filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);} And put this in your link onMouseover="ddrivetip('Your tooltip text','black', 300)";onMouseout="hideddrivetip()"A link example would be <a href="http://forums.xisto.com/topic/98533-topic/?findpost=1064416057 text here','red', 300)";onMouseout="hideddrivetip()">Text Here</a>
-
I've really always liked the block clasic so to say style of IPB, I think it gives it a clean, professional, and pleasing look. Also I like the modifications you can get for IPB, it gives you much more to do with your forums then phpBB, SMF, VBulliten, or YaBB combined. It also gives it more functionality than before...
-
IPB is definately the best, but it costs almost 200 dollars to use forever, and about $70 for one year... But then I'd have to say phpBB, there are many mods to help imitate IPB so you get hte quality of it, but they all lack that, that, you know the little thing that put IPB above all the rest, that thing Matt Mecham puts into it to make it so great...
-
Anyone Using IPBNuke? I have an install problem with it if so
GM-University1405241492 replied to Houdini's topic in Software
Hmm, are you using a version of IPB different than 1.2 or 1.3? -
Join the IPBGaming.com site, it is run by NilsC, and contains people from both Xisto, Xisto, and some people I know from other sites that I beleive followed me... It is a fun game and you will love it, try it out... Click Here For IPB Gaming
-
Any Certifed Ethical Hackers Out There?
GM-University1405241492 replied to jkk's topic in Security issues & Exploits
I know how to hack to some level, when I was younger I made virus's, but I prefer programming games, and chat programs now, and working on my forum software which I will never finish. -
Here are some tutorials that always get great results when I post them. Lesson 1 HTML means Hyper Text Markup Language. HTML is a very common language used for many websites, is the base for more complicated and powerful langauges like php, HTML can seem hard, but you will find it is one of the easiest langauges one can learn. The core of HTML is the tag, a tage is just a set of two arrows-like brackets created by hitting Shift and the comma key, or Shift and the period key. They look like this... < > Tags start a change in the way a webpage looks with your basic starting tag, something like the bold tag which is like this <b> the text we want to be in bold would go after the <b>, but it will spread to the end of the page if we don't end the tag, to end a tag you begin the same tag you began with, but instead start it with a </, so the tag to end the bold effect would be </b> Lesson 2 In this lesson we will learn about some basic tags to change the way a body of text looks. We will start with a few of the most common tags. We will begin with bold look at this sample and examine how the effectg is created (the word Text Here Will be what you want in bold) <b>Text Here</b> Simple right? Ok, next we will learn how to make a break, which is the same as doing this... A break is the equivilant to hitting enter, it is created like this <br> Simple right? Ok, now you may wonder "how can I make an indent (or have a tab key effect) at the next line?" well, this is just as simple as the last tag, here is a indenting tag <p> Ok, now onto Italics italics are done in the same way as bolding text, we just change the b in <b> and </b> to an i like this <i>Text Here</i> Really simple huh? Now, you are saying to yourself, "what do I do when the time comes where I need to underline my text?" well, we have the same job as we did with the italics, we just have to change those i's to u's like so <u>Text Here</u> Another thing we should consider doing is changing the size of our text, so we can make things stand out even more on our page. Here is how we do this, we need to define a size within our staring tag this time, but don't worry, it's very easy! look at this <font size="1">Text Here</font> Now it would be very bland and hard to read webpages if all we could use is size 1, so the creators of HTML gave us 7 sizes we could use, so where you se the "1" in our code we can instead use "2", "3", "4", "5", "6", or "7". Lesson 3 Ok, now we are going to learn to add some cool things to our page. Ok, we will start with the bullet, the bullet is a bit more compliated than what we have done so far, take a look here (<ul> begins the bullet series, </ul> ends it, and <li> creates an actual bullet) <ul> <li>Our First Bullet <li>Our Second Bullet <li>Our Third Bullet </ul> Notice how I hit enter after each bullet and after my starting tag, this is nessary or our bullets might not work in all browsers, some will work though... "Now, how can we create a numbered list?" you are thinking it works the same way as a bullet, with different letters in the starting and ending tags, take a look <ol> <li>First number item <li>Second number item <li>Third number item </ol>[html] Do you know what start our list, and what tag ends it? if you guessed the <ol> tag began it, and the </ol> ended it you are right. But don't worry, if you want to use more than 3 items, or less in your lists feel free to, just add another <li> tag after the last one you used, or get rid of some <li> tags, just make sure they stay after your starting tag, and before your ending tag, and make sure you hit enter aft each one... Now we will add a divide, or horizontal rule. The code is simple like creating an indent, or creating a break, here is the code [html]<hr>[/html] Now we can also change the width, so it doesn't cover the whole page, we can do two things to create this, the first is by defining the size in pixels we want, the code is (Pixel Size should be replaced with the actual number) [html]<hr width=Pixel Size>[/html] Another way we can do this is by entering the percentage of the page thw divide should cover, like so (replace percentage with the percentage, make sure to add the percent sign directly after the number...) [html]<hr width=percentage%>[/html] We can also make the divide thicker like so... (pixels should be replaced with the pixel size in numbers) [html]<hr size=pixels>[html] If we put our divide on a website it will be shaded in, if we want to remove this we must enter [html]<hr noshade>[/html] Now, "What if we want to combine these effects?" you ask? well, this is simple, we add all of the variable into our taghere is an example of a tag with all three effects (remove any not wanted) [hmtl]<hr noshade width=Pixels or percentage size=pixels>[/html] The order of the variables doesn't matter by the way. Lesson 4 Now we need to make our page more lively and less bland, so we will learn to add color now... Here is the code for changing color using hex codes (you would replace the hex with the actual hex code), [html]<font color="hex">Text Here</font>[/html] Make sure to put the hex code in quotes. Here are a few basic hex codes: Red = FF0000 Purple = CC00CC Blue= 0000FF Green= 00FF66 Yellow= FFFF00 Black= 000000 White= FFFFFF Now, we can also use the actual names of basic colors, like so (replace NC with the name of the color) [html]<font color="NC">Text Here</font>[/html] Make sure you put the name of the BASIC color in quotes. Ok, now we want to give our site a nice backround color right? ok, well here's the hex code version (remember to swap hex for the actual hex code) [html]<body bgcolor="hex">[/html] Remember to put the hex code in quotes! Now, here is the version for basic colors using the name (replace NC with the actual name...), [html]<body bgcolor="NC">[/html] Rember to put your quotes... Lesson 5 One of the last lessons we will learn is on insterting pistures and backround images. This is quite simple, but a good skill to have, ok here is the code to insert a picture (replace the words url with the actual url of the image) [html]<img src="url">[/html] Remember to put the url in quotes! Ok, we can also add a border which is like a little picture frame, here is the code (replace url with the image url, and number with the border size 0-2) [html]<img src="url" border="number">[/html] remember to put qoute around both the image's url, and the border size, speaking of border sizes, 0 will create no border (the same as not using the tag at all...) 1 will make a thin border, and 2 will create a thick border. To display a backround image (it will be tiled...) you can use this code (replace url with the image location) [html]<body background="url">[/html] rember to put the quotes around the image url. Lesson 6 (last lesson) Refining but Not Confining Ok, as our last lesson we will learn to place text somewhere else on the page, and how to link to another page... Ok, to align text or an image to the left we must enter this (put the code for your image or text where it says image/text) [html]<div align=left>image/text</div>[/html] To make the text/image centered on the page we must switch the part that says align=left to align=center and to align it to the right we must use align=right where the align=left was. Now we will create a text link, here is the code (put the url of the page you want to link to where it says url, and the ocde for the text you want displayed where it says Text Here) [html]<a href="url">Text Here</a>[/html] remember to put quotes around the url. Now, we the last thing we will learn is creating a linking image, this is quite simple, all you need to do is replace the code for your text with the code for your image. Wrap-Up Ok, well you've learned a lot to day, I hoped you understood everything, if you have a question just ask in this topic, or PM me. I will post another little course when I finish HTML Novice, it will cover tables, some basic CSS and all that junk. The best way to get a nice looking page is by combining effects, use the alignments to get things precisely where you went them! ~GM WebMaster Level 1 Lesson 1 a Breif Refresher Course Remeber the tutorial I wrote up a few days ago? Well this is the sequel, it includes some heavy HTML, some CSS. First of all we should make sure your still up to date, so take this simple little quiz, it you get 2 or more wrong please go back to the first tutorial and do a little reveiwing. True or False? 1.) The basic structure of HTML is built on semi colons? 2.) When coding in HTML it is nesscary to add an ending tag to end the effect of a beggining tag? 3.) The tag required to make a bullet or numbered item is always [html]<li>[/html] Multiple Choice 4.) The code for code to make text bold is... A) [html]<u>Text Here</u>[/html] B.) [html]<b>Text Here</b>[/html] C) [html]<i>Text Here<i>[/html] D) [html]<BoldIt>Text Here</BoldIt>[html] 6.) If you wanted to end the effect on a selection of text you would add what tag... A) [html]<end>[/html] B.) [html]</text>[/html] C) [html]</font>[html] D) [html]</text/>[html] 7.) Which of the folowing will mess up up the HTML document shown below? [html]<font color="FF0000"><u>Hello welcome to this site!</u></font><br><br><hr><div align=left><a href=https://sistersite.com/ Here for our sister site.</a></div><align=center><img src="mysite.org/go_to_the_zoo.gif;[/html] I. <font color="FF0000"> II. <a href=https://sistersite.com/ Here for our sister site.</a> III. <align=center><img src="mysite.org/go_to_the_zoo.gif"> IV. <br><br> A) I / IV B.) II / III C I / II D) III / IV 8.) What is the starting tag for a series of bullets? A) <li> B.) <ol> C) <hr> D) <ul> 9.) What does HTML stand for? A) Hexagonal Text Making Langauge B.) Hyper Text Markup Langauge C) Horticultural Turbo Masking Langause D) None of The above. 10.) The best way to get a good look for you page is by... A) Mixing diferent effects in a pleasent and complimenting way B.) Filling the page with as many link as possible C) Using lot's of bullets and numbered lists D) Never using the <b> tag or divides - - - - - Answers 1.) False 2.) True 3.) True 4.) B.) 5.) A) 6.) C) 7.) B.) 8.) D) 9.) B.) 10.) A) If you got 2 or more wrong I would recomend going back to my topic entitled HTML in the Tutorials Section. Lesson 2 Contact I thought we'd start off easy just to make sure your in your HTML mode before things get heavy, so we'll start E-Mail Links. take a look at the code bellow (you@emailprovider.domain should be replaced with your email address) [html]<a href="mailto:you@emailprovider.domain">Displayed Text Here</a>[/html] Simple as any other link right? Just make sure you put in the mailto: and put the whole little jumble in your tag after href= in quotes. So that's lesson 2, short huh? Lesson 3 Tables Tables are one of THE best ways to precisely lay out your website, a table is essentially a grid, with an X, and a Y axis. There are rows, which go across horizontaly, and collunms which go veritcaly. When rows rows and collums intersect the form a cell, cells will each hold a selection of text, or any other code you put in them. When you start a table, it should be started with [html]<table>[/html] and ended with [html]</table[/html] These are like the tags we used to declare and end our bullets and numbered lists, and you will find there is a lot in common and a lot different about them. When we want to create a row we must put [html]<tr>[/html] We must follow that (after hitting enter...) with data cell tag, which will have more HTML after it typically, here is an example of a table [html]<table> <tr> <td> the <td> tag creates a data cell <td> This is another data cell, the tag after this, the </tr> will end the row </tr> </table>[/html] The last </table> ends the table, make sure to hit enter after each tag, it's good HTML practice... Ok, now we will learn how to make our table less bland than the default one our browser provides... First of all we can change the border size, here is the code (note: the only nessescary changes are to the <table> tag, so I will not bother creating a whole tabel) [html]<table border=1>[/html] Now, we might want to give that little border a nice color to it, so here's the code, refer to the first tutorial for some Hex codes, or you can use the names of some COMMON/ BASIC colors. [html]<table border=1 bordercolor=CCCCFF>[/html] Now we can change the backround color of our table to compliment the border, here is the code to change that... [html]<table border=1 bgcolor=CCCCFF>[/html] Now if we want to change but one row of our table we can use this little fella instead [html]<tr bgcolor=CCCCFF>[/html] Now if we only want to change one data cell we can use this code [html]<td bgcolor=CCCCFF>[/html] Ok, last but not least we should learn to change our tables size... Here is the code (pixel version) (leave out width or height according to which (if any) you don't want changed) [html]<table width=Pixels height=Pixels>[/html] Now, we will make our table a difined percent of the screen (like when we made our divides) [html]<table width=10% height=10%>[/html] Adding Music Music can add a nice effect to pages, use it wisely, but don't abuse it... HTML can do some pretty cool things, here is one such example, the code bellow will create a player much like "Real Audio Player" (replace TheURLOfYourSound with the location of your sound) [html]<embed src="TheURLOfYourSound" width=300 height=60> <noembed> <bgsound src="TheURLOfYourSound"> </noembed>[/html] The embed tag will run on Netscape and other browsers, while bgsound will run on Internet Explorer and such, alway include both to insure it works. You can add autostart=true loop=true to make the sound continuosly play, here is an example of this [html]<embed src="TheURLOfYourSound" width=300 height=60 autostart=true loop=true> <noembed> <bgsound src="TheURLOfYourSound" loop=infinite> </noembed>[/html] Now we will learn to make backround music where no player will be seen, this is very simpl, add hidden=true to your tag, like so [html]<embed src="TheURLOfYourSound" hidden=true autostart=true> <noembed> <bgsound src="TheURLOfYourSound" loop=infinite> </noembed>[/html] Lesson 4 A little CSS CSS is both like and different from HTML, it allows you to change things you couldn't before, such as easily setting the font for the whole page, or changing things like the scrollbar and such. We already learned how to change the backround color with HTML, but we should learn it in CSS too, take a look here... (here is the common/ basic color name one) <style> body {background: fixed; background-color: red;}</style> or you can use the Hex code version for more colors, which is here <style> body {background: fixed; background-color: #9c2000;}</style> Notice the <style> tags, these are used to define a stylesheet which is the purpose of CSS, a stylesheet is something that we can easily add to all pages in our website to make them look alike, they can also be used in PHPBB and IPB boards. Now, we will add a picture as our backround, also know as a backround image, here is the code (put the location of the image where it says ImageURL) <style> body { background: url("ImageURL");background-attachment: fixed}</style> Ok, here is the code to change the font for the whole page <style> body {font-family:verdana; color:#EFA6FF; font-size:small;} </style> - Font-family defines what font is displayed, ex: arial, times, courier, etc.. - color defines the color of all text on your page - font-size sets the size of text on the page you are limitted to small, medium, or large If you want to change the backround too, you simply add the code to change your backround to the CSS in between the <style> and </style> tags, like so <style> body {background: fixed; background-color: #9c2000; font-family:arial; color:#EFA6FF; font-size:small;} </style> Lesson 5 Some Cool Fun You (Last Lesson) Well, we covered some hard stuff here, and now it gets harder =O Don't worry, this is kinda hard, but I will do my best to explain it, and you will be able to see that the reward is very cool. We will be using one of my favorite HTML tags, the <marquee> this is the tag that makes those cool scrolling things. Note: I'm not going to right a big thing about this, read what I wrote in the variables and such, figure out what to put, if you have a question ask me... [html]<marquee height="pixel" width="pixels" direction="direction the text should move, up or down" scrolldelay="have the scolling wait a bit before it starts" scrollamount="scrolling speed" style=put some CSS here><font face="font type" size="size">PUT YOUR HTML HERE (put almost anything in here...)</marquee> P.S. You can create nice news buluiteins by putting these in tables, and labeling them with a top row with a backround... Wrap-Up You've probably heard this before "HTML is so useless, use php" to some extent they are right, but look what we just did with useless old HTML, remember wisely mix effects, and practice your HTML skills, next time we meet we will deal with IFrames, advanced CSS, a little PHP, and more. phpBB login-bos on main site Ok here is the code. ////Create login area, replace the phpBB2 in /phpBB2/login.php with your forum's directory//<form action="/phpBB2/login.php" method="post" target="_top"><table width="25%" cellspacing="2" cellpadding="2" border="0" align="center"> <tr> <td align="left" class="nav"><a href="/phpBB2/index.php" class="nav">Prank Place Forum Index</a></td> </tr></table><table width="25%" cellpadding="4" cellspacing="1" border="0" class="forumline" align="center"> <tr> <th height="25" class="thHead" nowrap="nowrap">Please enter your username and password to log in.</th> </tr> <tr> <td class="row1"><table border="0" cellpadding="3" cellspacing="1" width="100%"> <tr> <td colspan="2" align="center"> </td> </tr> <tr> <td width="11%" align="right"><span class="gen">Username:</span></td> <td> <input type="text" class="post" name="username" size="25" maxlength="40" value="" /> </td> </tr> <tr> <td align="right"><span class="gen">Password:</span></td> <td> <input type="password" class="post" name="password" size="25" maxlength="32" /> </td> </tr> <tr align="center"> <td colspan="2"><span class="gen">Log me on automatically each visit: <input type="checkbox" name="autologin" /></span></td> </tr> <tr align="center"> <td colspan="2"><input type="hidden" name="redirect" value="" /><input type="submit" name="login" class="mainoption" value="Log in" /></td> </tr> <tr align="center"> <td colspan="2"><span class="gensmall"><a href="profile.php?mode=sendpassword" class="gensmall">I forgot my password</a></span></td> </tr> </table></td> </tr></table></form> You can test this out on my site, here> http://forums.xisto.com/no_longer_exists/ If you like my little guide shout it on my forums shoutbox at the bottom of the page.