This is what we're talking about hiding:


Headers or Footers, wherever you'd like it to be.

Preview: http://9861.smfforfree.com/index.php/topic,9.0.html
Note that on my test forum it will only work for that topic. It should work everywhere for you.

Put this in either your headers or footers.

Also note that if your guests disable javascript they would be able to see the links and there's no way to get around that.

Thanks ^_^

The main inspiration behind this thread was when I had to search through my entire post history to get the loggedIn function. I thought this would make it easier.

Note: This is by no means a thorough or exhaustive list. As of now it is incomplete. If you would like to see something added to this, please reply to this topic.


Checking whether the user is logged in
This function will return true or false depending on whether the user is logged in.


Example:


Checking whether the user is an admin
This function will return true or false depending on whether the user is logged in.


Example:


Notice that fits in with the forum theme
This function will return a string containing HTML that is appropriate for displaying widgets.


Example:

This tutorial will teach you how to create forum markers(new and no post icons next to individual boards) using Photoshop. The forum markers we will be making shall be 32x32px in size.

Step 1
Create a new document of size 32x32 pixels with a transparent background. Select two different grays. I have #a7a7a7 and #8d8d8d.

Step 2
Draw a gradient over your canvas using these colors.


Step 3
It's time for some gloss. Use the elliptical marquee tool to create a circular selection over your image.

Now create a large white to transparency radial gradient on a new layer. Deselect(Ctrl+D) and set this layer to soft light. Lower it's opacity to around 50%.


Step 4
It's looking real plain now, but we will fix that. Now lets create a border.
Create a new layer for the border. Press Ctrl+A to select the entire canvas. Then go to Edit>Stroke and use these settings.

Lower this layers opacity to around 20%.


Step 5
Let's add a line around the bottom of the forum marker. Zoom in as far as you can go, and then create a new layer. Get your pencil tool out and draw a white line with a 1px brush leaving gaps around the border as show in the image. Hold down the shift button while drawing the line so that it is straight.

Set this layers opacity around 10%. Now draw a similar black line just above the white one on a new layer and set it to soft light at 50% opacity.


Step 6
Now we are almost done, all we need to do is put up a shape in the marker. It could be anything you want, such as your logo, but I am just going to put one of Photoshop's default shapes there, that looks like a '>' there. I set it's blending mode to 'Soft Light'.


Step 7
Time for coloring! Pick your color and fill a new layer with it and then set the layer to 'Soft Light'. I will be using blue. You will need to play around with this for a while. If your color isn't saturated enough, you can duplicate the layer or do a hue/saturation adjustment.


Step 8
All you have to do now is modify this icon to create the rest of your icons. Lower the opacity of the shape a bit to get your no new posts icon. Bring the opacity back to earlier and use the same technique we used to create the line at the bottom of the marker to create a little shape on top for your sub-new posts or child board new posts indicator. And here's the entire set-


I hope you enjoyed this tutorial as much as I enjoyed writing it.

NOTE: Original Topic: http://aetus.net/forum/index.php?topic=110.0

This tutorial will teach you how to create a signature with dynamic text using PHP with the GD library installed.

Preview -
 
This was the original -

The 'omikron' text on that was dynamically put there, so I can change it on the fly.

First you need an image to place text on. Once you have that, create a new php file with the usual tags.

Now lets get the text that we will use. I am going to place whatever text I receive through a GET variable.

You might even want to secure the text that you receive, although I won't be doing that right now.
My signature is stored as 'images/dragon.png' relative to the PHP file. Let's load the image now.

You should also select the color you want. You can't use a hexadecimal value here, you will need the appropriate amounts of red, green and blue. The format for this function is imagecolorallocate($image, red, blue, green);

$image is the variable to which we are allocating the color to.
red, blue and green are the appropriate amounts of red blue and green you will use. I wanted a nice brownish color, so I used 226, 220, 210. These value are out of a total of 255. If all three are 255, the color will be white and if all of those are 0, the color would be black.

So now the code is -

Now select the font you want to use. I will use Palatino Linotype, which is located as 'fonts/pala.ttf' relative to the PHP file. Let's store this in a variable so that we can use it later. The font has to be a TTF font.

You also need the X and Y coordinates where your text will be placed. You will need to play around with these for a while. I ended up with 12(X) and 86(Y).

You also need to know the font size you are going to use. 10 fits in well for me.

The last thing you need is the rotation of your text. This is in an anti-clockwise direction. I am leaving mine at 0.

Now we are ready to actually add the text. I will be using the imagettftext function for this.
imagettftext($image, $size, $rotation, $x, $y, $color, $font, $str);
The parameters should be self-explanatory, since we already stored them in variables before.

Now that we are done with the image, let's send it to the client.

header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);

The header('Content-Type: image/png'); is to tell the browser that we are sending an image.
imagepng($image); is to actually output the image.
imagedestroy($image); will just destroy the image since it has already been sent and isn't needed any more.

So the complete code for the image is -

If you saved this on your host as sigs/sig.php, you can access it like this:
http://YOURHOST/sigs/sig.php?txt=MyName

Now, the problem is that some forums don't allow you to add a signature image unless it ends with an image extension(PNG, GIF or JPEG). We can easily fix this using HTACCESS. Your host needs to have mod_rewrite enabled. Open your .htaccess file, or create one if it does not exist. It needs to be in the 'sigs' directory. On a new line, add -

That way, you can access the image as
http://YOURHOST/sigs/MyName/sig.png

The first line in the HTACCESS code simply enables the rewrite engine.
The second line is RewriteRule (.+)/sig.png sig.php?txt=$1.
RewriteRule - A new URL rewriting rule.
(.+)/sig.png - (.+) is a 'catch-all expression'. This represents what your URL will look like.
sig.php?txt=$1 - This represents what the actual file is. $1 is what was caught by the 'catch-all' expression above.

So, http://YOURHOST/sigs/Anything/sig.png will become the same as http://YOURHOST/sigs/sig.php?txt=Anthing

Lets begin with this: What is jQuery?

From the jQuery website,


- I like to describe jQuery as this really cool javascript library that is here to make your life easy. What you can do with plain old javascript in 20 lines can be done by jQuery in 10 lines, maybe even lesser.

- jQuery has an interesting concept called chainability.

That one line of code finds elements that have the ID 'something', adds the class 'smalltext' to them, removes the class 'largetext' from them and then shows them if they are hidden. Interesting, huh?

- jQuery also has a number of awesome effects. Now you can use awesome animations to show hidden text without programming a single line extra.

- jQuery also has a very nice method of detecting events.

That code, placed in your headers, will alert the user whenever a link is clicked. (Annoying, I know.) That comes in very handy if you are trying to have clean HTML script with all your javascript in one single place.

Enough intro for now, so lets get started with the actual tut.

---

This tutorial assumes that you have some basic knowledge of HTML. If you don't know HTML, don't worry. It's no biggy. Here are some links that are sure to help you out:
- w3schools
- Cedge's HTML Cheat Sheet


We all know what an element is – and this tutorial will teach you how to identify and manipulate them, in jQuery.

jQuery and CSS identify elements in the same way. If you know CSS, great! It'll be easier for you. Let's start with an example HTML document.



You probably know that all scripts go within script tags.


Now put in a jQuery include. For our purposes, you can put in this:

NOTE: Do not use that in any page you publish. Download the latest jQuery from jquery.com and upload that to your hosting and use it from there.

You have to put that in your head section.


Lets try to isolate the ‘Hi there' text first.

This is the code you need:

Easy, eh? Now to see if that works, lets do something to it. If you put a ‘.hide()' after it, you get:
Put that into the document somewhere after the h1 tag, save it and run it. Can you see the contents of h1? If you can, you have done something wrong. Repeat all the steps and try again. I'll explain later why it should be after the h1 tag.
This is what you should have:
That was pretty easy, wasn't it? Now lets hide the bold stuff.


Put that in and try.
But, what if we had two bold elements and wanted to hide only one?
What if this is your document?

OK, we want to hide the second one. How?
Answer: Give it an id.
Lets give it the ID “Lorem".
So this is our document now:

Then to hide it, you'd have:

Understood? We affix the id after a ‘#'.

Put that after the bold text and try. It should work.

There are another two methods: using the contains function and using a class.
Lets see how to use a class first.

Let's give the part to hide a class. Classes are usually used by CSS to give an element specific properties. Of course, no one's saying that you can't use IDs in CSS but the general practice is to use classes. This should be the HTML document.

As you can see, the lorem ipsum dolor paragraph now has a class, ‘lorem'. Now to hide it, you'd have
It's almost the same as the thing we did for using and id. This time we used a ‘.' Instead of a ‘#'.  Put it just before the </body> and try.


Now consider this document:

It's the same except that the lorem part doesn't have any class or ID. We will be using ':contains' to identify it.
This is the code you have:
That should be easy. Put it before the '</body>' and try.


Now lets look at another method of identifying a nested element.
Consider this HTML document.

We want to hide the link. It contains the text 'here'.

To hide it, you have

That code looks for an element that is an 'a' within a div having the class 'wrapper'. But what if there were 2 'a's within div.wrapper?
We will need to add something that gets only the anchors which link to #somewhere.


Geddit? The thing in the [square] brackets? Basically, that makes it match only the elements with the property 'href' that is exactly the same as the string '#somthing'.
Try it.

Some theory on that:
[attribute]    
Matches elements that have the specified attribute.
[attribute=value]    
Matches elements that have the specified attribute with a certain value.
[attribute!=value]    
Matches elements that don't have the specified attribute with a certain value.
[attribute^=value]
Matches elements that have the specified attribute and it starts with a certain value.
[attribute$=value]    
Matches elements that have the specified attribute and it ends with a certain value.
[attribute*=value]
Matches elements that have the specified attribute and it contains a certain value.

What we did up there was the second one. I got that straight from the jQuery documentation. That ends the selecting part of this tutorial. To learn further, go here.

Now lets begin with manipulating elements. You already know how to hide stuff. Let's go deeper.

I'll split this section into parts.

I. Inserting inside

We'll look at two things here - appending and prepending.

1. Appending
This is used to add some text at the end of all matched elements.

For example,
will add Hello! at the end of divs that have the class 'wrapper'.

2. Prepending
This will add something to the beginning of matched elements.

Example:
will add Hello! at the start of divs with the class 'wrapper'.

II. Hiding, Showing and Toggling

1. Hide
We already know what this does, no need to repeat.

will hide all elements with the id '#something'.

2. Show
Will display hidden elements.

will show the #something that we hid above.

3. Toggle
Will toggle elements. Which is to say, if it is hidden, it will show the element and if it is visible it will hide the element.



III. Changing contents

1. HTML
Used to set the HTML inside matched elements to something else.


2. TEXT
Used to Set the text contents of all matched elements.


Another example:

Source Code
Result:


For more information on jQuery manipulation, go here.

I promised to tell you why you have to put the code after the element you are trying to identify and manipulate. This is the reason: code is executed the moment it is downloaded, and if the code is below it, it is downloaded later and so the code can not find it at that time. Here is a way around that: put your code in this:

That will make the code execute only after the whole document has loaded.

Original Image Resizing Script

I've tweaked that code a bit to get it to fit in a bit and display a message. You can find a preview of it here.

You can put this in either you headers or your footers. You may have to edit the colors in the CSS on top if you are using a custom theme.

Also note that the icon that is displayed is from the silk icon set from famfamfam.com which is licensed under a Creative Commons Attribution 2.5 License.


If large images aren't common on your forum, then the small credit line at the bottom of resized images wouldn't be very intrusive. If you don't want it there and would prefer, say, a link in your footers, send me a PM or (preferably) an email.

Congrats on the promo. ^_^

Preview is here: http://9861.smfforfree.com/index.php

I have two boards on that forum, the announcements show up in both.

First off, ensure you have this in your headers:

This goes in your footers:

You have to edit the first part of the script, the part before the copyright message. The part which looks like this:

More specifically, the two lines in the center. Delete those two lines and add in your own lines like this:

Keep adding lines like that, and when you are done, remove the comma at the end of the last line.

As usual this has been tested on Firefox and Opera. (I realized that Epiphany uses Firefox's rendering engine so no point mentioning that.) If it doesn't on another browser let me know and I'll try to iron out the bugs.

That's it. If you have any problems with this let me know. Also, if you liked this code I'd appreciate it very very very much if you linked to my site(Aetus Designs) somewhere.

That's because I just fixed it. I still have to see what happens when the hour is 12...

Ok there is that problem. I'm fixing it!

Weird, this line is supposed to fix that:
    hour = (hour == 0) ? hour - 12 : "12";

Try this:

I basically just got what Agent wrote to return false.