Chat
Discord
OK, some sigs here breaks the rules of MyCode(those [tagname=attribute]sometext[/tagname]) like having tables, small spoilers, scrolling text and scrolling spoilers etc... so I thought about making a thread about it.
So lets get started.
Warning!
You shouldnt overuse the following.
I am not responsible for your actions!
If you want to find out more then right click>view source on a page.
If the page has a no right click script then try the view menu and click source.
You can read the entire HTML source of the page, then C&P some of the code into your signature.
Edit it and done.
So lets get started.
Warning!
You shouldnt overuse the following.
I am not responsible for your actions!
Agree? (Click to View)
1. An example.
An example (Click to View)
First of all lets look at an example.
Scroll down to the bottom of this post and look at my sig.
It had:
Scroll down to the bottom of this post and look at my sig.
It had:
- A small and scrolling spoiler. That when you open it, it adds a little bar to the top of the page with some links.
- 3 links that scrolls with red text and gray underline aswell as a transparent background and dotted border.
- Some boring motto/slogan text.
2. The idea.
The idea (Click to View)
The basic idea is simply HTML and CSS.
HTML stands for HyperText Markup Language and CSS for Cascading Style Sheet.
These are used by web developers all over the world.
The basic syntax of HTML is:
And CSS looks like this:
HTML stands for HyperText Markup Language and CSS for Cascading Style Sheet.
These are used by web developers all over the world.
The basic syntax of HTML is:
|
HTML-Code:
<html> <head> <title> pagetitle </title> </head> <body> <h1>aheader</h1> <p>aparagraph</p> <input type="button" value="abutton"> </body> </html> |
And CSS looks like this:
|
CSS-Code:
body { font-family: 'Times New Roman'; font-size: 42pt; } input[type="button"] { border: 2px outset gray; background: gray; } |
3. Explanation.
Explanation (Click to View)
In the previous step we saw some HTML and CSS.
Here I will explain how it works:
Now to CSS:
OK, now you know a little HTML and CSS.
If you want to know more you can go to http://w3schools.com.
Here I will explain how it works:
HTML (Click to View)
In HTML all tags starts with "<" and all tags end with ">".
The tag "<html>" indicates that the document is HTML.
To end a tag use this:
</tagname>
So at the end of the document we add "</html>" to tell the document has ended.
All other tags are between "<html>" and "</html>".
Now we add the "<head>" tag and inside it the "<title>" tag.
We also add a end tag to each of them.
Inside the "<title>" tag we write the title of the page which will be displayed on the top of the browser window.
Now after "</head>" we add the "<body>" tag and ends it with "</body>".
Everything inside the "<head>" tag is shown but most web developers doesnt use tags that are shown.
Everything inside the "<body>" tag is the page that we see.
"<head>" has the extra information like stylesheets and scripts while body has the page.
Inside "<body>" we have:
The "<h[1-6]>" defines a header.
The higher the number the smaller the header.
The "<p>" defines a paragraph.
I mostly dont use paragraphs but as some do I just wanted to point it out.
Last but not least the "<input>" tag.
This defines form inputs.
Notice that it doesnt contain any ending tag.
It also contains a few attributes.
These are "type" and "value" which defines each their things.
type="button" means that the input is a button.
If I didnt add this it would be a textfield.
value="abutton" defines the text that is going to be in the button.
If I didnt add this it would be a empty button.
Also writing tags and attributes with lower-case letters is NOT important, it is completely optional but I prefer doing so as I want to keep a clean syntax.
If a tag with attributes end uses a end tag the attributes are not written in the end tag.
Example:
The tag "<html>" indicates that the document is HTML.
To end a tag use this:
</tagname>
So at the end of the document we add "</html>" to tell the document has ended.
All other tags are between "<html>" and "</html>".
Now we add the "<head>" tag and inside it the "<title>" tag.
We also add a end tag to each of them.
Inside the "<title>" tag we write the title of the page which will be displayed on the top of the browser window.
Now after "</head>" we add the "<body>" tag and ends it with "</body>".
Everything inside the "<head>" tag is shown but most web developers doesnt use tags that are shown.
Everything inside the "<body>" tag is the page that we see.
"<head>" has the extra information like stylesheets and scripts while body has the page.
Inside "<body>" we have:
- A header.
- A paragraph.
- A button.
The "<h[1-6]>" defines a header.
The higher the number the smaller the header.
The "<p>" defines a paragraph.
I mostly dont use paragraphs but as some do I just wanted to point it out.
Last but not least the "<input>" tag.
This defines form inputs.
Notice that it doesnt contain any ending tag.
It also contains a few attributes.
These are "type" and "value" which defines each their things.
type="button" means that the input is a button.
If I didnt add this it would be a textfield.
value="abutton" defines the text that is going to be in the button.
If I didnt add this it would be a empty button.
Also writing tags and attributes with lower-case letters is NOT important, it is completely optional but I prefer doing so as I want to keep a clean syntax.
If a tag with attributes end uses a end tag the attributes are not written in the end tag.
Example:
|
HTML-Code:
<button type="button">abutton</button> |
CSS (Click to View)
In CSS we saw a quite different syntax(grammar) than in HTML.
Lets explain.
The "body {" means that we start defining styles for the body tag.
"font-family: 'Times New Roman';" means that the font is "Times New Roman".
"font-size: 42pt;" sets the size of the text to 42.
And "}" of course ends the styling of body.
"input[type="button"] {" starts styling the input tag but only those with the attribute type="button".
"border: 2px outset gray;" sets the border to 2 pixels thin and 3Dish outset style and color gray.
"background: gray;" sets the background color/image. Here we set the background color to gray.
"}" ends styling input type="button".
You can also use ".classname" and "#idname" to only affect tags with specific classes and ids which are defined by the "id" and "class" attributes.
You can see that I am writing with lower-case letters here.
CSS is 99% case-insensitive but I prefer lower-case.
Lets explain.
The "body {" means that we start defining styles for the body tag.
"font-family: 'Times New Roman';" means that the font is "Times New Roman".
"font-size: 42pt;" sets the size of the text to 42.
And "}" of course ends the styling of body.
"input[type="button"] {" starts styling the input tag but only those with the attribute type="button".
"border: 2px outset gray;" sets the border to 2 pixels thin and 3Dish outset style and color gray.
"background: gray;" sets the background color/image. Here we set the background color to gray.
"}" ends styling input type="button".
You can also use ".classname" and "#idname" to only affect tags with specific classes and ids which are defined by the "id" and "class" attributes.
You can see that I am writing with lower-case letters here.
CSS is 99% case-insensitive but I prefer lower-case.
If you want to know more you can go to http://w3schools.com.
4. Lets start.
Lets start (Click to View)
First of all you wont need "<html>", "<head>", "<title>" and "<body>"-tags, as LFE already has those tags included in the source.
You wont need the "tagname {" things aswell.
What we are using is the "attribute: value;" things.
We place these into the "style" HTML attrubutes like this:
Now lets make a simple thing.
Go to the Edit Signature page under your User CP.
Then write "<h1>Test</h1>" and press "Preview Signature".
If you see "Test" written with big letters then it is a success.
If not you either did something wrong or MyBB (the forum software used by LFE) wont allow you to use HTML for some reason.
After that then try to replace the "<h1>" tags with "<marquee>" tags.
If successful it should result in scrolling text like my scrolling spoiler and scrolling links.
You can control the speed of the marquee with the attributes "scrolldelay" and "scrollamount".
Add a "<div>" tag around the marquee.
Then add the attribute "style" to the "<div>" tag and write "border: 1px dotted #50FF10;" this will create a green border around the scrolling text.
You code should look like this:
As a last thing we add the "<a>" tag around the div.
Give it a "href" attribute and enter a URL as its value.(http://google.com, http://youtube.com, http://lf-empire.de, etc...)
It should look like this:
Now when someone (or Someone else) clicks on the marquee they will be linked to the value of "href" in the same page as they were viewing you signature AKA without opening a new window/tab.
This is the basic idea used for the scrolling links.
My links are a bit more advanced though.
You wont need the "tagname {" things aswell.
What we are using is the "attribute: value;" things.
We place these into the "style" HTML attrubutes like this:
|
HTML-Code:
<tagname style="attribute: value;">sometext</tagname> |
Now lets make a simple thing.
Go to the Edit Signature page under your User CP.
Then write "<h1>Test</h1>" and press "Preview Signature".
If you see "Test" written with big letters then it is a success.
If not you either did something wrong or MyBB (the forum software used by LFE) wont allow you to use HTML for some reason.
After that then try to replace the "<h1>" tags with "<marquee>" tags.
If successful it should result in scrolling text like my scrolling spoiler and scrolling links.
You can control the speed of the marquee with the attributes "scrolldelay" and "scrollamount".
Add a "<div>" tag around the marquee.
Then add the attribute "style" to the "<div>" tag and write "border: 1px dotted #50FF10;" this will create a green border around the scrolling text.
You code should look like this:
|
HTML-Code:
<div style="border: 1px dotted #50FF10;"><marquee>Test</marquee></div> |
As a last thing we add the "<a>" tag around the div.
Give it a "href" attribute and enter a URL as its value.(http://google.com, http://youtube.com, http://lf-empire.de, etc...)
It should look like this:
|
HTML-Code:
<a href="http://lf-empire.de"><div style="border: 1px dotted #50FF10;"><marquee>Test</marquee></div></a> |
Now when someone (or Someone else) clicks on the marquee they will be linked to the value of "href" in the same page as they were viewing you signature AKA without opening a new window/tab.
This is the basic idea used for the scrolling links.
My links are a bit more advanced though.
5. The top bar.
The top bar (Click to View)
OK, this one is my favourite.
The trick is simple enough.
Make a div at first and write some text into it.
This is the text that is going to be in the bar.
Then give it a nice background with the "background" CSS attribute.
Lets just use a black one.
It should look like this:
When you try it it should apear like a completely normal boring div.
Then add the "border-bottom" CSS attribute and define a nice border.
Im going to use a red, dotted, 1 pixel thin border.
It should now look like this:
When you try it it should get a border at the bottom of the div. Now to the real deal.
In the "style" attribute add this text:
The "position:fixed" indicates it is a fixed position.
This means that it will stay at the same position in the browser window.
Even if the page is scrolled.
"left:0px;top:0px" indicates the position of the div.
This is 0px because it should be at the top left corner.
"width:100%" means that it should go the whole way accross the page.
When you try now it should work as my little bar.
One difference is that my one opens when a spoiler is clicked, while yours is always open.
Simply add a spoiler around it.
When the spoiler is opened the bar will apear.
Source:
The trick is simple enough.
Make a div at first and write some text into it.
This is the text that is going to be in the bar.
Then give it a nice background with the "background" CSS attribute.
Lets just use a black one.
It should look like this:
|
HTML-Code:
<div style="background:black">some text</div> |
When you try it it should apear like a completely normal boring div.
Then add the "border-bottom" CSS attribute and define a nice border.
Im going to use a red, dotted, 1 pixel thin border.
It should now look like this:
|
HTML-Code:
<div style="background:black;border-bottom:1px dotted red">some text</div> |
When you try it it should get a border at the bottom of the div. Now to the real deal.
In the "style" attribute add this text:
|
CSS-Code:
position:fixed;left:0px;top:0px;width:100%; |
The "position:fixed" indicates it is a fixed position.
This means that it will stay at the same position in the browser window.
Even if the page is scrolled.
"left:0px;top:0px" indicates the position of the div.
This is 0px because it should be at the top left corner.
"width:100%" means that it should go the whole way accross the page.
When you try now it should work as my little bar.
One difference is that my one opens when a spoiler is clicked, while yours is always open.
Simply add a spoiler around it.
When the spoiler is opened the bar will apear.
Source:
|
HTML-Code:
<div class="tborder spoiler"><div class="spoiler_header">Spoiler <a href="javascript:void(0);" onclick="javascript:if(parentNode.parentNode.getElementsByTagName('div')[1].style.display=='block'){parentNode.parentNode.getElementsByTagName('div')[1].style.display='none';this.innerHTML='(Click to View)';this.parentNode.className = 'spoiler_header';}else {parentNode.parentNode.getElementsByTagName('div')[1].style.display='block';this.innerHTML='(Click to Hide)';this.parentNode.className += ' spoiler_header_cornered';}">(Click to View)</a></div><div class="spoiler_body" style="display: none;"><div style="position:fixed;left:0px;top:0px;width:100%;background:black;border-bottom:1px dotted red">some text</div></div></div> |
6. Progress bar.
Progress bar (Click to View)
Well ive seen all those progress bars in sigs and decided to make my own kind.
Simply copy and paste the following code into your sig and make a few changes to it:
"ASDF:" is the text shown before the bar. This should be the name of your project.
"width:100px" is the full width of the bar in pixels.
"height:16px" is the full height of the bar in pixels.
"width:50%" is the number of percent you have completed of the project.
"background:green" is the color of the complete part of the bar.
"background:red" is the color of the incomplete part of the bar.
"border:1px solid black" is the border width, style and color of the bar.
Well thats pretty much it.
Simply copy and paste the following code into your sig and make a few changes to it:
|
HTML-Code:
<table><tr><td>ASDF:</td><td><table style="width:100px;height:16px;border-collapse:collapse;border:1px solid black"><tr><td style="background:green;width:50%"></td><td style="background:red"></td></tr></table></td></tr></table> |
"ASDF:" is the text shown before the bar. This should be the name of your project.
"width:100px" is the full width of the bar in pixels.
"height:16px" is the full height of the bar in pixels.
"width:50%" is the number of percent you have completed of the project.
"background:green" is the color of the complete part of the bar.
"background:red" is the color of the incomplete part of the bar.
"border:1px solid black" is the border width, style and color of the bar.
Well thats pretty much it.
7. Changing avatars
Changing avatars (Click to View)
I once got a PM:
The trick is really simple.
Try right-clicking on my avatar and click "Show Image" and pay attention to the address bar.
It should say "http://nonsence.heliohost.org/EGGAvatars/?dateline=aunixtimestamp".
The "?dateline=aunixtimestamp" part is useless.
The interesting bit is "http://nonsence.heliohost.org/EGGAvatars/".
Whats on that page?
Why doesnt it end on ".jpg", ".jpeg", ".png", ".gif", ".bmp" or something like that?
To answer that question you cant use the view source as this trick is server-side meaning it isnt handled by the browser but by the server.
It isnt the Little Fighter Empire server but it is my own server which I like to call nonsence.
In order to use this trick you will need your own website, and it has to allow you to use PHP.
You can get free ones nearly everywhere.
Some are better than others.
I use HelioHost.
You will need a folder on your website.
Name it "Avatars".
You will also need a PHP file.
Name it "index.php"
PHP is a server-side-programming language.
MyBB (this forum) written in PHP.
The script you will need looks like this:
You should place all of the avatars you want to be choosed between in the folder.
In the "define rules here" part you can define rules for specific avatars.
It works like this:
You should replace "avatar.ext" with the name of your avatar.
The "date('m') == 2 && date('d') == 14" part is a PHP expression which is either true or false.
If it is true the avatar has a 5 times as high chance of being selected.
If it is false it cannot be selected.
Also this script only works with ".png" and ".gif" files.
Then set your "Avatar URL" to the path of the PHP file with the script on your server.
Fiandsnuve Wrote:what you do to your avatar keep changing? :shock:At the time I got that PM I didnt have time to write a tutorial on it and I simply forgot it... until now.
The trick is really simple.
Try right-clicking on my avatar and click "Show Image" and pay attention to the address bar.
It should say "http://nonsence.heliohost.org/EGGAvatars/?dateline=aunixtimestamp".
The "?dateline=aunixtimestamp" part is useless.
The interesting bit is "http://nonsence.heliohost.org/EGGAvatars/".
Whats on that page?
Why doesnt it end on ".jpg", ".jpeg", ".png", ".gif", ".bmp" or something like that?
To answer that question you cant use the view source as this trick is server-side meaning it isnt handled by the browser but by the server.
It isnt the Little Fighter Empire server but it is my own server which I like to call nonsence.
In order to use this trick you will need your own website, and it has to allow you to use PHP.
You can get free ones nearly everywhere.
Some are better than others.
I use HelioHost.
You will need a folder on your website.
Name it "Avatars".
You will also need a PHP file.
Name it "index.php"
PHP is a server-side-programming language.
MyBB (this forum) written in PHP.
The script you will need looks like this:
|
PHP-Code:
<?php //define rules here $dir = opendir('Avatars'); while($file = readdir($dir)){ if(strpos($file,'.png') || strpos($file,'.gif')){ if(isset($rules[$file])){ if($rules[$file]){ $files[] = $file; $files[] = $file; $files[] = $file; $files[] = $file; $files[] = $file; } }else{ $files[] = $file; } } } closedir($dir); if(isset($files)){ $file = $files[rand(0,count($files)-1)]; if(strpos($file,'.png')){ header('Content-Type: image/png'); }elseif(strpos($file,'.gif')){ header('Content-Type: image/gif'); } readfile('Avatars/'.$file); } ?> |
You should place all of the avatars you want to be choosed between in the folder.
In the "define rules here" part you can define rules for specific avatars.
It works like this:
You should replace "avatar.ext" with the name of your avatar.
The "date('m') == 2 && date('d') == 14" part is a PHP expression which is either true or false.
If it is true the avatar has a 5 times as high chance of being selected.
If it is false it cannot be selected.
Also this script only works with ".png" and ".gif" files.
Then set your "Avatar URL" to the path of the PHP file with the script on your server.
If you want to find out more then right click>view source on a page.
If the page has a no right click script then try the view menu and click source.
You can read the entire HTML source of the page, then C&P some of the code into your signature.
Edit it and done.
Age ratings for movies and games (and similar) have never been a good idea.
One can learn a lot from reinventing wheels.
An unsound argument is not the same as an invalid one.
volatile in C++ does not mean thread-safe.
Do not make APIs unnecessarily asynchronous.
Make C++ operator > again
Trump is an idiot.
One can learn a lot from reinventing wheels.
An unsound argument is not the same as an invalid one.
volatile in C++ does not mean thread-safe.
Do not make APIs unnecessarily asynchronous.
Make C++ operator > again
Trump is an idiot.